本文将介绍如何编写更好性能的React函数组件。不包括Web性能优化的常识，例如HTTP请求优化，缓存优化，浏览器优化等。

在开始之前，让我们谈谈React框架的性能。有许多前端框架，React并不是最具性能的，因为它包括额外的运行时，"优化"的差异算法等等。总的来说，它肯定不如直接操作DOM那么高效，但使用它意味着拥有强大的React社区，许多库可以提高我们的效率，易于维护和其他程序员理解。这也通常意味着更容易招聘。

但这并不妨碍你成为更好的React用户，今天开始编码吧！

React.memo()

函数组件使用的React.memo和类组件使用的React.PureComponent具有类似的效果。但React.memo实际上是一个高阶组件。它支持第二个参数。当未传递第二个参数时，它将浅层比较前后props的更改。如果没有更改，则可以直接重用上次渲染的结果。

当我们传递第二个参数时，我们可以获取前后两个props，然后进行自定义比较。例如，在以下组件中，我想将中心坐标点传递给地图子组件，它是表示经度和纬度的两位数组：

// Parent Component
<Map center={[1, 1]} />;// Map Component
const Map = (props) => {
  /* render using props */
};export default React.memo(
  Map,
  (prevProps, nextProps) => prevProps.toString() === nextProps.toString()
);

如上面的代码所示，我使用了Array.prototype.toString()来比较前后的值变化，当然，实际情况可能并不是那么简单。

那我必须将其应用于所有函数组件吗？答案是否定的。例如，如果父组件中没有状态更改，并且传递给子组件的props是简单的基本值类型，则在子组件上使用React.memo将增加不必要的计算。这是因为在这种情况下，重新呈现父组件，并且使用相同props的子组件必须重新呈现。

React.useCallback()

如果依赖项未更改，则React.useCallback()可以传递内联回调和一组依赖项。返回回调的记忆版本。

每次渲染函数组件（由状态更改等触发）时，如果我们不使用useCallback，则将创建一个新的函数。这也意味着，如果将此函数传递给另一个子组件，则如果未使用记忆自定义比较，则该子组件将重新呈现。例如以下示例：

// Parent Component
const callback = () => {
  doSomething(a, b);
};const memoizedCallback = React.useCallback(() => {
  doSomething(a, b);
}, [a, b]);<Map cb={callback} />;// Map Component
const Map = (props) => {
  /* render using props */
};

上面代码中的memoizedCallback仅在a和b更改时重新创建，否则指向相同的引用。这与每次进行呈现时重新创建的callback不同。

React.useMemo()

React.useMemo可以传递一个“create”函数和一组依赖项。如果依赖关系未更改，则返回存储器的先前计算值。这避免了在每次呈现时进行昂贵的计算。

在开始提到的记忆示例中，可以通过以下方式缓存坐标：

// Parent Component
const center = React.useMemo(() => [a, b], [a, b]);<Map center={center} />;// Map Component
const Map = (props) => {
  /* render using props */
};export default Map;

结论

除此之外，还有一些散落的点可以帮助我们，例如使用React.Fragment避免额外的元素，使用条件呈现而不是重新返回，使用键来识别组件元素中的更改等等。

总之，优化React函数组件性能的主要思想是：

• 减少每次呈现的计算量，可以通过useMemo，memo等来实现。
• 减少重新呈现的次数，可以通过useCallback等来实现。
• 让React尽可能重用DOM，并尝试修改DOM而不是销毁和重新创建。