react hooks

港控/mmm° 2022-12-29 09:17 117阅读 0赞

### 文章目录 ###

*  react-hook
 *   *  1. useState ：状态钩子
     *   *  函数式更新
     *  2. useEffect ：副作用钩子
     *   *  2.1 异步操作
         *  3.1 清理副作用
     *  3. useContext : 共享状态钩子
     *   *  3.1 避免子组件的重复渲染
         *  3.2
     *  4. useReducer：action 钩子
     *  5. useRef
     *   *  5.1 useRef获取DOM元素
         *  5.2 useRef保存普通变量
         *  5.3 跨越渲染周期存储数据
         *  5.4 获取子组件属性
     *  6. useMemo
     *   *  6.1 实现 局部 Pure
         *  6.2 useMemo缓存路由
     *  7.useCallback
     *   *  7.1 传入组件的函数使用React.useCallback
     *  8. react-hook-form

# [react-hook][] #

> Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。在未来甚至可以完全覆盖并替换class的写法。

> 使用hook的主要作用是为了让组件内的逻辑更加清晰，并且可以通过自定义hook来达到复用逻辑。使组件内的逻辑复用性强，且功能清晰明了。

> 注意：hook只能使用在函数组件中，class组件不支持，所有hook默认约定名称用use开头

## 1. useState ：状态钩子 ##

> 函数组件有状态了

当调用 useState 的时候，会返回形如 (变量, 函数) 的一个元祖。并且 state 的初始值就是外部调用 useState 的时候，传入的参数。setState也是异步执行。

const [state, setState] = useState(initialState); 
    //state为变量，setState 修改 state值的方法， setState也是异步执行。

import React, { useState } from "react";
    
    export default function  Button()  {
      const  [count, setCount] =  useState(0);  //ES6数组解构
      return  <button  onClick={()=>setCount(count+1)}>{count}</button>;
    }

当点击按钮的时候，执行setCount，状态 count 被更新，并且 UI 视图更新。显然，useState 返回的用于更改状态的函数，自动调用了render方法来触发视图更新。

### 函数式更新 ###

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

