React Hooks

• Hooks 是 React 最近的一个提案，他解决在 Function component 上面使用 state。

• 长久以来 React 的 Team一直对 JS 的 class 保有诟病，class 在写法上面，测试上面，HMR 上面都会加大难度，于是从 react 16 开始 react 放出了 function component 的概念，使得 react 可以使用纯函数进行书写。但是 function component 有两个明显的问题是，不支持生命周期，不支持 state。所以 react 在今年的 React conf 上面提出了 Hooks 的概念。

• Hooks 的出现并不会影响 class component，并且你无法在 class component 中使用 Hooks。Facebook 内部也有超级多 class component 写的组件，他们并不会用 Hooks 进行重写，现在 Hooks 的主要工作还是在于和 class component 保持一直进度，日后可以完全使用 Hooks 来书写 React 的组件。

Hooks DEMO

• 使用函数书写 Component，通过 useState 获取当前 state 的值以及改变这个 state 的函数，useState 中传入的值为 state 的初始值，useState 在每次重新渲染的时候保留 state 的状态。

• 不需要像以前一样处理 state，事件绑定函数，setState…

• 状态管理变得更加的可靠了，代码不在啰嗦。

多个state

image.png

• 多个 State 只需要使用多个 useState 即可

所以 HOOKS 究竟是什么？

• Hooks 是一种可以让你可以 HOOK 到 react 的 state 和生命周期中。

• Hooks无法在 class 中使用。

• 你也可以自己写一些 Hooks 来重用一些公用操作。

• React 内建很多 Hooks，useState 只是其中一个。

Effect hook

• Side effects 是指数据获取，订阅事件，或者手动修改 DOM，因为这些都可以影响其他的组件，并且不会在组件渲染过程中被完成。

• useEffect Hook 让你可以来实现一些”副作用”的操作，他将 componentDidMount, componentDidUpdate, ComponentWillUnmount 合并为一个统一的 API。

userEffect DEMO

image.png image.png

• Hooks 必须存在于最外层，不可以放到循环，判断，内部函数当中。

• 只可以在 React function components 中使用 Hooks

自定义 Hooks

image.png image.png image.png

其他的一些 HOOKS

• useState

• useEffect

• useContext

• useReducer

• useCallback

• useMemo

• useRef

• useImperativeMethods

• useMutationEffect

• useLayoutEffect

• ……

END

• HOOKS 目前尚在提案环节，但是已经在 Facebook prod 环境运行了几个月时间了，所以目前看来是比较稳定了。

• 因为刚刚放出，所以会根据社区提的建议进行适当的修改，但是总体不会改变太大。

• 日后我们在写 React 的时候就有新的选择了，丢弃 class，使用 function。