Reactjs中优化组件渲染的技巧：Memoization和PureComponent

组件渲染速度一直是Reactjs中的一个重点优化点。在大型应用程序中，组件的渲染“瓶颈”可能会影响用户的体验，从而导致性能问题。

为此，Reactjs提供了两个优化组件渲染的技巧：Memoization和PureComponent。

Memoization

Memoization是一种技术，用于存储给定输入的输出结果，以便下次使用时快速返回结果。这个概念在Reactjs中称为“记忆化”。在Reactjs组件中，记忆化是利用React.memo实现的。

import React, { memo } from 'react';

function MyComponent(props) {
  // ... 组件的逻辑代码
}

export default memo(MyComponent);

React.memo是一个HOC（高阶组件），它接受一个组件作为参数，并返回一个新的组件，该组件将只在props发生变化时重新渲染。这意味着当传递给组件的props不变时，React.memo会返回以前的渲染结果，从而提高了组件的性能。

PureComponent

PureComponent是Reactjs提供的另一种优化组件渲染的技巧。PureComponent是一个React组件，其实现了shouldComponentUpdate生命周期方法，并根据下面的规则来决定是否执行重新渲染：

• 如果组件的状态或props没有改变，PureComponent不执行重新渲染。
• 如果状态或props对象具有相同的引用，PureComponent不执行重新渲染。

import React, { PureComponent } from 'react';

class MyComponent extends PureComponent {
  // ... 组件的逻辑代码
}

export default MyComponent;

与普通组件不同，PureComponent不需要手动实现shouldComponentUpdate方法，因为它已经内置在组件中了。

Memoization和PureComponent是Reactjs中优化组件渲染的两个强大的技术。通过使用这些技术，您可以有效地提高应用程序的性能。