usestate中的回调函数_React hooks 最佳实践【更新中】

导语

随着目前需求更新的节奏越来越快，我们目前更多时候原因使用 function component 来代替类的写法，在 hooks 推出之后，我们也可以完全使用 function component 来代替类的写法；但是俗话说的好，没有什么东西是十全十美的，在本次整理总结 hooks 库的过程中，有体验到 hooks 带来的体验提升，同时也存在对比类生命周期写法中不足的地方。

01React hooks的思想 首先对于原先的类组件而言，最好的思想是封装，我们使用的constructor、componentDidMount都是继承自React的方法，这样做相对于hooks来说的好处是，我们的每一个组件对于我们来说都是可预见的，这样我们在写每个组件的时候也都是在这个思路上进行开发的，很显然，这样一种方式带来的不便就是我们每个组件的开发成本太高，组件其中如果有涉及到某个生命周期的逻辑，我们也不便将它抽离出来复用。 使用 hooks 彻底改变了上面这种模式 —— 将一个生命周期钩子的集合变成了一个从头到尾即插即用的模式，从某种意义上来说，我们的组件设计更加灵活了。02基本原则

1.尽量设计简单的hooks

hooks 设计的初衷就是为了使开发更加快捷简便，因此在使用hooks 的时候，我们不应该吝啬使用较多的hooks，例如我们处理不同状态对应不同逻辑的时候，按照写class的逻辑，我们经常会在一个生命周期函数里写下多个逻辑，并用if区分；在写hooks的时候，因为没有shouldComponentUpdate这类的生命周期函数，我们应该将他们分离开，将他们写在不同的useEffect里或者用不同的useCallback包起来，所依赖的变量，也要尽可能的与逻辑相关联，这样可以尽可能的避免性能损耗和bug的产出。

2.注意hooks内部的逻辑

主要是官网提到的两个原则https://reactjs.org/docs/hooks-rules.html#explanation，这里涉及到hooks的一个很重要的概念就是顺序(order)，在每次我们定义钩子函数的时候，react都会按照顺序将他们存在一个“栈”中，类似 如果这时候，我们进行了某种操作，将其中一个钩子函数放到了if语句中，例如我们将firstName设置为仅在初次渲染，那么会造成这种情况：第一次渲染的时候正常，但是在第二次渲染的时候，执行到的第一个钩子函数是：

const [lastName, setLastName] = useState('yeyung');

这时候，react会去执行顶层的栈中的方法，也就是我们后续的操作都往前挪了一位。 03初始化 通常情况，我们使用 useState 来创建一个带有状态的变量，这个钩子函数返回一个状态变量和一个setter，当我们调用setter函数的时候，render函数会重新执行；这里有一个常见的问题，使用多个state或者合并成一个state？ 这个问题的产生来自于编写useSetState的时候所做的思考，按照之前写class的经验，显然将所有状态写在一起更加方便也更加好管理，但是，显然hooks并不是class，事实上，这里的setter函数的机制也和setState不一样，setState是把更新的字段合并到 this.state 中，而hooks中的setter则是直接替换，所以如果我们这里将所有的状态变量放在一个state中，显然违背了更方便维护的初衷。 但是也并不是将state分离的越细越好，看一下这个例子: 

const [left, setLeft] = useState(0);

const [right, setRight] = useState(0);

el.addEventListener('mousemove', e => {
    

 setLeft(e.offsetX);

 setRight(e.offsetY);

})

我们需要在鼠标操作的时候修改位置，这时候还将 left 和 right 分开处理显得很没必要，因为我们同时修改两个值的概率远大于只修改一个值的概率，那么这个时候我们就可以把他们写在一起:

const [position, setPosition] = useState({
    
 left: 0,
 right: 0,
})

总结下来就是，如果我们两个或多个值是经常同时修改的，那么我们把它们写在一起是更加方便的，反之，则拆分开来。 04清理操作 这里涉及到的钩子函数是useEffec