React Hooks概述

react为什么要加入hooks

1. 没法在组件之间复用数据处理的逻辑，或不够直接，例如props和高阶组件的实现方式

2. 复杂组件愈来愈难理解和维护，易引入bug

3. Class语法带来复杂性

hook是什么

• Hook是一个特殊的函数，它容许你在函数中嵌入（勾入）React的特性，好比生命周期，state等。

hook使用的基本规则

1. 只能在函数的最外层调用函数

2. 只能在React的函数组件中调用Hook

3. 自定义hook命名规则（useSomething）

什么状况下使用hook

• 若是你在编写函数组件并意识到须要向其添加一些 state，之前的作法是必须将其它转化为 class。如今你能够在现有的函数组件中使用 Hook

useState Hook使用建议

• 推荐将不一样的state进行分离，单独进行更新

useEffect

• 在React更新DOM以后运行一些额外的功能（订阅，发送网络请求）

• 分类（需清除和无需清楚的反作用）

重要特性

• useEffect默认状况下每次渲染后执行，包括首次渲染

• 传递给useEffect的函数若返回值为函数，此函数将在组件销毁时执行，以执行effect的清除工做

• 若想执行只运行一次的effect（仅在组件挂载和卸载时执行），能够传递空数组做为useEffect的第二个参数

自定义hook

• 解决React组件中没法灵活共享逻辑的问题

• 自定义hook以use开头

• 相同hook不会共享state

Hook api

• zh-hans.reactjs.org/docs/hooks-…

参考文章

• reactjs.org/docs/hooks-…