React组件变量访问优化：避免重渲染与繁琐传参

针对你提出的问题，有两种更优的方案可以实现子组件独立分离、访问父组件状态变量且避免不必要重渲染的需求：

方案一：使用React Context封装共享状态 #

将父组件中需要共享的状态和变量封装到Context中，子组件通过useContext消费，配合React.memo避免不必要重渲染，同时子组件可以完全抽离到外部文件。

实现代码： #

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

// 创建共享Context
const AppContext = React.createContext();

function App() {
  const [step, setStep] = useState(0);
  const [someValue, setSomeValue] = useState("xyz");
  const var1 = "abc";
  const var2 = "def";

  // 用useMemo缓存Context值，避免父组件重渲染时创建新对象触发子组件更新
  const contextValue = useMemo(() => ({
    someValue,
    setSomeValue,
    var1,
    var2
  }), [someValue, var1, var2]);

  return (
    <AppContext.Provider value={contextValue}>
      <div>
        {step === 0 ? <StepZero /> : <StepOne />}
      </div>
    </AppContext.Provider>
  );
}

// 抽离到外部的子组件，用memo包裹仅当依赖变化时重渲染
const StepZero = memo(() => {
  const { someValue, setSomeValue, var1, var2 } = useContext(AppContext);
  return (
    <div>
      <p>{someValue}</p>
      <input type="text" id="fname" name="fname" />
      <h1>{var1} {var2}</h1>
      <button onClick={() => setSomeValue("123")}>Click</button>
    </div>
  );
});

const StepOne = memo(() => {
  const { someValue, setSomeValue, var1, var2 } = useContext(AppContext);
  return (
    <div>
      <h1>{someValue}</h1>
      <button onClick={() => setSomeValue("456")}>Click</button>
      <h2>{var1}</h2>
      <h3>{var2}</h3>
    </div>
  );
});

方案说明： #

• Context统一管理共享状态，子组件无需手动接收大量参数，直接通过useContext获取所需值
• useMemo缓存Context值，避免父组件重渲染时因创建新对象导致子组件无意义更新
• React.memo包裹子组件，仅当Context中依赖的变量变化时才会触发重渲染

方案二：用useMemo缓存内部定义的子组件 #

如果不需要将子组件抽离到外部文件，可以用useMemo缓存内部组件函数，避免父组件重渲染时重新创建组件引用导致子组件卸载重装。

实现代码： #

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

function App() {
  const [step, setStep] = useState(0);
  const [someValue, setSomeValue] = useState("xyz");
  const var1 = "abc";
  const var2 = "def";

  // 用useMemo缓存StepZero组件，仅当依赖项变化时重新创建
  const StepZero = useMemo(() => {
    return () => (
      <div>
        <p>{someValue}</p>
        <input type="text" id="fname" name="fname" />
        <h1>{var1} {var2}</h1>
        <button onClick={() => setSomeValue("123")}>Click</button>
      </div>
    );
  }, [someValue, var1, var2]);

  // 同理缓存StepOne组件
  const StepOne = useMemo(() => {
    return () => (
      <div>
        <h1>{someValue}</h1>
        <button onClick={() => setSomeValue("456")}>Click</button>
        <h2>{var1}</h2>
        <h3>{var2}</h3>
      </div>
    );
  }, [someValue, var1, var2]);

  return (
    <div>
      {step === 0 ? <StepZero /> : <StepOne />}
    </div>
  );
}

方案说明： #

• 原代码中内部组件每次父组件重渲染都会被重新定义，React会认为是全新组件而卸载原有组件（导致输入状态丢失），useMemo缓存后仅当依赖变量变化时才会重新创建组件
• 子组件仍可直接访问父组件的状态和变量，无需手动传参
• 适合小型组件场景，代码更简洁，无需额外创建Context

内容的提问来源于stack exchange，提问作者cjmeyer96