如何在防止组件一次又一次重新渲染方面优化 React Native App Performance

Question

我想提高组件性能，但在分析了很多组件后我了解到每个组件都在进行大量的重新渲染，有什么方法可以减少重新渲染React 中的组件？

Answer 1

如果您使用的是 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" />
}

Answer 2

有多种方法可以避免重新渲染组件。

React.memo 或 React.PureComponent （最佳方式） 了解有关 https://dmitripavlutin.com/use-react-memo-wisely/
确保属性值不变
将对象作为 props 传递
使用按键避免re-renders
避免更改 DOM 树结构

您可以在 https://www.debugbear.com/blog/react-rerenders

上找到更多详细信息

如何在防止组件一次又一次重新渲染方面优化 React Native App Performance

How to optimise React Native App Performance in terms of preventing component re-rendering again and again

javascript

reactjs

react-native

rerender