React Hook的最全总结（附demo）

时间 2020-07-07

标签 react hook 总结 demo 栏目 React 繁體版

原文原文链接

（阅读指南：建议将每一个小demo都手动执行一遍，保证你会不枉此行。）javascript

Hook是React 16.8（包括react-dom 16.8）新增的特性，它可让你在不编写class的状况下使用state及其它的React特性，Hook是一个特殊的函数。html

React-router 从V5.1开始存在Hook方法并支持hook。java

React Redux 从 v7.1.0 开始支持 Hook API 并暴露了 useDispatch 和 useSelector 等 hook。react

接下来详细的说说各个API，并给出demo，以为不错那就点个👍鼓励一下。git

我的强烈建议：眼过千遍，不如手过一遍。github

1、Hook API各个击破

1，useState

useState用来初始化state参数redux

import React from 'react';

function Example(){
    // 声明一个count的state变量
    const [count, setCount] = useState(0);
    return (
        <div> <p>点击{count}次</p> <button onClick={() => setCount(count + 1)}>点击</button> </div>
    )
}复制代码

useState功能：

读取state：在class中即为this.state.count，在这里直接为count；
更新state：在class中，经过this.setState()来更新count值，在这里使用setCount；

方括号的做用：采用结构赋值，同时建立了两个变量count和setCount，等价于以下：

var demoData = useState(0);
var count = demoData[0];     // 第一个值为当前的state
var setCount = demoDate[1];  // 第二个值为更新state的函数复制代码

二、useEffect

useEffect在函数组件中执行反作用(钩子函数)的操做api

语法：useEffect(() => {}, [])数组

接收两个参数，第一个函数，第二个为数组；性能优化

import React, { useState, useEffect } from 'React';

function Example(){
    const [count, setCount] = useState(0);
    
    const btnClick = () => {
        setCount(count + 1);
    }

    useEffect(() => {
        console.log('执行了useEffect');
        document.title = `点击了{count}次`
    })

    return (
    <div> <p>点击{count}次</p> <button onClick={() => { btnClick()}}>点击</button> </div>
    )
}复制代码

提示：熟悉React Class的生命周期函数，能够把useEffect Hook看作是componentDidMount，componentDidUpdate和componentWillUnmount这三个函数的组合。

useEffect在每次渲染页面后都执行。默认状况下，它在第一次渲染以后和每次更新以后都会执行；同一个函数组件中能够同时出现多个useEffect，React将按照useEffect声明的顺序依次调用组件中的每个effect。

无需清除的effect

class的写法，即不须要在componentWillUnmount中执行操做

componentDidMount(){
    document.title = `点击了{count}次`;
}
componentDidUpdate(){
    document.title = `点击了{count}次`;
}复制代码

hook的写法

useEffect(() => {
    document.title = `点击了{count}次`;
})复制代码

须要清除的effect

即就是须要在componentWillUnmount中清除掉，例如咱们使用setInterval来更新当前时间。代码以下

class FriendStatus extends React.Component{
    constructor(props){
        super(props);
        this.state = { nowTime: null};
        this.timer = null;
    }
    componentDidMount(){
        this.timer = setInterval(() => {
            this.setState({
                nowTime: new Date()
            })
        }, 1000)
    } 
    componentWillUnmount(){
        if (this.timer !== null) {
            clearInterval(timer);
        }
    }
    render(){
        let time = this.state.nowTime;
        return（
           <div>{time.toString()}</div>
        ）
    }
}复制代码

使用hook，以下：

import React, { useState, useEffect } from 'react';

function FriendStatus(props) {
  const [nowTime, setNowTime] = useState(new Date());

  useEffect(() => {    
    let timer = setInterval(() => {
        setNowTime(new Date())
    }, 1000)
    return () => {   // 返回一个清理函数
      clearInterval(timer);
    };
  }, []);
  return(<div>{nowTime.toString()}</div>)
}复制代码

