React Hook

Posted 2021-09-04 zwen7652

一、类组件的不足

React 的核心是组件。v16.8 版本之前，组件的标准写法是类（class）。下面是一个简单的组件类。

import React, { Component } from "react";

export default class Button extends Component {
  constructor() {
    super();
    this.state = { buttonText: "点我" };
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    this.setState(() => {
      return { buttonText: "谢谢配合" };
    });
  }
  render() {
    const { buttonText } = this.state;
    return <button onClick={this.handleClick}>{buttonText}</button>;
  }
}

点击查看运行效果

这个组件类仅仅是一个按钮，但可以看到，它的代码已经很"重"了。真实的 React App 由多个类按照层级，一层层构成，复杂度成倍增长。

Redux 的作者 Dan Abramov 总结了组件类的几个缺点。

• 大型组件很难拆分和重构，也很难测试。
• 业务逻辑分散在组件的各个方法之中，导致重复逻辑或关联逻辑。
• 组件类引入了复杂的编程模式，比如 render props 和高阶组件。

二、Hook 的含义

Hook 这个单词的意思是"钩子"。

React Hooks 的意思是，组件尽量写成纯函数，如果需要外部功能和副作用，就用钩子把外部代码"钩"进来。 React Hooks 就是那些钩子。

你需要什么功能，就使用什么钩子。React 默认提供了一些常用钩子，也可以封装自己的钩子。

所有的钩子都是为函数引入外部功能，所以 React 约定，钩子一律使用use前缀命名，便于识别。你要使用 xxx 功能，钩子就命名为 usexxx。

三、useState()：状态钩子

useState()用于为函数组件引入状态（state）。纯函数不能有状态，所以把状态放在钩子里面。

本文前面那个组件类，用户点击按钮，会导致按钮的文字改变，文字取决于用户是否点击，这就是状态。使用useState()重写如下。

import React, { useState } from "react";

export default function  Button()  {
  const  [buttonText, setButtonText] =  useState("点我");

  function handleClick()  {
    return setButtonText("谢谢配合");
  }

  return  <button  onClick={handleClick}>{buttonText}</button>;
}

函数式更新

• 如果新的 state 需要通过使用先前的 state 计算得出，那么可以将回调函数当做参数传递给 setState。该回调函数将接收先前的 state，并返回一个更新后的值。

  function Counter(){
    let [number,setNumber] = useState(0);
    const handleLazyClick = () => {
        setTimeout(() => {
            // setNumber(number+1);
            // 这样每次执行时都会去获取一遍 state，而不是使用点击触发时的那个 state
            setNumber(number=>number+1);
        }, 3000);
    }
    return (
        <>
           <p>{number}</p>
           <button onClick={()=>setNumber(number+1)}>+</button>
           <button onClick={handleLazyClick}>lazy</button>
        </>
    )
  }

  惰性初始化 state

• initialState 参数只会在组件的初始化渲染中起作用，后续渲染时会被忽略

