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>

Second one is React.Component version

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存在于15.1.0版本中。

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

我的建议是让你的第三方库更新，并在这种情况下使用最新版本的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/[email protected]/umd/react.development.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
<div id="app"></div>

Answer 2

React.PureComponent是在15.3.0版本之后添加的，因为在第一种情况下会出现错误。如果您希望第一个案例有效，请查看该片段。我已经更新了反应版本。

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

Answer 3

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