[react] 请描述下你对react的新特性Hooks的理解？它有哪些应用场景？

[wwwind213]

[react] 请描述下你对react的新特性Hooks的理解？它有哪些应用场景？

[zhaofeipeter]

在 React 中使用 class 继承 React.Component，就可以在类里面使用各种各样的钩子函数，比如 componentWillMount、componentDidMount、componentWillUnmount 等。

你也可以直接写 function 来构建 reander 方法，但是就无法使用钩子函数，无法使用 setState 修改状态。 在 React 16 版本之后新增了 hooks 特性，hooks 特性的主要表现形式为：在 React 中可以直接使用函数的形式来完成所有组件逻辑。

应用场景 1.修改数据状态: useState 2.执行 DOM 挂载或者更新之后的事务 ：useEffect 3.共享数据，跨组件传值：useContext

4. 复杂的状态管理:useReducer

[vkboo]

• 理解：
  1. Hooks赋予了函数式组件更强大的能力，能让让函数式组件有状态，可以做以前class组件才能做到的更有逻辑的业务
  2. Hooks方便了业务的抽离，相比与以前HOC的代码不容易理解，组件容易形成嵌套地狱等问题，Hooks不仅能够针对单一的逻辑进行抽离，同时也解决了HOC的种种问题
  3. Hooks就是对数据管理的抽离，以前通过utils的纯JS代码，现在也能够通过hooks后的封装，实现“响应式”
• 应用：
  1. 对副作用的处理,用于模拟生命周期，对数据状态的监听，这个主要用到了useEffecthook.
  2. useMemo``useCallback对变量、函数的缓存，结合React.PureComponent``React.memo可以避免不需要的render
  3. useRef声明一个状态值，不随着组件函数的执行而重新赋值，只以最后一次赋值为准
  4. useContext是Context API的hooks版本，用于在组件中的context进行取值
  5. 常用的第三方库的hooks: 比如react-router的useLocation useParams useRouteMatch useHistory，react-redux的useDispatch useSelector等
  6. 单一业务逻辑抽离成自定义hooks