React.Component和React.PureComponent显示不同的行为

Question

我在下面添加可运行的代码段。第一个是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>

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>

为什么第二个成功运行，但第一个没有？？我试图寻找原因，但没有找到任何好的理由

Answer 1

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

Answer 2

React.PureComponent是在15.3.0版本之后添加的，因为在第一种情况下存在错误。如果你想让你的第一个案例起作用，请检查代码片段。我已经更新了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>

Answer 3

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

你得到的错误（未捕获的类型错误：超级表达式必须为空或函数，而不是未定义的）通常是由打字错误触发的，或者是由扩展不存在的类触发的（请参阅这篇SO文章中的更多细节）。

我的建议是让您的第三方LIB保持最新，并在这种情况下使用最新版本的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)

html prettyprint-override"><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>