React中修改Component A时如何阻止Component B重渲染？

问题描述 #

当更新Component A的内容时，预期只有Component A会重渲染（控制台打印"A"），但实际Component B也会跟着重渲染（控制台同时输出"A"和"B"）。需求是仅让触发更新的组件执行更新操作。

相关代码 #

A.tsx

return(
  <Details_A setter={setter} dataold={dataold}/>
  <Details_B setterOne={setterOne} datanew={datanew}/>
)

Details_A.tsx

console.log("A");
return (
  <>
    hello world. I am in A now
  </>
);
};

注：这是一个将集成到父项目中的独立项目

解决方案 #

1. 用React.memo包裹Component B #

React.memo是高阶组件，会对组件props做浅比较，若props无变化则阻止重渲染。直接把Details_B用它包裹：

import React from 'react';

const Details_B = React.memo(({ setterOne, datanew }) => {
  console.log("B");
  return (
    <>
      {/* 组件内容 */}
    </>
  );
});

export default Details_B;

如果props是引用类型（对象、数组），浅比较可能失效，可自定义比较函数作为第二个参数：

const arePropsEqual = (prevProps, nextProps) => {
  // 返回true表示无需重渲染，按需编写比较逻辑
  return prevProps.datanew.id === nextProps.datanew.id && 
         prevProps.setterOne === nextProps.setterOne;
};

const Details_B = React.memo(({ setterOne, datanew }) => {
  // 组件内容
}, arePropsEqual);

2. 保证传递给Component B的props稳定 #

• 函数类型props：如果是父组件内的内联函数，每次父组件重渲染都会生成新引用，导致React.memo失效。用useCallback包裹保持引用稳定：

import { useCallback } from 'react';

// 父组件A.tsx中
const setterOne = useCallback((newData) => {
  // 函数逻辑
}, []); // 依赖数组为空表示函数永远不重新创建，按需添加依赖

• 对象类型props：若父组件每次渲染都生成新对象，同样会触发重渲染。用useMemo缓存对象：

import { useMemo } from 'react';

// 父组件A.tsx中
const datanew = useMemo(() => {
  return { /* 对象内容 */ };
}, []); // 依赖数组放入影响对象生成的变量

3. 拆分父组件状态 #

如果父组件的状态更新仅和Component A相关，可将Component A及对应状态封装为独立组件。这样A的状态变化只会触发自身重渲染，父组件和Component B不会受影响。

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