介绍

  • 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

所以 HOOKS 究竟是什么?

  • Hooks 是一种可以让你可以 HOOK 到 react 的 state 和生命周期中。
  • Hooks无法在 class 中使用。
  • 你也可以自己写一些 Hooks 来重用一些公用操作。
  • React 内建很多 Hooks,useState 只是其中一个。

Effect hook

  • Side effects 是指数据获取,订阅事件,或者手动修改 DOM,因为这些都可以影响其他的组件,并且不会在组件渲染过程中被完成。
  • useEffect Hook 让你可以来实现一些”副作用”的操作,他将 componentDidMount, componentDidUpdate, ComponentWillUnmount 合并为一个统一的 API。

userEffect  DEMO

  • Hooks 必须存在于最外层,不可以放到循环,判断,内部函数当中。
  • 只可以在 React function components 中使用 Hooks

自定义 Hooks

其他的一些 HOOKS

  • useState
  • useEffect
  • useContext
  • useReducer
  • useCallback
  • useMemo
  • useRef
  • useImperativeMethods
  • useMutationEffect
  • useLayoutEffect
  • ……

END

  • HOOKS 目前尚在提案环节,但是已经在 Facebook prod 环境运行了几个月时间了,所以目前看来是比较稳定了。
  • 因为刚刚放出,所以会根据社区提的建议进行适当的修改,但是总体不会改变太大。
  • 日后我们在写 React 的时候就有新的选择了,丢弃 class,使用 function。