Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性让函数组件具有类组件的能力
State Hook
useState 会返回 一对值：当前状态和一个让你更新它的函数，你可以在事件处理函数中或其他一些地方调用这个函数。它类似 class 组件的 this.setState，但是它不会把新的 state 和旧的 state 进行合并。
useState 唯一 的参数就是 初始 state，这个初始 state 参数 只有 在第一次渲染时会被用到。
可以声明 多个 useState.
useState
seState 方法的时候做了什么?它定义一个 “state 变量”。我们的变量叫 count， 但是我们可以叫他任何名字，比如 banana。这是一种在函数调用时保存变量的方式 —— useState 是一种新方法，它与 class 里面的 this.state 提供的功能完全相同。一般来说，在函数退出后变量就就会”消失”，而 state 中的变量会被 React 保留。
useState() 方法里面唯一 的参数就是初始 state，如果我们想要在 state 中存储两个不同的变量，只需调用 useState() 两次即可。
useState 方法的返回值是什么？返回值为：当前 state以及更新 state 的函数。这就是我们写 const [count, setCount] = useState() 的原因。我们可以通过调用 setCount 来更新当前的 count。
useReducer
Effect Hook
Effect Hook 可以让你在函数组件中执行副作用操作，你可以把 useEffect Hook 看做 componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个函数的组合。
useEffect 做了什么？ 通过使用这个 Hook，你可以告诉 React 组件需要在 渲染后 执行某些操作。React 会保存你传递的函数（我们将它称之为 “effect”），并且在执行 DOM 更新之后调用它。
useEffect 会在每次渲染后都执行吗？ 是的，默认情况下，它在第一次渲染之后和每次更新之后都会执行。React 保证了每次运行 effect 的同时，DOM 都已经更新完毕。
当 React 渲染组件时，会保存已使用的 effect，并在更新完 DOM 后执行它。这个过程在每次渲染时都会发生，包括首次渲染。
传递给 useEffect 的函数在每次渲染中都会有所不同，这是刻意为之的。事实上这正是我们可以在 effect 中获取最新的 state 的值，而不用担心其过期的原因。每次我们 重新渲染，都会生成新的 effect，替换掉之前的。某种意义上讲，effect 更像是渲染结果的一部分 —— 每个 effect “属于”一次特定的渲染。
useEffect
需要清除的 Effect
如果你的 effect 返回一个函数，React 将会在执行清除操作时调用它.
其实就相当于 在 class 组件的 componentWillUnmount 中 移除一些 Effect ， 比如 定时器，DOM 事件。
为什么要在 effect 中返回一个函数？ 这是 effect 可选的清除机制。每个 effect 都可以返回一个清除函数。
React 何时清除 effect？ React 会在组件卸载的时候执行清除操作。
需要清除的 Effect
性能优化
每次渲染后都执行清理或者执行 effect 可能会导致性能问题。如果某些特定值在两次重渲染之间没有发生变化，你可以通知 React 跳过 对 effect 的调用，只要传递数组作为 useEffect 的第二个可选参数即可：
性能优化
我们传入 [count] 作为第二个参数。这个参数是什么作用呢？如果 count的值是 5，而且我们的组件重渲染的时候 count 还是等于 5，React 将对前一次渲染的 [5] 和后一次渲染的 [5] 进行比较。因为数组中的所有元素都是相等的(5 === 5)，React 会跳过这个 effect，这就实现了性能的优化。
自定义 Hook
Hook 规则
1. 只在最顶层使用 Hook：不要在循环，条件或嵌套函数中调用 Hook；
2. 不要在普通的 JavaScript 函数中调用 Hook：在 React 的函数组件中调用 Hook；在自定义 Hook 中调用其他 Hook 。
API
useRef 每次返回的是同一个对象
useContext、useRef， 优化 ：useCallback、useMemo 配合 memo 一起使用
闭包陷阱
网友评论