将功能组件声明为“纯”答案

【问题标题】：Declare a functional component as "pure"将功能组件声明为“纯”
【发布时间】：2017-09-14 04:52:49
【问题描述】：

如何向 React 发出信号表明功能组件是“纯的”，相当于组件类的 React.PureComponent？

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

没有使其成为一个类

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

【问题讨论】：

标签： reactjs

【解决方案1】：

从 React 16.6.0 开始，添加了 memo，所以现在的答案是：

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

【讨论】：

【解决方案2】：

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

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

import pure from 'recompose/pure'

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

export default pure(YourFunctionalComponent)

【讨论】：

【解决方案3】：

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

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

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】：

除了 CodinCat 答案。

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

【讨论】：