• 如果初始 state 需要通过复杂计算获得，则可以传入一个函数，在函数中计算并返回初始的 state，此函数只在初始渲染时被调用

  function Counter(props){
    console.log(\'Counter render\');
    // 这个函数只在初始渲染时执行一次，后续更新状态重新渲染组件时，该函数就不会再被调用
    const getInitState = () => {
        console.log(\'getInitState\')
        return {number:props.number || 1};
    }
    const [counter,setCounter] = useState(getInitState);
    return (
        <>
           <p>{counter.number}</p>
           <button onClick={()=>setCounter({number:counter.number+1})}>+</button>
           <button onClick={()=>setCounter(counter)}>setCounter</button>
        </>
    )
  }

  四、useCallback & useMemo

• useCallback：接收一个内联回调函数参数和一个依赖项数组（子组件依赖父组件的状态，即子组件会使用到父组件的值） ，useCallback 会返回该回调函数的 memoized 版本，该回调函数仅在某个依赖项改变时才会更新

• useMemo：把创建函数和依赖项数组作为参数传入 useMemo，它仅会在某个依赖项改变时才重新计算 memoized 值。这种优化有助于避免在每次渲染时都进行高开销的计算

  import React, { useState, memo, useMemo, useCallback } from "react";
  
  function SubCounter({ onClick, data }) {
  console.log("SubCounter render");
  return <button onClick={onClick}>{data.number}</button>;
  }
  SubCounter = memo(SubCounter);
  
  let oldData, oldAddClick;
  export default function Counter() {
  console.log("Counter render");
  const [name, setName] = useState("计数器");
  const [number, setNumber] = useState(0);
  // 父组件更新时，这里的变量和函数每次都会重新创建，那么子组件接受到的属性每次都会认为是新的
  // 所以子组件也会随之更新，这时候可以用到 useMemo
  // 有没有后面的依赖项数组很重要，否则还是会重新渲染
  // 如果后面的依赖项数组没有值的话，即使父组件的 number 值改变了，子组件也不会去更新
  //const data = useMemo(()=>({number}),[]);
  const data = useMemo(() => ({ number }), [number]);
  console.log("data===oldData ", data === oldData);
  oldData = data;
  
  // 有没有后面的依赖项数组很重要，否则还是会重新渲染
  const addClick = useCallback(() => {
    setNumber(number + 1);
  }, [number]);
  console.log("addClick===oldAddClick ", addClick === oldAddClick);
  oldAddClick = addClick;
  return (
    <>
      <input
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
      <SubCounter data={data} onClick={addClick} />
    </>
  );
  }

  点击查看运行效果

  避免滥用 useMemo

  使用 useMemo 当 deps 不变时，直接返回上一次计算的结果，从而使子组件跳过渲染。
  但是当返回的是原始数据类型（如字符串、数字、布尔值）。即使参与了计算，只要 deps 依赖的内容不变，返回结果也很可能是不变的。此时就需要权衡这个计算的时间成本和 useMemo 额外带来的空间成本（缓存上一次的结果）了。

此外，如果 deps 频繁变动，我们也要思考，使用 useMemo 是否有必要。因为 useMemo 占用了额外的空间，还需要在每次 render 时检查 deps 是否变动，反而比不使用 useMemo 开销更大。

五、useEffect

• effect（副作用）：指那些没有发生在数据向视图转换过程中的逻辑，如 ajax 请求、访问原生dom 元素、本地持久化缓存、绑定/解绑事件、添加订阅、设置定时器、记录日志等。
• 副作用操作可以分两类：需要清除的和不需要清除的。

• useEffect 接收一个函数，该函数会在组件渲染到屏幕之后才执行，该函数有要求：要么返回一个能清除副作用的函数，要么就不返回任何内容

  function Counter() {
    const [count, setCount] = useState(0);
  
    useEffect(() => {
        const id = setInterval(() => {
            console.log(count);
        }, 1000);
        return () => clearInterval(id);
    }, []);
    
    // 使用多个 Effect 实现关注点分离
    useEffect(() => {
        fetch(\'http://example.com/api\')
    }, []);
    // someing code
  }

  六、useRef & useImperativeHandle

  1. useRef

• useRef 返回一个可变的 ref 对象，其 current 属性被初始化为传入的参数（initialValue）

• useRef 返回的 ref 对象在组件的整个生命周期内保持不变，也就是说每次重新渲染函数组件时，返回的ref 对象都是同一个

  import React, { useState, useRef } from "react";
  
  let input;
  function Child() {
  const inputRef = useRef();
  console.log("input===inputRef", input === inputRef);
  input = inputRef;
  const handleFocus = () => {
    inputRef.current.focus();
  };
  return (
    <>
      <input type="text" ref={inputRef} />
      <button onClick={handleFocus}>获得焦点</button>
    </>
  );
  }
  
  export default function Parent() {
  let [number, setNumber] = useState(0);
  return (
    <>
      <Child />
      <button onClick={() => setNumber({ number: number + 1 })}>+</button>
    </>
  );
  }

  点击查看运行效果

  2. forwardRef

• 因为函数组件没有实例，所以函数组件无法像类组件一样可以接收 ref 属性

  function Parent() {
    return (
        <>
         // <Child ref={xxx} /> // 这样是不行的
            <Child />
            <button>+</button>
        </>
    )
  }

• forwardRef 可以在父组件中操作子组件的 ref 对象
• forwardRef 可以将父组件中的 ref 对象转发到子组件中的 dom 元素上

• 子组件接受 props 和 ref 作为参数

  import React, { useState, useRef } from "react";
  
  function Child(props, ref) {
  return <input type="text" ref={ref} />;
  }
  Child = React.forwardRef(Child);
  
  export default function Parent() {
  let [number, setNumber] = useState(0);
  const inputRef = useRef(); //{current:\'\'}
  const handleFocus = () => {
    inputRef.current.value = "focus";
    inputRef.current.focus();
  };
  return (
    <>
      <Child ref={inputRef} />
      <button onClick={() => setNumber({ number: number + 1 })}>+</button>
      <button onClick={handleFocus}>获得焦点</button>
    </>
  );
  }

  点击查看运行效果

  3. useImperativeHandle

• useImperativeHandle 可以在使用 ref 时，自定义暴露给父组件的实例值，不能让父组件想干嘛就干嘛
• 在大多数情况下，应当避免使用 ref 这样的命令式代码。useImperativeHandle 应当与 forwardRef 一起使用

• 父组件可以使用操作子组件中的多个 ref

  import React, { useRef, forwardRef, useImperativeHandle } from "react";
  
  function Child(props, parentRef) {
  // 子组件内部自己创建 ref
  let focusRef = useRef();
  let inputRef = useRef();
  useImperativeHandle(parentRef, () => {
    // 这个函数会返回一个对象
    // 该对象会作为父组件 current 属性的值
    // 通过这种方式，父组件可以使用操作子组件中的多个 ref
    return {
      name: "Child",
      focus() {
        focusRef.current.focus();
      },
      changeText(text) {
        inputRef.current.value = text;
      }
    };
  });
  return (
    <>
      <input ref={focusRef} />
      <input ref={inputRef} />
    </>
  );
  }
  Child = forwardRef(Child);
  
  export default function Parent() {
  const parentRef = useRef();
  const handleFocus = () => {
    parentRef.current.focus();
    parentRef.current.changeText("aaa");
    console.log(parentRef.current.name);
  };
  return (
    <>
      <Child ref={parentRef} />
      <button onClick={handleFocus}>获得焦点</button>
    </>
  );
  }

  点击查看运行效果

  七、useContext()

• 接收一个 context 对象（React.createContext 的返回值）并返回该 context 的当前值当前的 context 值由上层组件中距离当前组件最近的 <MyContext.Provider> 的 value prop 决定
• 当组件上层最近的 <MyContext.Provider> 更新时，该 Hook 会触发重渲染，并使用最新传递给MyContext provider 的 context value 值

• useContext(MyContext) 只是让你能够读取 context 的值以及订阅 context 的变化。仍然需要在上层组件树中使用 <MyContext.Provider> 来为下层组件提供 context

  import React, { createContext, useContext, useState } from "react";
  
  const CounterContext = createContext();
  // 第一种获取 CounterContext 方法：不使用 hook
  function SubCounter_one() {
  return (
    <CounterContext.Consumer>
      {(value) => (
        <>
          <button onClick={() => value.add()}>+</button>
        </>
      )}
    </CounterContext.Consumer>
  );
  }
  // 第二种获取 CounterContext 方法：使用 hook ，更简洁
  function SubCounter() {
  const { add } = useContext(CounterContext);
  return (
    <>
      组件1操作数据：
      <button onClick={() => add()}>+</button>
    </>
  );
  }
  
  function SubCounter2() {
  const { count } = useContext(CounterContext);
  return (
    <div>
      组件2显示数据：
      <span>{count}</span>
    </div>
  );
  }
  
  export default function Counter() {
  const [count, setCount] = useState(0);
  return (
    <CounterContext.Provider
      value={{ count, add: () => setCount((prev) => prev + 1) }}
    >
      <SubCounter />
      <SubCounter2 />
    </CounterContext.Provider>
  );
  }

  点击查看运行效果