如何仅在按钮点击时获取React Context，避免子组件不必要重渲染？

要避免EditWordlistElem因Context变化而频繁重渲染，核心思路是分离Context中的状态与操作函数，并确保操作函数的稳定性。以下是具体实现步骤：

1. 拆分Context为状态与操作两个独立Context #

将原有的单一Context拆分为：

• 存储词表状态的WordlistStateContext
• 存储编辑操作的WordlistActionsContext

// WordlistStateContext.js
import { createContext, useContext } from 'react';

const WordlistStateContext = createContext();
export const useWordlistState = () => useContext(WordlistStateContext);

// WordlistActionsContext.js
import { createContext, useContext } from 'react';

const WordlistActionsContext = createContext();
export const useWordlistActions = () => useContext(WordlistActionsContext);

2. 在Provider中稳定操作函数 #

在Context提供者中，使用useCallback和useMemo确保操作函数及操作对象的稳定性：

// WordlistProvider.js
import { useState, useCallback, useMemo } from 'react';
import { WordlistStateContext } from './WordlistStateContext';
import { WordlistActionsContext } from './WordlistActionsContext';

export const WordlistProvider = ({ children }) => {
  const [wordlist, setWordlist] = useState([]);

  // 用useCallback稳定editWordlist函数
  const editWordlist = useCallback((newValue, elemId) => {
    setWordlist(prev => prev.map(word => 
      word.id === elemId ? { ...word, content: newValue } : word
    ));
  }, []); // setWordlist由useState返回，天生稳定无需加入依赖

  // 用useMemo稳定操作对象
  const actions = useMemo(() => ({ editWordlist }), [editWordlist]);

  return (
    <WordlistStateContext.Provider value={wordlist}>
      <WordlistActionsContext.Provider value={actions}>
        {children}
      </WordlistActionsContext.Provider>
    </WordlistStateContext.Provider>
  );
};

3. 修改子组件仅消费操作Context #

让EditWordlistElem只依赖稳定的操作Context，并使用React.memo包裹组件，避免父组件重渲染时的不必要更新：

// EditWordlistElem.js
import { useState, memo } from 'react';
import { useWordlistActions } from './WordlistActionsContext';

const EditWordlistElem = ({ content, elemId }) => {
  const { editWordlist } = useWordlistActions();
  const [newValue, setNewValue] = useState(content);

  return (
    <div>
      <input 
        value={newValue} 
        onChange={(e) => setNewValue(e.target.value)} 
        placeholder="编辑词汇"
      />
      <button onClick={() => editWordlist(newValue, elemId)}>
        保存修改
      </button>
    </div>
  );
};

// 仅在props变化时重渲染
export default memo(EditWordlistElem);

为什么这样有效？ #

• 拆分Context后，WordlistActionsContext的value是稳定的（仅当editWordlist函数变化时才更新，而editWordlist被useCallback固定），因此消费该Context的组件不会因词表状态变化而重渲染。
• React.memo确保组件仅在自身props（content、elemId）或内部状态（newValue）变化时才重渲染，避免父组件重渲染带来的连锁更新。

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