如何在防止组件一次又一次重新渲染方面优化 React Native App Performance
How to optimise React Native App Performance in terms of preventing component re-rendering again and again
我想提高组件性能,但在分析了很多组件后我了解到每个组件都在进行大量的重新渲染,有什么方法可以减少重新渲染React 中的组件?
如果您使用的是 React class 组件,您可以使用 shouldComponentUpdate
方法或 React.PureComponent
class 扩展来防止组件 re-rendering.在功能组件中,您可以使用 React.memo()
使用 React.memo()
记忆一个 React 功能组件
记忆是一种优化技术。它主要用于加速按故事计算函数的结果,并在相同的输入再次出现时返回缓存的结果。以下是使用 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" />
}
有多种方法可以避免重新渲染组件。
- React.memo 或 React.PureComponent (最佳方式)
了解有关 https://dmitripavlutin.com/use-react-memo-wisely/
的更多详细信息
- 确保 属性 值不变
- 将对象作为 props 传递
- 使用按键避免re-renders
- 避免更改 DOM 树结构
上找到更多详细信息
我想提高组件性能,但在分析了很多组件后我了解到每个组件都在进行大量的重新渲染,有什么方法可以减少重新渲染React 中的组件?
如果您使用的是 React class 组件,您可以使用 shouldComponentUpdate
方法或 React.PureComponent
class 扩展来防止组件 re-rendering.在功能组件中,您可以使用 React.memo()
使用 React.memo()
记忆一个 React 功能组件记忆是一种优化技术。它主要用于加速按故事计算函数的结果,并在相同的输入再次出现时返回缓存的结果。以下是使用 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" />
}
有多种方法可以避免重新渲染组件。
- React.memo 或 React.PureComponent (最佳方式) 了解有关 https://dmitripavlutin.com/use-react-memo-wisely/ 的更多详细信息
- 确保 属性 值不变
- 将对象作为 props 传递
- 使用按键避免re-renders
- 避免更改 DOM 树结构