如何优化本地应用程序性能以防止组件一次又一次地重新呈现
如何优化本地应用程序性能以防止组件一次又一次地重新呈现
提问于 2022-02-18 15:39:57
我想提高组件的性能，但是在对许多组件进行分析之后，我知道每个组件都在进行大量的重呈现，有什么方法可以减少组件在React中的重呈现吗？
回答 2
Stack Overflow用户
回答已采纳
发布于 2022-02-18 15:48:38
如果使用React类组件，则可以使用shouldComponentUpdate方法或React.PureComponent类扩展来防止组件重新呈现。在功能组件中，可以使用React.memo()
记忆一个具有React.memo()的反应功能组件
追忆是一种优化技术。它主要用于通过故事(函数的结果)加速计算，并在再次发生相同的输入时返回缓存的结果。下面是使用React.memo()的一个示例
const Greeting = React.memo(props => {
console.log("Greeting Comp render");
return <h1>Hi {props.name}!</h1>;
});
function App() {
const [counter, setCounter] = React.useState(0);
// Update state variable `counter`
// every 2 seconds.
React.useEffect(() => {
setInterval(() => {
setCounter(counter + 1);
}, 2000);
}, []);
console.log('App render')
return <Greeting name="Ruben" />
}Stack Overflow用户
发布于 2022-02-18 16:09:22
有多种方法试图避免重新呈现组件。
- React.memo或React.PureComponent (最佳方式)查找更多关于https://dmitripavlutin.com/use-react-memo-wisely/
- Make的详细信息，确保属性值不将change
- Passing对象作为props
- Using键，以避免DOM树structure
中的re-renders
- Avoid更改
您可以了解有关https://www.debugbear.com/blog/react-rerenders的更多细节。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71176115
复制相关文章
相似问题
腾讯云开发者
