React Hook_react 缓存方法的hook-CSDN博客

本文链接：https://blog.csdn.net/qq_45492057/article/details/110818774

本文详细介绍了React Hook的基础用法，包括useState作为componentDidMount等生命周期的集合体，以及useContext用于组件间状态共享。还探讨了额外的Hook，如useMemo和useCallback的差异和应用场景，强调它们在性能优化中的作用。同时提到了useLayoutEffect在处理DOM更新时的重要性。

摘要由CSDN通过智能技术生成

本文只介绍用法（简单通俗易懂的文字描述），若不理解含义的可以看react官网。

一、基础Hook

`1、useState（相当于class里的状态）`

（1）参数：初始值

（2）返回值是一个数组，第一个返回值是状态值，第二个返回值是更新状态的函数。

注意：count和setCount是自己命名的，唯一要注意的是改变状态的函数一定要使用set开头。

import React, { useState } from 'react';

function Counter({ initialCount }) {
    const [count, setCount] = useState(initialCount);
    // initialCount：初始值（只会在第一次渲染有效）
    // count：状态值
    // setCount：改变状态的函数
    // 在初始渲染期间，返回的状态 (count) 与传入的第一个参数 (initialCount) 值相同。
    return (
            <>
                Count: {count}
                <button onClick={() => setCount(initialCount)}>Reset</button>
                // 调用setCount函数，将传入的参数返回到count中。
                <button onClick={() => setCount((prevCount) => prevCount - 1)}>
                  -
                </button>
                /*
                    当你需要使用count之前的状态，而不是更新后的。
                    setCount函数将接收先前的count，并返回一个更新后的值。
                */ 
                <button onClick={() => setCount((prevCount) => prevCount + 1)}>
                  +
                </button>
            </>
           );
}Ï

`2、useEffect（相当于`componentDidMount，componentDidUpdate和componentWillUnmount的集合体`）`

基本上90%的情况下,都应该用这个,这个是在render结束后,你的callback函数执行,但是不会阻止浏览器绘画。

import { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);
  /*
    useEffect函数有两个参数，
    第一个参数是函数：
        在函数里面可以改变 DOM、添加订阅、设置定时器等，
        在函数的return中将清楚之前的订阅/计时器等
    第二个参数是依据某个状态更新的effect的值
  */
  useEffect(() => {
      const subscription = props.source.subscribe();
          return () => {
                    // 清除订阅
                    subscription.unsubscribe();
          };
  });// 该useEffect将在每轮渲染结束后执行
  // 默认情况下，useEffect 将在每轮渲染结束后执行，但你可以选择让它在只有某些值改变的时候才执行。


  useEffect(() => {
    // 更新文档的标题
    document.title = `You clicked ${count} times&#