如何通过React纯组件模式实现长尾词功能示例详解？

本文共计1186个文字，预计阅读时间需要5分钟。

目录- 什么是纯组件？- 纯组件解决了什么问题？- 如何使用纯组件- CC: shouldComponentUpdate() 和 React.PureComponent- FC: React.memo()- 你可能并不需要纯组件- 什么是纯组件？- 纯组件（Pure Component）这一概念诞生自纯函数

目录

• 什么是纯组件
• 纯组件解决了什么问题
• 怎么使用纯组件
• CC: shouldComponentUpdate() 和 React.PureComponent
• FC: React.memo()
• 你可能并不需要纯组件

什么是纯组件

纯组件(Pure Component)这概念衍生自纯函数。纯函数指的是返回结果只依赖于传入的参数，且对函数作用域外没有副作用的函数。这种函数在相同参数下，返回结果是不变的。纯函数的返回值能被安全地缓存起来，在下次调用时，跳过函数执行，直接读取缓存。因为函数没有外部副作用，不执行函数对整个程序没有影响。

与纯函数类似，如果一个组件在 props 和 state 相同的情况下，每次 render 的结果都是相同的，那这个组件就是纯组件。也就是说，纯组件的 render 结果只依赖于 props 和 state，如果两次渲染中，props 和 state 是相同的，那它们的 render 结果也是一样的。