将功能组件声明为"纯粹"

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

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

• 它的返回值仅由其输入值决定
• 对于相同的输入值，其返回值始终相同

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

1. 使用memo来自react：

   import React, { memo } from 'react';
   
   const Component = (props) {
     return (
       // Component code
     )
   }
   
   // Wrap component using "memo" HOC
   export default memo(Component);
   

2. 使用pure来自recompose：

   import React from 'react';
   import { pure } from 'recompose';
   
   const Component = (props) {
     return (
       // Component code
     )
   }
   
   // Wrap component using "pure" HOC
   export default pure(Component);
   

Answer 2

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

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

Answer 3

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

您可以使用recomposepure提供的包装和优化功能组件:

import pure from 'recompose/pure'

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

export default pure(YourFunctionalComponent)

Answer 4

除了 CodinCat 的回答。

该库的作者recomponse在 2018 年 10 月 25 日写了一篇笔记，他在其中表示，他试图通过库解决的问题是 React 团队通过引入钩子解决的。不仅如此，React 团队还添加了优化功能，如React.memo()，它的名字和React.pure()前面一样。所以，是时候使用React.memo(). 阅读有关它的官方文档