经过跳过Effect来进行性能优化

咱们知道每次渲染后都执行清理或者执行effect会致使性能问题，在class中咱们在componentDidUpdate中添加prevProps和prevState的比较逻辑来解决；

componentDidUpdate(prevProps, prevState){
    if(this.state.count !== prevState.count){
        document.title = `点击了{this.state.count}次`
    }
}复制代码

在hook中使用effect

useEffect(() => {
    console.log('执行了--useEffect')
    document.title = `点击了{count}次`;
}, [count]); // 在初次渲染和count发生变化时更新复制代码

若是第二数组参数为[]，则Effect会在初次渲染执行一次及包含清除函数Effect再执行一次（可将上述代码中的[count]替换为[]测试）；下面分别给出两种状况的执行代码：

// 带清除函数即为useEffect的第一个参数(函数)中再返回一个函数
// 不带清除函数+第二个参数为[];
// --> 整个生命周期只执行一次，至关于componentDidMount;
useEffect(() => {
    console.log('执行了--useEffect');
    document.title = `点击了${count}次`;
}, []);

// 带清除函数+第二个参数为[];
// --> 整个生命周期中执行了两次，至关于componentDidMount和componentWillUnmount;
useEffect(() => {
    console.log('执行了--useEffect');
    document.title = `点击了${count}次`; 
    return () => {  // 至关于componentWillUnmount；
        console.log('执行了--清除函数');
        document.title = "";   
    }
}, [])复制代码

若是不加第二个数组参数，则Effect除了会在初次渲染执行一次外，还会在每次更新都执行。

3，useContext

接收一个由React.createContext()建立的context对象(此处定义为Mycontext)，并返回这个context属性vaule绑定的值；经过useContext获取到最近的<Mycontext.Provider value="">的props传递的value值；以下用法所示：

// Mycontext为React.createContext的返回值
const Mycontext = React.createContext();
<Mycontext.provider value={}> ... </Mycontext.provider> -------------------------- const value = useContext(Mycontext);复制代码

调用了useContext的组件总会在context值变化时从新渲染。

完整的demo以下：

import React, { useContext } from 'react';
const themes = {
  light: {
    color: '#ddd',
    background: 'yellow'
  },
  dark: {
    color: '#fff',
    background: '#333'
  }
}

const ThemeContext = React.createContext();

function TestContext(){
  return (
    <ThemeContext.Provider value={themes.dark}> <Father></Father> </ThemeContext.Provider> ) } function Child(){ const theme = useContext(ThemeContext); return ( <div style={{color: theme.color, backgroundColor: theme.background}}>测试一下useContext</div> ) } function Father(){ return ( <div> <Child/> </div> ) } export default TestContext;复制代码

4，useReducer

语法：

const [state, dispatch] = useReducer(reducer, initalArg, init);复制代码

是useState的替代方案。在某些场景下，useReducer会比useState更适用。(熟悉Redux，就知道它怎么工做啦)

完整demo:

import React, { useReducer } from 'react';
const init = {
 count: 0
};

function reducer(state, action){
  switch(action.type){
    case 'add': 
     return {count: state.count + 1};
    case 'minus':
      return {count: state.count - 1};
    default: throw new Error();
  }
}

function TestReducer(){
  const [state, dispatch] = useReducer(reducer, init);
  return (
    <div> count: {state.count} <ul> <li><button onClick={() => dispatch({type: 'add'})}>+</button></li> <li><button onClick={() => dispatch({type: 'minus'})}>-</button></li> </ul> </div>
  )
}

export default TestReducer;复制代码

5，useRef

语法：

const refObj = useRef(initVal); 复制代码

useRef 返回一个可变的 ref 对象，其 .current 属性被初始化为传入的参数（initValue）。返回的 ref 对象在组件的整个生命周期内保持不变；

完整demo：

