React.Component 和 React.PureComponent 表现出不同的行为

Posted 2023-02-22

【中文标题】React.Component 和 React.PureComponent 表现出不同的行为

【英文标题】：React.Component and React.PureComponent show different behaviour

【发布时间】：2018-06-14 22:18:18

【问题描述】：

我在下面添加可运行代码 sn-ps。看到不同 第一个是 React.PureComponent 版本

class App extends React.PureComponent 
 
  render() 
    console.log('re-render')
    return (
    <div>
     <span>I am parent</span>
     this.props.children
    </div>
    )
  


  ReactDOM.render(
    <App>
      <div>
        I am the child
      </div>
    </App>,
    document.getElementById('app')
  )


//setTimeout(render, 1000)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

第二个是 React.Component 版本

class App extends React.Component 
  
  render() 
    console.log('re-render')
    return (
    <div>
     <span>I am parent</span>
     this.props.children
    </div>
    )
  


  ReactDOM.render(
    <App>
      <div>
        I am the child
      </div>
    </App>,
    document.getElementById('app')
  )


//setTimeout(render, 1000)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

为什么第二个运行成功，但第一个运行不成功？想找原因，没找到好的原因

【问题讨论】：

我刚刚在 jsfiddle 中尝试了你的第一个代码，它可以工作:(

你用的是哪个版本的react，我的fiddle有15.1.0版本

【参考方案1】：

React.PureComponent 是在 15.3.0 版本之后添加的，因此在第一种情况下会出现错误。 如果您希望您的第一个案例工作，请检查 sn-p。我已经更新了 react 版本。

class App extends React.PureComponent 
  render() 
    console.log('re-render')
    return (
    <div>
     <span>I am parent</span>
     this.props.children
    </div>
    )
  


  ReactDOM.render(
    <App>
      <div>
        I am the child
      </div>
    </App>,
    document.getElementById('app')
  )


//setTimeout(render, 1000)

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="app"></div>

参考请查看 react-release-version

【讨论】：

感谢您的回答

【参考方案2】：

React.PureComponent 不适用于您的情况，因为您使用的是旧版本的 ReactJS。实际上，对 React.PureComponent 的支持是在 2016 年 6 月 29 日随 React 15.3 引入的。

【参考方案3】：

我可能错了，但我认为React.PureComponent 不存在于版本15.1.0 中。

您收到的错误 ("Uncaught TypeError: Super expression must either be null or a function, not undefined") 通常是由拼写错误或扩展不存在的类触发的（请参阅this SO post 中的更多详细信息）。

我的建议是让您的 3rd 方库保持最新，并在这种情况下使用最新版本的 React。

这是你自己的 react 升级后的例子：

class App extends React.PureComponent 
 
  render() 
    console.log('re-render')
    return (
    <div>
     <span>I am parent</span>
     this.props.children
    </div>
    )
  


  ReactDOM.render(
    <App>
      <div>
        I am the child
      </div>
    </App>,
    document.getElementById('app')
  )


//setTimeout(render, 1000)

<script src="https://unpkg.com/react@16.2.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.2.0/umd/react-dom.development.js"></script>
<div id="app"></div>

【讨论】：

是的，PureComponent 是在 React 15.3 中引入的

感谢您的回答