Question

如何发信号通知React函数组件是“纯粹的”，相当于组件类的React.PureComponent？

function C(props) { 
  return <var>{props.n}</var> 
}

没有使其成为一个类

class C extends React.PureComponent {
  render() {
     return <var>{this.props.n}</var>
  }
}

Answer 1

致@Shubham和@Andrew：
不，功能组件不是PureComponent。如果父组件重新呈现，则功能组件将始终重新呈现。 PureComponent包含默认的shouldComponentUpdate()，我认为这就是OP想要的。

您可以使用recompose提供的pure来包装和优化您的功能组件：

import pure from 'recompose/pure'

const YourFunctionalComponent = (props) => {
  ...
}

export default pure(YourFunctionalComponent)

Answer 2

除了 CodinCat 的回答。

库的作者，recomponse，在 2018 年 10 月 25 日写了 a note，在那里他表示，他试图通过库解决的问题被 React 团队通过引入钩子解决了。不仅如此，React 团队还添加了优化功能，如 React.memo()，之前命名为 React.pure()。所以，是时候使用React.memo()了。阅读有关它的官方文档

Answer 3

从React 16.6.0开始，已经添加了memo，所以答案是：

const C = React.memo(props => {
  return <var>{props.n}</var>
})

Answer 4

基于函数式编程范式中的纯度概念，如果满足以下条件，函数就是纯函数：

它的返回值仅由其输入值决定
对于相同的输入值，它的返回值总是相同的

对于 React 功能组件，似乎有两种方法可以做到：

使用来自 react 的 memo：

import React, { memo } from 'react';

const Component = (props) {
  return (
    // Component code
  )
}

// Wrap component using "memo" HOC
export default memo(Component);

使用来自recompose的pure：

import React from 'react';
import { pure } from 'recompose';

const Component = (props) {
  return (
    // Component code
  )
}

// Wrap component using "pure" HOC
export default pure(Component);

将功能组件声明为“纯粹”

4 个答案: