React中hooks的优缺点是什么？

得分点

可读性强、组件层级变得更浅、不再需要考虑class组件中this指向、部分生命周期不支持

参考答案

标准回答

优点：

• 代码的可读性强，在使用hooks之前比如发布/订阅自定义事件被挂载在componentDidMount生命周期中，然后需要在componentWillUnmount生命周期中将它清楚，这样就不便于开发者维护和迭代。在使用hooks之后，通过useEffect可以将componentDidMount生命周期、componentDidUpdate生命周期和componentWillUnmount生命周期聚合起来，方便代码的维护。
• 组件层级变得更浅了，在使用hooks之前通常使用高阶组件HOC的方法来复用多个组件公共的状态，增强组建的功能，这样肯定是加大了组件渲染的开销，损失了性能。但是在hooks中可以通过自定义组件useXxx()的方法将多个组件之间的共享逻辑放在自定义hook中，就可以轻松的进行数据互通。
• 不再需要考虑class组件中this指向的问题，hook在函数组件中不需要通过this.state或者this.fn来获取数据或者方法。

缺点：hooks的useEffect只包括了componentDidMount、componentDidUpdate还有componentWillUnmount这三个生命周期，对于getSnapshotBeforeUpdate和componentDidCatch等其他的生命周期没有支持。

加分回答

使用useEffect时候里面不能写太多依赖项，将各个不同的功能划分为多个useEffect模块，将各项功能拆开写，这是遵循了软件设计的“单一职责模式”。如果遇到状态不同步的情况，使用手动传递参数的形式。如果业务复杂，就使用Component代替hooks，hooks的出现并不是取代了class组件，而是在函数组件的基础上可以实现一部分的类似class组件功能。

延伸阅读

hooks官方指出不要在循环、条件或者嵌套函数中使用hook，确保一定是在react函数的最顶层调用它们。不要在react的class组件中调用hook，这样是无效的，应在函数组件或者自定义hook中使用它。

Hook API：

• useState
• useEffect
• useContext
• useReducer
• useCallback
• useMemo
• useRef
• useImperativeHandle
• useLayoutEffect
• useDebugValue