反应无状态组件是否等于 ReacDOM.PureComponents答案

【问题标题】：Are react stateless components equal to ReacDOM.PureComponents反应无状态组件是否等于 ReacDOM.PureComponents
【发布时间】：2023-03-03 19:56:01
【问题描述】：

根据文档(https://reactjs.org/docs/react-api.html#react.purecomponent)

"React.PureComponent 与 React.Component 完全相同，但实现了 shouldComponentUpdate() 具有浅的 prop 和状态比较。"

因此，如果我定义如下内容，

const MyView = () => {
  return (
    <div>Hello Stateless Component</div>
  )
};

它是一个 React.PureComponent 吗？它会做一个浅的 prop 和 state 比较吗？

【问题讨论】：

我不这么认为。扩展 React.PureComponent 的组件被视为纯组件。

标签： javascript reactjs react-redux web-component

【解决方案1】：

它们根本不相等。

无状态组件或正式名称React Stateless Functional Component(RSFC) 没有“状态”。

React组件从外部接收传递参数的props并使用state对象作为inside state control object，我们调用setState函数修改state对象触发组件重新渲染，RSFC只接收props并返回对应的 JSX 元素，它没有“内部状态”对象。

PureComponent是React.PureComopnent，它不是一类组件的总称，它是可以扩展的React.PureComponent类，我们使用

class MyComponent extends React.PureComponent{}

告诉 react MyComponent 是纯组件。

如果你想要一个<Clock/>组件显示和更新时间本身，你应该使用PureComponent并且没有办法控制RSFC中的时间更新

更多关于 differences between Component and PureComponent this article 的信息可能会有所帮助。

【讨论】：

【解决方案2】：

首先你写的组件是功能组件，它不是纯组件。

纯组件意味着你知道如果组件再次获得相同的 props 和 state，它不需要重新渲染自己或其子组件，因此它会从 shouldComponentUpdate 方法返回 false，从而不会执行 componentWillUpdate、render 和 componentDidUpdate。

【讨论】：