react hooks的优缺点

优点
一、更容易复用代码
这点应该是react hooks最大的优点，它通过自定义hooks来复用状态，从而解决了类组件有些时候难以复用逻辑的问题。hooks是怎么解决这个复用的问题呢，具体如下：

1.每调用useHook一次都会生成一份独立的状态，这个没有什么黑魔法，函数每次调用都会开辟一份独立的内存空间。
2.虽然状态(from useState)和副作用(useEffect)的存在依赖于组件，但它们可以在组件外部进行定义。这点是class component做不到的，你无法在外部声明state和副作用（如componentDidMount）。
上面这两点，高阶组件和renderProps也同样能做到。但hooks实现起来的代码量更少，以及更直观（代码可读性）。

二、清爽的代码风格+代码量更少
1.函数式编程风格，函数式组件、状态保存在运行环境、每个功能都包裹在函数中，整体风格更清爽，更优雅。

2.对IDE更友好，对比类组件，函数组件里面的unused状态和unused-method更容易被编辑器发现。

3.使用typescript的话，类型声明也变得更容易。
4.向props或状态取值更加方便，函数组件的取值都从当前作用域直接获取变量，而类组件需要先访问实例this，再访问其属性或者方法，多了一步。

5.更改状态也变得更加简单, this.setState({ count:xxx })变成 setCount(xxx)。

因为减少了很多模板代码，特别是小组件写起来更加省事，人们更愿意去拆分组件。而组件粒度越细，被复用的可能性越大。所以，hooks也在不知不觉中改变人们的开发习惯，提高项目的组件复用率。

缺点
一、响应式的useEffect
写函数组件时，你不得不改变一些写法习惯。你必须清楚代码中useEffect和useCallback的“依赖项数组”的改变时机。有时候，你的useEffect依赖某个函数的不可变性，这个函数的不可变性又依赖于另一个函数的不可变性，这样便形成了一条依赖链。一旦这条依赖链的某个节点意外地被改变了，你的useEffect就被意外地触发了，如果你的useEffect是幂等的操作，可能带来的是性能层次的问题，如果是非幂等，那就糟糕了。

所以，对比componentDidmount和componentDidUpdate，useEffect带来的心智负担更大。

二、状态不同步
函数的运行是独立的，每个函数都有一份独立的作用域。函数的变量是保存在运行时的作用域里面，当我们有异步操作的时候，经常会碰到异步回调的变量引用是之前的，也就是旧的（这里也可以理解成闭包）。

怎么避免react hooks的常见问题
1.不要在useEffect里面写太多的依赖项，划分这些依赖项成多个单一功能的useEffect。其实这点是遵循了软件设计的“单一职责模式”。
2.如果你碰到状态不同步的问题，可以考虑下手动传递参数到函数。
3. 重视eslint-plugin-react-hooks插件的警告。
4.复杂业务的时候，使用Component代替hooks。