什么是 Hooks
Hook 是 React 16.8 的新增特性。前端
Hooks 本质上就是一类特殊的函数，它们能够为你的函数型组件（function component）注入一些特殊的功能，让您在不编写类的状况下使用 state(状态) 和其余 React 特性。react
为何要使用 React Hooks
-
状态逻辑难以复用： 业务变得复杂以后，组件之间共享状态变得频繁，组件复用和状态逻辑管理就变得十分复杂。使用 redux 也会加大项目的复杂度和体积。 -
组成复杂难以维护： 复杂的组件中有各类难以管理的状态和反作用，在同一个生命周期中你可能会由于不一样状况写出各类不相关的逻辑，但实际上咱们一般但愿一个函数只作一件事情。 -
类的 this 指向性问题： 咱们用 class 来建立 react 组件时，为了保证 this 的指向正确，咱们要常常写这样的代码： const that = this，或者是this.handleClick = this.handleClick.bind(this)>；一旦 this 使用错误，各类 bug 就随之而来。
为了解决这些麻烦，hooks 容许咱们使用简单的特殊函数实现 class 的各类功能。web
useState
在 React 组件中，咱们常常要使用 state 来进行数据的实时响应，根据 state 的变化从新渲染组件更新视图。redux
由于纯函数不能有状态，在 hooks 中，useState就是一个用于为函数组件引入状态（state）的状态钩子。小程序
const [state, setState] = useState(initialState);
useState 的惟一参数是状态初始值（initial state），它返回了一个数组，这个数组的第[0]项是当前当前的状态值，第[1]项是能够改变状态值的方法函数。数组
延迟初始化
initialState 参数是初始渲染期间使用的状态。在随后的渲染中，它会被忽略了。若是初始状态是高开销的计算结果，则能够改成提供函数，该函数仅在初始渲染时执行：浏览器
function Counter({initialCount = 0}) {
// 初始值为1
const [count, setCount] = useState(() => initialCount + 1);
return (
<>
Count: {count}
<button onClick={() => setCount(0)}>Reset</button>
<button onClick={() => setCount(count + 1)}>+</button>
<button onClick={() => setCount(prevCount => prevCount - 1)}>-</button>
</>
);
}
函数式更新对比普通更新
若是须要使用前一时刻的 state(状态) 计算新 state(状态) ，则能够将 函数 传递给 setState 。该函数将接收先前 state 的值，并返回更新的 state。服务器
那么setCount(newCount)和setCount(preCount => newCount)有什么区别呢，咱们写个例子来看下：微信
function Counter() {
const [count, setCount] = useState(0);
function add() {
setTimeout(() => {
setCount(count + 1);
}, 3000);
}
function preAdd(){
setTimeout(() => {
// 根据前一时刻的 count 设置新的 count
setCount(count => count + 1);
}, 3000);
}
// 监听 count 变化
useEffect(() => {
console.log(count)
}, [count])
return (
<>
Count: {count}
<button onClick={add}>add</button>
<button onClick={preAdd}>preAdd</button>
</>
);
}
咱们首先快速点击 add 按钮三次，三秒后 count 变为 1；而后快速点击 preAdd 三下，三秒后依次出现了 二、三、4。测试结果以下：闭包
为何setCount(count + 1)好像只执行了一次呢，由于每次更新都是独立的闭包，当点击更新状态的时候，函数组件都会从新被调用。 快速点击时，当前 count 为 0，即每次点击传入的值都是相同的，那么获得的结果也是相同的，最后 count 变为 1 后再也不变化。
为何setCount(count => count + 1)好像能执行三次呢，由于当传入一个函数时，回调函数将接收当前的 state，并返回一个更新后的值。 三秒后，第一次setCount获取到最新的 count 为 1，而后执行函数将 count 变为 2，接着第二次获取到当前 count 为 2，执行函数将 count 变为了 3。每次获取到的最新 count 不同，最后结果天然也不一样。
那么进行第二次实验，我先快速点击 preAdd 三下，而后接着快速点击 add 按钮三次，三秒后结果会怎么样呢。根据以上结论猜想，preAdd 是根据最新值，因此 count 依次变为 一、二、3，而后 add 是传入的当前 count 为 0，最后变为 1。最后结果应该是 一、二、三、1，测试结果正确：
useReducer
const [state, dispatch] = useReducer(reducer, initialState, initialFunc);
useReducer 能够接受三个参数，第一个参数接收一个形如(state, action) => newState 的 reducer 纯函数，使用时能够经过dispatch(action)来修改相关逻辑。
第二个参数是 state 的初始值，它返回当前 state 以及发送 action 的 dispatch 函数。
你能够选择惰性地建立初始 state，为此，须要将 init 函数做为 useReducer 的第三个参数传入，这样初始 state 将被设置为 init(initialArg)。
对比 useState 的优点
useReducer 是 React 提供的一个高级 Hook，它不像 useEffect、useState 等 hook 同样必须，那么使用它有什么好处呢？若是使用 useReducer 改写一下计数器例子:
//官方示例
function countReducer(state, action) {
switch (action.type) {
case 'add':
return state + 1;
case 'minus':
return state - 1;
default:
return state;
}
}
function initFunc(initialCount) {
return initialCount + 1;
}
function Counter({initialCount = 0}) {
const [count, dispatch] = useReducer(countReducer, initialCount, initFunc);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => { dispatch({ type: 'add' }); }} >
点击+1
</button>
<button onClick={() => { dispatch({ type: 'minus' }); }} >
点击-1
</button>
</div>
);
}
对比 useState 可知，看起来咱们的代码好像变得复杂了，但实际应用到复杂的项目环境中，将状态管理和代码逻辑放到一块儿管理，使咱们的代码具备更好的可读性、可维护性和可预测性。
useEffect
useEffect(create, deps);
useEffect()用来引入具备反作用的操做，最多见的就是向服务器请求数据。该 Hook 接收一个函数，该函数会在组件渲染到屏幕以后才执行。
和 react 类的生命周期相比，useEffect Hook 能够当作 componentDidMount，componentDidUpdate 和 componentWillUnmount 的组合。默认状况下，react 首次渲染和以后的每次渲染都会调用一遍传给 useEffect 的函数。
useEffect 的性能问题
由于 React 首次渲染和以后的每次渲染都会调用一遍传给 useEffect 的函数，因此大多数状况下颇有可能会产生性能问题。
为了解决这个问题，能够将数组做为可选的第二个参数传递给 useEffect。数组中可选择性写 state 中的数据，表明只有当数组中的 state 发生变化是才执行函数内的语句，以此能够使用多个useEffect分离函数关注点。若是是个空数组，表明只执行一次，相似于 componentDidUpdata。
解绑反作用
在 React 类中，常常会须要在组件卸载时作一些事情，例如移除监听事件等。在 class 组件中，咱们能够在 componentWillUnmount 这个生命周期中作这些事情，而在 hooks 中，咱们能够经过 useEffect 第一个函数中 return 一个函数来实现相同效果。如下是一个简单的清除定时器例子：
function Counter() {
const [count, setCount] = useState(0);
useEffect(() => {
const timer = setInterval(() => {
setCount(count => count + 1);
}, 1000);
return () => clearInterval(timer);
}, []);
return (
<>
Count: {count}
</>
);
}
useLayoutEffect
useLayoutEffect(create, deps);
它和 useEffect 的结构相同，区别只是调用时机不一样。
-
useEffect 在渲染时是异步执行，要等到浏览器将全部变化渲染到屏幕后才会被执行。 -
useLayoutEffect 会在 浏览器 layout 以后，painting 以前执行， -
可使用 useLayoutEffect 来读取 DOM 布局并同步触发重渲染 -
尽量使用标准的 useEffect 以免阻塞视图更新
useEffect 和 useLayoutEffect 的差异
为了更清晰的对比 useEffect 和 useLayoutEffect，咱们写个 demo 来看看两种 hook 的效果：
function Counter() {
function delay(ms){
const startTime = new Date().getTime();
while (new Date().getTime() < startTime + ms);
}
const [count, setCount] = useState(0);
// useLayoutEffect(() => {
// console.log('useLayoutEffect:', count)
// return () => console.log('useLayoutEffectDestory:', count)
// }, [count]);
useEffect(() => {
console.log('useEffect:', count)
// 延长一秒看效果
if(count === 5) {
delay(1000)
setCount(count => count + 1)
}
return () => console.log('useEffectDestory:', count)
}, [count]);
return (
<>
Count: {count}
<button onClick={() => setCount(5)}>set</button>
</>
);
}
首先咱们先看看 useEffect 的执行效果：
useEffect 和 useEffectDestroy 的执行顺序也很好理解，先执行了 useEffectDestroy 销毁了 0，而后在 useEffect 修改 count 为 5，这时，count 可见已经变成了 5，而后销毁 5，设置 count 为 6，而后渲染 6。
整个渲染过程能够很明显的看到 count 0->5->6 的过程，若是在实际项目中，这种状况会出现闪屏效果，很影响用户体验。由于useEffect 在渲染时是异步执行，而且要等到浏览器将全部变化渲染到屏幕后才会被执行，因此，咱们尽可能不要在 useEffect 里面进行 DOM 操做。
再将 setCount 操做放到 useLayoutEffect 里的执行看看效果：
useLayoutEffect 和 useLayoutEffectDestroy 的执行顺序和 useEffect 同样，都是在下一次操做以前先销毁，可是整个渲染过程和 useEffect 明显不同。虽然在打印的 useLayoutEffect 中有明显停顿，但在渲染过程只能看到 count 0->6 的过程，这是由于 useLayoutEffect 的同步特性，会在浏览器渲染以前同步更新 DOM 数据，哪怕是屡次的操做，也会在渲染前一次性处理完，再交给浏览器绘制。这样不会致使闪屏现象发生，可是会阻塞视图的更新。。
最后，咱们同时看看两个 setCout 分别在两个 hook 的执行时机;
在 useEffect 执行效果：
在 useLayoutEffect 执行效果：
咱们能够发现不管在哪儿执行 setCount，hooks 的前后顺序都不变，始终是先 useLayoutEffect 销毁，而后 useLayoutEffect 执行，再而后才是 useEffect 销毁，useEffect 执行。可是页面渲染的不一样和打印时的明显卡顿，咱们知道 hooks 的执行时机应该是useLayoutEffectDestory -> useLayoutEffect -> 渲染 -> useEffectDestory -> useEffect。
useMemo
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
把“建立”函数和依赖项数组做为参数传入 useMemo，它仅会在某个依赖项改变时才从新计算 memoized 值。这种优化有助于避免在每次渲染时都进行高开销的计算。
useMemo 和 useEffect 的区别
useMemo 看起来和 useEffect 很像，可是若是你想在 useMemo 里面 setCount 或者其余修改了 DOM 的操做，那你可能会遇到一些问题。由于传入 useMemo 的函数会在渲染期间执行，你可能看不到想要的效果，因此请不要在这个函数内部执行与渲染无关的操做。
useMemo 还返回一个 memoized 值，以后仅会在某个依赖项改变时才从新计算 memoized 值。这种优化有助于避免在每次渲染时都进行高开销的计算，具体应用看如下例子：
function Counter() {
const [count, setCount] = useState(1);
const [val, setValue] = useState('');
const getNum = () => {
console.log('compute');
let sum = 0;
for (let i = 0; i < count * 100; i++) {
sum += i;
}
return sum;
}
const memoNum = useMemo(() => getNum(), [count])
return <div>
<h4>总和：{getNum()} {memoNum}</h4>
<div>
<button onClick={() => setCount(count + 1)}>+1</button>
<input value={val} onChange={event => setValue(event.target.value)}/>
</div>
</div>;
}
useMemo 效果：
正常状况下，当你在 input 框输入时，由于修改了 val，因此页面会从新渲染，那么就须要从新计算 getNum，但使用 useMemo 后，由于依赖的 count 没变，则 memoNum 不会从新计算。
useCallback
const memoizedCallback = useCallback(
() => {
doSomething(a, b);
},
[a, b],
);
返回一个 memoized 回调函数。
把内联回调函数及依赖项数组做为参数传入 useCallback，它将返回该回调函数的 memoized 版本，该回调函数仅在某个依赖项改变时才会更新。当你把回调函数传递给通过优化的并使用引用相等性去避免非必要渲染（例如 shouldComponentUpdate）的子组件时，它将很是有用。
useCallback(fn, deps)至关于useMemo(() => fn, deps)。
useRef
const refContainer = useRef(initialValue);
-
类组件、React 元素用 React.createRef，函数组件使用 useRef -
useRef 返回一个可变的 ref 对象，其 current 属性被初始化为传入的参数（initialValue -
useRef 返回的 ref 对象在组件的整个生命周期内保持不变，也就是说每次从新渲染函数组件时，返回的 ref 对象都是同一个（使用 React.createRef ，每次从新渲染组件都会从新建立 ref）
// 官网例子
function TextInputWithFocusButton() {
const inputEl = useRef(null);
const onButtonClick = () => {
// `current` 指向已挂载到 DOM 上的文本输入元素
inputEl.current.focus();
};
return (
<>
<input ref={inputEl} type="text" />
<button onClick={onButtonClick}>Focus the input</button>
</>
);
}
useImperativeHandle
useImperativeHandle(ref, createHandle, [deps])
useImperativeHandle 可让你在使用 ref 时自定义暴露给父组件的实例值。
以下，渲染 <FancyInput ref={inputRef} /> 的父组件能够调用 inputRef.current.focus()：
// 官网例子
function FancyInput(props, ref) {
const inputRef = useRef();
useImperativeHandle(ref, () => ({
focus: () => {
inputRef.current.focus();
}
}));
return <input ref={inputRef} ... />;
}
FancyInput = forwardRef(FancyInput);
useContext
在 hooks 中，组件都是函数，因此咱们能够经过参数的方式进行传值，可是有时候咱们也会遇到兄弟组件和爷孙组件之间的传值，这时候经过函数参数传值就不太方便了。hooks 提供了 useContext（共享状态钩子）来解决这个问题。
useContext 接受一个 context 对象（从 React.createContext 返回的值）并返回当前 context 值，由最近 context 提供程序给 context 。
当组件上层最近的 <Context.Provider> 更新时，该 Hook 会触发重渲染，并使用最新传递给 Context provider 的 context value 值。
在 hooks 中使用 content，须要使用 createContext，useContext：
// context.js 新建一个context
import { createContext } from 'react';
const AppContext = React.createContext({});
// HooksContext.jsx 父组件，提供context
import React, { useState } from 'react';
import AppContext from './context';
function HooksContext() {
const [count, setCnt] = useState(0);
const [age, setAge] = useState(16);
return (
<div>
<p>年龄{age}</p>
<p>你点击了{count}次</p>
<AppContext.Provider value={{ count, age }}>
<div className="App">
<Navbar />
<Messages />
</div>
</AppContext.Provider>
</div>
);
}
// 子组件，使用context
import React, { useContext } from 'react';
import AppContext from './context';
const Navbar = () => {
const { count, age } = useContext(AppContext);
return (
<div className="navbar">
<p>使用context</p>
<p>年龄{age}</p>
<p>点击了{count}次</p>
</div>
);
}
构建自定义 Hook
当咱们想要在两个 JavaScript 函数之间共享逻辑时，咱们会将共享逻辑提取到第三个函数。组件和 Hook 都是函数，因此经过这种办法能够调用其余 Hook。
例如，咱们能够把判断朋友是否在线的功能抽出来，新建一个 useFriendStatus 的 hook 专门用来判断某个 id 是否在线：
// 官网例子
import { useState, useEffect } from 'react';
function useFriendStatus(friendID) {
const [isOnline, setIsOnline] = useState(null);
function handleStatusChange(status) {
setIsOnline(status.isOnline);
}
useEffect(() => {
ChatAPI.subscribeToFriendStatus(friendID, handleStatusChange);
return () => {
ChatAPI.unsubscribeFromFriendStatus(friendID, handleStatusChange);
};
});
return isOnline;
}
这时候咱们就能够在须要 FriendStatus 组件的地方随心所欲、随心所欲：
function FriendStatus(props) {
const isOnline = useFriendStatus(props.friend.id);
if (isOnline === null) {
return 'Loading...';
}
return isOnline ? 'Online' : 'Offline';
}
function FriendListItem(props) {
const isOnline = useFriendStatus(props.friend.id);
return (
<li style={{ color: isOnline ? 'green' : 'black' }}>
{props.friend.name}
</li>
);
}
简单总结
| hook | 功能 |
|---|---|
| useState | 设置和改变 state，代替原来的 state 和 setState |
| useReducer | 代替原来 redux 里的 reducer，方便管理状态逻辑 |
| useEffect | 引入具备反作用的操做，类比原来的生命周期 |
| useLayoutEffect | 与 useEffect 做用相同，但它会同步调用 effect |
| useMemo | 可根据状态变化控制方法执行，优化无用渲染，提升性能 |
| useCallback | 相似 useMemo，useMemo 优化传值，usecallback 优化传入的方法 |
| useContext | 上下文爷孙组件及更深层组件传值 |
| useRef | 返回一个可变的 ref 对象 |
| useImperativeHandle | 可让你在使用 ref 时自定义暴露给父组件的实例值 |
参考文章
React Hooks
React Hooks 入门教程 - 阮一峰
React Hooks 详解 【近 1W 字】+ 项目实战
● JavaScript 测试系列实战（四）：掌握 React Hooks 测试技巧
·END·
汇聚精彩的免费实战教程
喜欢本文，点个“在看”告诉我
本文分享自微信公众号 - 图雀社区（tuture-dev）。
若有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一块儿分享。