function Counter() {
      const [count, setCount] = useState(0);
      function handleClick() {
        setCount(count + 1)
      }
      
    function handleClickFn() {
        setCount((prevCount) => {
          return prevCount + 1
        })
      }

两种方式的区别

handleClick和handleClickFn一个是通过一个新的 state 值更新，一个是通过函数式更新返回新的 state。

在异步操作中，handleClickFn永远获取最新的值进行修改，handleClick可能丢失更新。

注意：  
使用useState之后，不能马上获取它的值，比如

setCount(0)
    let a = count;  //可能会丢失更新

## 2. useEffect ：副作用钩子 ##

作用：处理函数组件中的副作用，如异步操作、延迟操作等，可以替代Class Component的componentDidMount、componentDidUpdate、componentWillUnmount等生命周期。

import React, {useEffect} from "react";
    
    // 请求菜单数据
        useEffect(() => {
            dispatch(queryAppsAction());
            // eslint-disable-next-line react-hooks/exhaustive-deps
        }, []);

*  useEffect()接受两个参数。第一个参数是一个callback函数。第二个参数是一个数组，用于给出 Effect 的依赖项，只要这个数组发生变化，useEffect()就会执行。第二个参数可以省略，这时每次组件渲染时，就会执行useEffect()。如果为空则执行一次。
 *  与useState传入的是具体state不同，useEffect传入的是一个callback函数，与useState最大的不同是执行时机，useEffect callback是在组件被渲染为真实DOM后执行（所以可以用于DOM操作）

useEffect(() => {
        // 模拟异步请求后端数据
        setTimeout(() => {
          setCount(count + 1);
        }, 1000);
      }, []);

对于 useEffect 的实现，配合下面案例的使用会更容易理解。当然，你也可以在这个 useEffect 中发起异步请求，并在接受数据后，调用 state 的更新函数，不会发生爆栈的情况。

useEffect 第一个回调函数可以返回一个用于销毁副作用的函数，相当于 Class 组件的 unmount 生命周期。

### 2.1 异步操作 ###

我们使用async / await从第三方API获取数据。如果你对async/await熟悉的话，你会知道，每个async函数都会默认返回一个隐式的promise。但是，useEffect不应该返回任何内容。

这就是为什么不能直接在useEffect中使用async函数，因此，我们可以不直接调用async函数，而是像下面这样：

const fetchData = async () => {
          const result = await axios(
            'http://localhost/api/v1/search?query=redux',
          );
    
          setData(result.data);
        };
    
    
    useEffect(() => {
        fetchData();
      }, []);

### 3.1 清理副作用 ###

Hook接受useEffect传入的callback返回一个函数，在Fiber的清理阶段将会执行这个函数，从而达到清理effect的效果：

useEffect(() => {
        const timer = setTimeout(() => {
            console.log('print log after 1s!');
        }, 1000);
        window.addEventListener('load', loadHandle);
    
        return () => window.removeEventListener('load', loadHandle); // 执行清理
      }, []);

## 3. useContext : 共享状态钩子 ##

跨组件共享数据的钩子函数

*  使用React.createContext API创建Context，由于支持在组件外部调用，因此可以实现状态共享
 *  使用Context.Provider API在上层组件挂载状态
 *  使用Context.Consumer API为具体的组件提供状态或者通过contextType属性指定组件对Context的引用

1.调用useContext，传入从React.createContext获取的上下文对象。

useContext 接收一个 context 对象（React.createContext 的返回值）并返回该 context 的当前值。当前的 context 值由上层组件中距离当前组件最近的 <CountContext.Provider> 的 value prop 决定。

当组件上层最近的 <CountContext.Provider> 更新时，该 Hook 会触发重渲染，并使用最新传递给 CountContext provider 的 context value 值。

### 3.1 避免子组件的重复渲染 ###

import React, { useContext, useState } from 'react';
    
    const DemoContext = React.createContext();
    
    const Child = () => {
      console.log('触发Child组件渲染');
      return (
        <h1 style={style}>这是child组件的渲染内容！</h1>
      )
    };
    
    export default () => {
      const [num, setNum] = useState(0);
      return (
        <DemoContext.Provider value={num}>
          <button onClick={() => setNum(num + 1)}>num加1</button>
          <Child />
          {...一些其他需要使用num参数的组件}
        </DemoContext.Provider>
      );
    }

在这里可以使用children方法来避免Child的重复渲染。

import React, { useContext, useState } from 'react';
    
    const DemoContext = React.createContext();
    
    const Child = () => {
      console.log('触发Child组件渲染');
      return (
        <h1 style={style}>这是child组件的渲染内容！</h1>
      )
    };
    
    function DemoComponent(props) {
      const { children } = props;
      const [num, setNum] = useState(0);
      return (
        <DemoContext.Provider value={num}>
          <button onClick={() => setNum(num + 1)}>num加1</button>
          {children}
        </DemoContext.Provider>
      );
    }
    
    export default () => {
      return (
        <DemoComponent>
          <Child />
          {...一些其他需要使用num参数的组件}
        </DemoComponent>
      );
    }

这时候，修改state,只是对于DemoComponent这个组件内部进行render，对于外部传入的Child组件，将不会重复渲染。

### 3.2 ###

1.调用useContext，传入从React.createContext获取的上下文对象。

const ConfirmationServiceContext = React.createContext<
        (options: ConfirmationOptions) => Promise<void>
    >(Promise.reject);
    
    export const useConfirmation = () =>
        React.useContext(ConfirmationServiceContext);

当组件上层最近的 <CountContext.Provider> 更新时，该 Hook 会触发重渲染，并使用最新传递给 CountContext provider 的 context value 值。

调用了 useContext 的组件总会在 context 值变化时重新渲染。如果重渲染组件的开销较大，你可以 通过使用 memoization 来优化。

## 4. useReducer：action 钩子 ##

React 本身不提供状态管理功能，通常需要使用外部库。这方面最常用的库是 Redux。

Redux 的核心概念是，组件发出 action 与状态管理器通信。状态管理器收到 action 以后，使用 Reducer 函数算出新的状态，Reducer 函数的形式是(state, action) => newState。

useReducers()钩子用来引入 Reducer 功能。

const [state, dispatch] = useReducer(reducer, initialState);

上面是useReducer()的基本用法，它接受 Reducer 函数和状态的初始值作为参数，返回一个数组。数组的第一个成员是状态的当前值，第二个成员是发送 action 的dispatch函数。

## 5. useRef ##

链接：https://www.cnblogs.com/crazycode2/p/11783246.html

解释很好的文章：https://www.jianshu.com/p/34b445a15494

useRef 是一个对象，它拥有一个 current 属性，并且不管函数组件执行多少次，而 useRef 返回的对象永远都是原来那一个。

useRef它有两个主要的作用:

*  用useRef获取React JSX中的DOM元素，获取后你就可以控制DOM的任何东西了。
 *  useRef 在渲染周期内永远不会变，因此可以用来引用某些数据。
 *  对 useRef 的赋值或者取值拿到的都是一个 最终 的状态
 *  修改 ref.current 不会引发组件重新渲染。

//通过useRef获取弹出框中的最新的函数
    
       const checkForm = React.useRef<Function>();
       
                    ApiModal({
                        title: "申请",
                        context: <ApiManageApplyDialog getHandleSubmit={(postMyApps: Function) =>
                            checkForm.current = postMyApps
                        }/>,
                        checkFuc: () => subApply(),
                    });

### 5.1 useRef获取DOM元素 ###

界面上有一个文本框，在文本框的旁边有一个按钮，当我们点击按钮时，在控制台打印出input的DOM元素，并进行复制到DOM中的value上。这一切都是通过useRef来实现。

import React, { useRef} from 'react';
    function Example8(){
        const inputEl = useRef(null)
        const onButtonClick=()=>{
            inputEl.current.value="Hello ,JSPang"
            console.log(inputEl) //输出获取到的DOM节点
        }
        return (
            <>
                {/*保存input的ref到inputEl */}
                <input ref={inputEl} type="text"/>
                <button onClick = {onButtonClick}>在input上展示文字</button>
            </>
        )
    }
    export default Example8

当点击按钮时，你可以看到在浏览器中的控制台完整的打印出了DOM的所有东西，并且界面上的框的value值也输出了我们写好的Hello ,JSPang。这一切说明我们可以使用useRef获取DOM元素，并且可以通过useRefu控制DOM的属性和值。

### 5.2 useRef保存普通变量 ###

首先来看一下它传统的用法：

import React, { useState, useEffect, useMemo, useRef } from 'react';
    
    export default function App(props){
      const [count, setCount] = useState(0);
    
      const doubleCount = useMemo(() => {
        return 2 * count;
      }, [count]);
    
      const couterRef = useRef();
    
      useEffect(() => {
        document.title = `The value is ${count}`;
        console.log(couterRef.current);
      }, [count]);
      
      return (
        <>
          <button ref={couterRef} onClick={() => {setCount(count + 1)}}>Count: {count}, double: {doubleCount}</button>
        </>
      );
    }

代码中用useRef创建了couterRef对象，并将其赋给了button的ref属性。这样，通过访问couterRef.current就可以访问到button对应的DOM对象。

然后再来看看它保存数据的用法。

在一个组件中有什么东西可以跨渲染周期，也就是在组件被多次渲染之后依旧不变的属性？第一个想到的应该是state。没错，一个组件的state可以在多次渲染之后依旧不变。但是，state的问题在于一旦修改了它就会造成组件的重新渲染。

### 5.3 跨越渲染周期存储数据 ###

那么这个时候就可以使用useRef来跨越渲染周期存储数据，而且对它修改也不会引起组件渲染。

import React, { useState, useEffect, useMemo, useRef } from 'react';
    
    export default function App(props){
      const [count, setCount] = useState(0);
    
      const doubleCount = useMemo(() => {
        return 2 * count;
      }, [count]);
    
      const timerID = useRef();
      
      useEffect(() => {
        timerID.current = setInterval(()=>{
            setCount(count => count + 1);
        }, 1000); 
      }, []);
      
      useEffect(()=>{
          if(count > 10){
              clearInterval(timerID.current);
          }
      });
      
      return (
        <>
          <button ref={couterRef} onClick={() => {setCount(count + 1)}}>Count: {count}, double: {doubleCount}</button>
        </>
      );
    }

在上面的例子中，我用ref对象的current属性来存储定时器的ID，这样便可以在多次渲染之后依旧保存定时器ID，从而能正常清除定时器。

### 5.4 获取子组件属性 ###

当useRef获取子组件的属性时，保证获取到的值总是最新的

## 6. useMemo ##

useMemo缓存计算结果。它接收两个参数，第一个参数为计算过程(回调函数，必须返回一个结果)，第二个参数是依赖项(数组)，当依赖项中某一个发生变化，结果将会重新计算。

useMemo 计算结果是 return 回来的值, 主要用于 缓存计算结果的值 ，应用场景如： 需要 计算的状态

effect只能在DOM更新后再触发，memo是在DOM更新前触发的

function useMemo<T>(factory: () => T, deps: DependencyList | undefined): T;

### 6.1 实现 局部 Pure ###

在某些场景下，希望 component 的部分不要进行 re-render

import React, { useMemo } from 'react';
    
    export default (props = {}) => {
        console.log(`--- component re-render ---`);
        return useMemo(() => {
            console.log(`--- useMemo re-render ---`);
            return <div>
                {/* <p>step is : {props.step}</p> */}
                {/* <p>count is : {props.count}</p> */}
                <p>number is : {props.number}</p>
            </div>
        }, [props.number]);
    }

### 6.2 useMemo缓存路由 ###

return useMemo(() => {
            return {
                push: history.push,
                replace: history.replace,
                pathname: location.pathname,
                query: {
                    ...queryString.parse(location.search),
                    ...params
                },
                match,
                location,
                history
            };
        }, [params, match, location, history]);

## 7.useCallback ##

useCallback 计算结果是 函数, 主要用于 缓存函数，应用场景如: 需要缓存的函数，因为函数式组件每次任何一个 state 的变化 整个组件 都会被重新刷新，一些函数是没有必要被重新刷新的，此时就应该缓存起来，提高性能，和减少资源浪费。

useCallback的本质是对函数进行依赖分析，依赖变更时才重新执行

useCallback<T>(callback: T, deps: Array<mixed> | void | null): T

const [coords, setCoords] = useState({x: 0, y: 0});
        
        const handler = useCallback(
            ({clientX, clientY}) => {
                setCoords({x: clientX, y: clientY});
            },
            [setCoords]
        );

### 7.1 传入组件的函数使用React.useCallback ###

因为父组件的重新渲染，导致函数方法的内存地址发生变化，所以React.memo会认为props有变化，导致子组件重复渲染。

可以使用React.useCallback来缓存函数方法，避免子组件的重复渲染。

export default () => {
      const [num, setNum] = useState(0);
      const oneFnc = useCallback(() => {
        console.log('这是传入child的方法');
      }, []);
      return (
        <>
          {num}
          <button onClick={() => setNum(num + 1)}>num加1</button>
          <Child onFnc={oneFnc} />
        </>
      );
    }

同理，要避免在子组件的传入参数上直接写匿名函数。

// 不要直接写匿名函数
    <Child onFnc={() => console.log('这是传入child的方法')} />

## 8. react-hook-form ##

https://react-hook-form.com/

[react-hook]: http://www.ruanyifeng.com/blog/2019/09/react-hooks.html