React Hooks 作为在 React 函数组件中使用状态和生命周期的一种方法。虽然函数组件之前被称为 无状态组件（FSC） ，但是 React Hooks 的出现，使得这些函数组件可以使用状态。因此，现在许多人将它们视为功能组件。
React Hooks 用于在函数组件中引入状态管理和生命周期方法。如果我们希望一个 React 函数组件可以拥有 状态管理和生命周期方法，我不需要再去将一个 React 函数组件重构成一个 React 类组件。React Hooks 让我们可以仅使用函数组件就可以完成一个 React 应用。
优点：
更容易复用代码
这点应该是react hooks最大的优点，它通过自定义hooks来复用状态（每调用useHooks一次都会生成一份独立的状态），从而解决了类组件有些时候难以复用逻辑的问题。类组件的逻辑复用方式是高阶组件和renderProps。
清爽的代码风格
函数式编程风格，函数式组件、状态保存在运行环境、每个功能都包裹在函数中，整体风格更清爽，更优雅
代码量更少
①向props或状态取值更加方便，函数组件的取值都从父级作用域直接取，而类组件需要先访问实例引用this，再访问其属性state和props，多了一步。
②更改状态也变得更加简单, this.setState({ count:xxx })变成 setCount(xxx)。
③更容易发现无用的状态和函数，对比类组件，函数组件里面的unused状态和函数更容易被发现
更容易拆分组件
写函数组件的时候，你会更愿意去拆分组件，因为函数组件写起小组件比类组件要省事。
缺点：
状态不同步
不好用的useEffect，这绝对可以成为摒弃react hooks的理由。函数的运行是独立的，每个函数都有一份独立作用域。当我们处理复杂逻辑的时候，经常会碰到状态不同步的问题。
副作用代码从主动式变成响应式
写函数组件时，你不得不改变一些写法习惯。你必须把深入理解useEffect和useCallback这些api的第二个参数的作用。其次，还有下面几点：
①useEffect的依赖参数并不好写，你需要花时间去判断该把什么变量加入到依赖数组，幸运的是eslint-plugin-react-hooks很多场景可以帮你解决这点，但有时得靠你自己加以判断。
②useEffect很容易出错，它是响应式的，当某个依赖项变化时它才会被调用。你必须去理解它的调用时机、调用时的状态老旧问题，这不直观，也难以维护。有时，useEffect会发生比你预期更多的调用次数。
怎么避免react hooks的常见问题
①不要在useEffect里面写太多的依赖项，划分这些依赖项成多个useEffect，这样更好维护。
②如果你碰到状态不同步的问题，可以考虑下手动传递参数到函数。如：
// showCount的count来自父级作用域
const [count,setCount] = useState(xxx);
function showCount(){ console.log(count) }
// showCount的count来自参数
const [count,setCount] = useState(xxx);
function showCount(c){ console.log(c) }
一定要加入eslint-plugin-react-hooks这个插件，并且重视它的警告。
使用useRef来保存你的引用并在re-render的时候主动更新ref的对应属性，这样可以避免“引用是旧”的这个烦人的问题，但这种方式hack味道浓郁。
