React中如何阻止子组件随父组件依赖状态更新重渲染且获取最新状态值？

嘿，这个问题问得特别好，正好能帮你吃透React渲染机制里的关键细节！咱们先理清楚核心矛盾：父组件的state更新会触发自身重渲染，而子组件因为接收了state作为props，props变化就会跟着重渲染。要实现“子组件不重渲染但能拿到最新state”，关键是不让子组件的props直接依赖父组件的state，换用其他稳定的方式获取最新值。下面给你两种实用的方案：

方案一：用useRef存储状态，子组件通过ref访问最新值 #

这是最直接的思路——把父组件的state同步到一个ref里，因为ref的引用是稳定的（父组件重渲染时，useRef返回的对象始终是同一个），子组件接收这个ref作为props，就不会因为state变化触发重渲染，同时随时能通过ref.current拿到最新值。

代码示例：

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

const ParentComponent = () => {
  const [state, setState] = useState(0);
  const stateRef = useRef(state);

  // 监听state变化，同步到ref.current
  useEffect(() => {
    stateRef.current = state;
  }, [state]);

  return (
    <div>
      {console.log("parent")}
      <h1>Parent Component</h1>
      <p>State: {state}</p>
      <button onClick={() => setState(state + 1)}>Increment State</button>
      {/* 传递ref而非直接传state */}
      <ChildComponent stateRef={stateRef} />
    </div>
  );
};

// 用React.memo包裹子组件，确保props不变时绝不重渲染
const ChildComponent = React.memo(({ stateRef }) => {
  console.log("child");
  return (
    <div>
      <h2>Child Component</h2>
      {/* 点击按钮就能拿到最新的state值 */}
      <button onClick={() => alert(`最新State值：${stateRef.current}`)}>查看最新State</button>
    </div>
  );
});

你可以试试点击父组件的递增按钮，会发现控制台只打印"parent"，子组件完全不重渲染，但点击子组件的按钮却能拿到最新的state数值，完美符合你的需求！

方案二：useImperativeHandle + forwardRef（适合父组件主动触发的场景） #

如果你的场景是父组件需要主动调用子组件的方法来获取最新state，那可以用forwardRef配合useImperativeHandle，让子组件暴露一个方法给父组件，方法内部直接访问ref里的最新值。

代码示例：

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

const ParentComponent = () => {
  const [state, setState] = useState(0);
  const stateRef = useRef(state);
  const childRef = useRef(null);

  useEffect(() => {
    stateRef.current = state;
  }, [state]);

  return (
    <div>
      {console.log("parent")}
      <h1>Parent Component</h1>
      <p>State: {state}</p>
      <button onClick={() => setState(state + 1)}>Increment State</button>
      {/* 父组件按钮触发子组件方法拿最新值 */}
      <button onClick={() => childRef.current.getLatestState()}>从子组件拿最新State</button>
      <ChildComponent ref={childRef} stateRef={stateRef} />
    </div>
  );
};

// 用forwardRef让子组件接收父组件的ref
const ChildComponent = forwardRef(({ stateRef }, ref) => {
  console.log("child");

  // 定义父组件可调用的方法，暴露给外部
  useImperativeHandle(ref, () => ({
    getLatestState: () => {
      alert(`最新State值：${stateRef.current}`);
    }
  }));

  return (
    <div>
      <h2>Child Component</h2>
    </div>
  );
});

// 同样用memo确保子组件不被无意义重渲染
export default React.memo(ChildComponent);

关键注意点 #

为什么不能直接用React.memo包裹子组件然后传state呢？因为state是基本类型（比如数字），每次更新都是全新的值，React.memo的浅比较会认为props变了，还是会触发子组件重渲染。而ref是引用类型，它的对象引用始终不变，所以子组件的props不会变化，自然不会重渲染。

备注：内容来源于stack exchange，提问作者Margish Patel