React中如何存储API响应且避免不必要重渲染？

核心思路 #

既然要求仅在单选按钮点击时触发重渲染，API数据更新时不触发，可简化为：用ref存储最新的API键值对数据，用单个state记录当前选中的key，而非维护显示值数组。

具体实现 #

1. 存储API数据：使用useRef保存最新响应，确保跨重渲染持久化，且更新ref不会触发组件重渲染，还支持部分键值对的合并更新。

   const apiDataRef = useRef({});
   
   // 处理API响应的回调示例
   const handleApiUpdate = (newData) => {
     // 合并新旧数据，支持部分键值更新
     apiDataRef.current = { ...apiDataRef.current, ...newData };
   };
   

2. 管理选中状态：用单个state变量跟踪用户选中的key，仅在单选按钮点击时更新该state，触发重渲染。

   const [selectedKey, setSelectedKey] = useState('key1'); // 设置默认选中项
   

3. 渲染逻辑：组件渲染时直接从apiDataRef.current中取出选中key对应的值展示，点击单选按钮时仅更新选中key，触发一次重渲染并读取最新数据。

   return (
     <div>
       <label>
         <input
           type="radio"
           value="key1"
           checked={selectedKey === 'key1'}
           onChange={() => setSelectedKey('key1')}
         />
         Key1
       </label>
       <label>
         <input
           type="radio"
           value="key2"
           checked={selectedKey === 'key2'}
           onChange={() => setSelectedKey('key2')}
         />
         Key2
       </label>
       <label>
         <input
           type="radio"
           value="key3"
           checked={selectedKey === 'key3'}
           onChange={() => setSelectedKey('key3')}
         />
         Key3
       </label>
       <div>当前值：{apiDataRef.current[selectedKey]}</div>
     </div>
   );
   

方案优势 #

• 严格控制重渲染：API数据更新仅修改ref，完全不会触发组件重渲染，符合需求。
• 简化状态逻辑：无需维护冗余的显示值数组，仅跟踪选中key即可，代码更简洁易懂。
• 自动同步最新数据：每次单选按钮触发重渲染时，都会读取ref中最新的API数据，确保显示内容是最新值。

特殊场景补充 #

如果需要在API数据更新时，不触发组件重渲染但自动更新已选中项的显示内容，可以结合useEffect和DOM直接操作（仅在有实时同步需求时使用）：

const valueDisplayRef = useRef(null);

useEffect(() => {
  if (valueDisplayRef.current && selectedKey) {
    valueDisplayRef.current.textContent = apiDataRef.current[selectedKey];
  }
}, [apiDataRef.current, selectedKey]);

// 渲染时给显示元素添加ref
<div ref={valueDisplayRef}>当前值：{apiDataRef.current[selectedKey]}</div>

内容的提问来源于stack exchange，提问作者Gopikrishna K S