新闻录入网站模板网络推广宣传

背景

有如下组件：

const Timer = () => {const [time, setTime] = useState(0); // 每秒更新return (<><h1>当前时间:{dayjs(time).format("YYYY-MM-DD HH:mm:ss")}</h1><OtherSlowComponent /> // 每次 setTime 都会触发整个组件重新渲染，包括这里</>);
};const Container = () => <Timer />;

每秒更新一次 time，导致整个 Timer 组件重新渲染，连带 ·OtherSlowComponent· 也每秒被重新渲染一次，哪怕它跟时间无关！

又或者：

import { memo } from 'react';export const App = () => {const { currentUserInfo, users } = useGetInfoData();return (<div className="App"><CurrentUserInfo data={currentUserInfo} /><UserInfoList users={users} /></div>);
};

假如 currentUserInfo 更新，也会导致 UserInfoList 组件的重新渲染。

优化方案

方法一：提取到父组件，分离 Timer 和 OtherSlowComponent

const Container = () => {return (<><Timer /><OtherSlowComponent /></>);
};

如果 OtherSlowComponent 和 Timer 没有任何依赖关系，直接将它们并列在父组件中是最简单高效的做法，彻底避免无意义的重渲。

方法二：使用 useMemo 缓存慢组件（更适用于传了 props 的场景）

const memoizedSlowComp = useMemo(() => <OtherSlowComponent />, []);

但注意：useMemo 仅在初次渲染创建，依赖项变化时才会重新计算。

方法三：memo

export const App = () => {const { currentUserInfo, users } = useGetInfoData();return (<div className="App"><CurrentUserInfo data={currentUserInfo} /><UserInfoList users={users} /></div>);
};const UserInfoList = memo(({ users }) => {// ...
});

方法四：props.children

为什么 props.children 能帮助优化

如果你把慢组件 OtherSlowComponent 作为 children 传进去，并且 Timer 本身不关心它、也不依赖它的任何状态变化，那就可以很好地“托管”渲染时机 —— 只要父组件不变，它不会重渲！

示例：使用 props.children 优化重渲染

const Container = () => {return (<Timer><OtherSlowComponent /></Timer>);
};const Timer = ({ children }: { children: React.ReactNode }) => {const [time, setTime] = useState(new Date());useEffect(() => {const intervalId = setInterval(() => setTime(new Date()), 1000);return () => clearInterval(intervalId);}, []);return (<><h1>当前时间: {dayjs(time).format("YYYY-MM-DD HH:mm:ss")}</h1>{children}</>);
};const OtherSlowComponent = React.memo(() => {console.log('💡 OtherSlowComponent 渲染了');return <div>这是一个渲染慢的组件</div>;
});

渲染优化分析

组件	是否每秒重渲染？	原因
Timer	✅	每秒更新 time
OtherSlowComponent	❌	被当作 children 静态传入，不受 time 影响，且 React.memo 避免重渲染

更多关于 props.children 的内容可以阅读 WHAT - React 组件的 props.children 属性

总结

方法	是否推荐	说明
使用 props.children	✅✅✅	非常推荐，结构清晰、性能佳
React.memo 搭配 children	✅	更加保险，确保不被不必要的重渲染触发
放到父组件里	✅	如果结构允许，这是最清晰的做法