【React全家桶】React Hooks

hooks介绍

在react类组件（class）写法中，有setState和生命周期对状态进行管理，但是在函数组件中不存在，因此引入hooks

React的组件创建方式，一种是类组件，一种是纯函数组件，并且React团队希望，组件不要变成复杂的容器，最好只是数据流的管道。开发者根据需要，组合管道即可。也就是说组件的最佳写法应该是函数，而不是类。

使用hooks理由

1. 高阶组件为了复用，导致代码层级复杂

2. 生命周期的复杂

3. 写成functional组件,无状态组件 ，因为需要状态，又改成了class,成本高

类组件与函数组件的区别：

• 函数组件没有生命周期，类组件有（挂载、更新、销毁）

• 函数组件没有状态（state），类组件有

• 函数组件没有this，类组件有

useState(保存组件状态)

纯函数组件没有状态，useState()用于设置和使用组件的状态属性

const [state, setstate] = useState(initialState)
//state:初始状态属性，指向状态当前值
//setstate:修改状态属性函数，用来更新状态
//initialState:状态的初始值，该值会赋给state

state是一个对象：

setState()不会局部更新

useEffect()

useEffect()是副作用的钩子，可以检测数据更新 ,可以实现特定的功能，如异步请求

• useEffect()接受两个参数，第一个参数是你要进行的异步操作，第二个参数是一个数组，用来给出Effect()的依赖项。
• 只要数组发生改变，useEffect()就会执行。
• 当第二项省略不填时，useEffect()会在每次组件渲染时执行，这一点类似于componentDidMount。

useEffect(() => {
   
   
//effect
return () => {
   
   
//cleanup
};
}, [依赖的状态;空数组,表示不依赖])

不要对 Dependencies 撒谎,如果你明明使用了某个变量，却没有申明在依赖中，你等于向 React撒了谎，后果就是，当依赖的变量改变时，useEffffect也不会再次执行, eslint会报警告

useEffffect和useLayoutEffffect区别：

简单来说就是调用时机不useLayoutEffect() 和原来componentDidMount &componentDidUpdate
一致，在react完成DOM更新后马上同步调用的代码，会阻塞页面渲染。而 useEffect() 是会在整个页面渲染完才会异步调用。

在实际使用时如果想避免页面抖动（在 useEffect 里修改DOM很有可能出现）的话，可以把需要操作DOM的代码放useLayoutEffect 里。在这里做点dom操作，这些dom修改会和 react 做出的更改一起被一次性渲染到屏幕上

useCallback(记忆函数)

防止因为组件重新渲染，导致方法被重新创建，起到缓存作用;只有第二个参数 变化了，才重新声明一次

var handleClick = useCallback(()=>{
   
   
console