import  React, { useRef } from 'react';
export default function TestUseRef(){
    // const InputEl = React.createRef(null);
    const InputEl = useRef(null);
    const getInputFocus = () => {
        InputEl.current.placeholder = "输入中";
        InputEl.current.focus();
    }
    return (
        <div> <input ref={InputEl} type="text" placeholder="请输入"/> <button onClick={() => getInputFocus()}>测试useRef</button> </div> ) }复制代码

测试发现跟React.createRef()功能相同。

6，useCallback

语法：返回一个回调函数；

const memoizedCallback = useCallback(() => {
    doSomething(a, b);
}, [a, b])复制代码

useCallback(fn, deps) 至关于useMemo(() => fn, deps)，该回调函数仅在某个依赖项发生改变时才会更新。

完整demo：

import React, { useState, useCallback, useEffect } from 'react';
function TestUseCallback(){
  const [ count, setCount ] = useState(0);
  const [ inputVal, setInputVal ] = useState('');
  const backCount = useCallback(() => {
    return count;
  }, [count]);
  return (
    <div>
      <button onClick={() => {setCount(count + 1)}}>Click me--点击{count}次</button>
      <input value={inputVal} onChange={(e) => setInputVal(e.target.value)} />
      <hr/>
      <Child count={count} callback={backCount}/>
    </div>
  )
}

function Child(props){
  const {count, callback} = props;
  const [mycount, setMycount] = useState(() => callback());
  useEffect(() => {
    setMycount(callback());
  }, [callback]);

  return (
    <div>
      <h3>child组件</h3>
      <p>myCount---{mycount}</p>
    </div>
  )
}

export default TestUseCallback;复制代码

7，useMemo

useMemo接收一个自定义的函数和数组参数，仅在某个数组参数发生改变时才返回值并触发render，这种优化有助于避免在每次渲染时都进行高开销的计算；

语法：返回一个值；

const memoizedValue = useMemo(() => computedExpensiveValue(a, b),[a,b])复制代码

不使用useMemo的完整demo：

import React, { useState, useMemo } from 'react';

function TestUseMemo(){
  const [count, setCount] = useState(0);
  const [value, setValue] = useState('');
  const AddSum = () => {
    console.log('addSum');
    let sum = 0;
    for(let i = 0; i < count*1000; i++){
      sum += i;
    } 
   return sum;
  }
  return (
    <div> <p>点击了{count}次</p> <p>计算求和所得{AddSum()}</p> <button onClick={() => {setCount(count + 1)}}>Click me</button> <input value={value} onChange={event => setValue(event.target.value)}/> </div> ) } export default TestUseMemo;复制代码

发现不管是修改count，仍是修改value，都会触发AddSum()函数进行计算；

使用useMemo的完整demo：

import React, { useState, useMemo } from 'react';

function TestUseMemo(){
  const [count, setCount] = useState(0);
  const [value, setValue] = useState('');
  const AddSum = useMemo(() => {
    console.log('useMemo');
    let sum = count;
    for(let i = 0; i < count*1000; i++){
      sum += i;
    } 
   return sum;
 }, [count]); // 只在count值发生变化时才从新计算值
 return (
    <div> <p>点击了{count}次</p> <p>计算求和所得{AddSum}</p> <button onClick={() => {setCount(count + 1)}}>Click me</button> <input value={value} onChange={event => setValue(event.target.value)}/> </div> ) } export default TestUseMemo;复制代码

经过使用useMemo，咱们发现只有在count值发生变化时才从新执行AddSum进行计算并从新渲染，从而避免了没必要要的性能开销。

8，useLayoutEffect

语法与useEffect同样，可是与useEffect的执行时机不同；

完整demo验证：

import React, { useState, useEffect, useRef, useLayoutEffect } from 'react';

