React Hooks系列之自定义Hooks

前言

react hooks 是 React 16.8 的新增特性。 它可以让我们在函数组件中使用 state 、生命周期以及其他 react特性，而不仅限于 class 组件。react hooks 的出现，标示着 react中不会在存在无状态组件了，只有类组件和函数组件。具体可查看官网。

优势：

1. 函数组件不能使用state，遇到交互更改状态等复杂逻辑时不能更好地支持，hooks让函数组件更靠近class组件，拥抱函数式编程。
2. 解决副作⽤问题，hooks出现可以处理数据获取、订阅、定时执行任务、手动修改 ReactDOM这些⾏为副作用，进行副作用逻辑。比如useEffect。
3. 更好写出有状态的逻辑重用组件。
4. 让复杂逻辑简单化，比如状态管理：useReducer、useContext。
5. 函数式组件比class组件简洁，开发的体验更好，效率更⾼，性能更好。
6. 更容易发现无用的状态和函数。

自定义Hooks

官网：https://reactjs.bootcss.com/docs/hooks-custom.html

例子：

 
import React，{useEffect} from 'react' 
//封装的Hooks⽤用use开头
const useChangeTitle= (title) =>{
	useEffect(()=>{ document.title=title
},[title]) }

exprot default (props)=>{ useChangeTitle("⾃自定义修改标题Hooks") return (
	<div> 测试⾃自定义Hooks
	</div> )
}

Hooks使用规则

官网：https://reactjs.bootcss.com/docs/hooks-rules.html

1. 只在顶层调⽤Hooks Hooks的调⽤，尽量只在顶层作⽤域进行调用不要在循环，条件或者是嵌套函数中调⽤Hook，否则可能会⽆无 ，确保每次组件渲染时都以相同的顺序调⽤Hook。
2. 只在函数组件调⽤Hooks，React Hooks目前只支持函数组件，所以⼤大家别在class组件或者普通的函数⾥面调⽤Hook钩⼦函数
3. React Hooks的应用场景在函数组件，自定义hooks

在未来的版本React Hooks会扩展到class组件，但是现阶段不能再class⾥使⽤。