React 无状态组件是否等于 ReacDOM.PureComponents

Question

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

"React.PureComponent is exactly like React.Component but implements shouldComponentUpdate() with a shallow prop and state comparison."

所以如果我定义如下内容，

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

是React.PureComponent吗？它会进行浅层的 prop 和 state 比较吗？

Answer 1

首先你写的component是functional component，不是Pure Component

纯组件意味着你知道如果组件再次获得相同的道具和状态，它不需要重新渲染自己或其子组件，所以它 returns false 从 shouldComponentUpdate 方法，以便 componentWillUpdate，渲染和componentDidUpdate 没有执行。

Answer 2

它们根本不相等。

无状态组件或官方名称React Stateless Functional Component(RSFC)没有"state".

React 组件从外部接收传递参数的 props 并将 state 对象用作 inside state control object，我们调用 setState 函数修改 state 对象以触发重新渲染组件，RSFC 只接收 props 和 return 对应的 JSX 元素，它没有 "inside state" 对象。

PureComponent 是 React.PureComopnent，它不是 class 组件的通用术语，它是可以扩展的 React.PureComponent class，我们使用

class MyComponent extends React.PureComponent{}

告诉 React MyComponent 是纯成分。

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

中控制时间更新

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

React 无状态组件是否等于 ReacDOM.PureComponents

Are react stateless components equal to ReacDOM.PureComponents

javascript

web-component

reactjs

react-redux

它们根本不相等。