export default function TestuseLayout(){
    const [count, setCount] = useState(0);
    const [text, setText] = useState('');
    const InputRef = useRef(null);
    useEffect(() => {
        console.log(InputRef, 'start useEffect');
        document.title = `${count} times`;
        return () => {
            console.log(InputRef, 'end useEffect');
            document.title = 'remove';
        }
    });
    useLayoutEffect(() => {
        console.log(InputRef, 'start useLayoutEffect');
        document.title = `${count} times`;
        return () => {
            console.log(InputRef, 'end useLayoutEffect');
            document.title = 'Layout remove';
        }
    })
    return (
        <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}>Click me</button> <p> <input ref={InputRef} value={text} onChange={(e) => setText(e.target.value)}/> </p> </div> ) }复制代码

看执行结果以下：

结论：

useLayoutEffect的执行先于useEffect；
第一个函数参数的返回函数执行先于初始函数；

9，useImperativeHandle

useImperativeHandle可让你在使用ref时将自定义的实例值暴露给父组件，应尽可能避免使用ref，useImperativeHandle应当与forwardRef一块儿使用。

语法：

useImperativeHandle(ref, createHandle, [deps]);复制代码

完整demo：

import React, { useImperativeHandle, useRef, forwardRef} from 'react';

function TestuseImper(){
   const childRef = useRef(null);
   const btnFn = () => {
      console.log('childRef=', childRef);
      childRef.current.focus();
  }
  return (
    <div>
      <button onClick={() => {btnFn()}}>获取子组件input的焦点</button>
      <hr/>
      <Child ref = {childRef}/>
    </div>
  )
}

function Child(props, ref){
  const InputRef = useRef();
  useImperativeHandle(ref, () => ({
    focus: () => InputRef.current.focus();
  }))

  return (
    <div>
      <input ref={InputRef}/>
    </div>
  )
}

Child = forwardRef(Child);

export default TestuseImper;复制代码

上述demo执行后，咱们发现父组件能够经过暴露的ref来获取子组件的ref，并进行修改。

10，useDebugValue

语法：

useDebugValue(value)复制代码

完整demo：

import React, { useState, useDebugValue } from 'react';

export default function TestuseLayout(){
    function useMyCount(num) {
        const [ count, setCount ] = useState(0);
        useDebugValue(count > num ? '溢出' : '不足');
        const myCount = () => {
          setCount(count + 2);
        }
        return [ count, myCount ];
    }
    const [count , myCount] = useMyCount(10);
    return (
        <div> <p>You clicked {count} times</p> <button onClick={() => myCount(count + 1)}>Click me</button> </div>
    )
}复制代码

---------------------------------------------------------

3、自定义Hook

自定义Hook可让组件之间复用一些状态逻辑，在class方式下一般采用高阶组件来实现，而自定义Hook可让咱们在不增长组件的状况下达到一样的目的，能够将组件逻辑提取到可重用的函数中；下面提供一个简单的自定义hook完整demo：

import React, { useState } from 'react';

function useChangeCount(init){
  // 自定义hook，名字必须以use开头
  const [count, setCount] = useState(init);
  const plus = () => {
    setCount(count + 1);
  }
  const minus = () => {
    setCount(count - 1);
  };
  const reset = () => {
    setCount(init);
  };
  
  return [count, {plus, minus, reset}];
}

function SelfHook(){
  const [count, setCount] = useChangeCount(0);
  return (
    <div> <p>当前count: {count}</p> <div><button onClick={setCount.plus}>增长</button></div> <div><button onClick={setCount.minus}>减小</button></div> <div><button onClick={setCount.reset}>重置</button></div> </div>
  )
}

export default SelfHook;复制代码

更多自定义Hook可阅读 React-use源码

4、Hook使用规则

只在最顶层使用Hook

不要在循环，条件或嵌套函数中调用Hook；

只在组件函数中调用Hook

调用hook的地方

在函数组件中调用hook
在自定义hook中调用hook

版本升级

注意：要启用Hook，全部React相关的package都必须升级到16.8.0或者更高的版本。不然，Hook将没法运行。

参考资料

官方React-Hook

Hooks FAQ