Reactjs 从不调用shouldComponentUpdate

请看一下我的代码。我试图限制对给定无状态组件的重新呈现，但这样做会发现shouldComponentUpdate从未被调用。我已经从styledComponents中删除了包装器（之前有人报道过这种情况），但仍然没有调用它。 除此之外，你还可以写一篇关于这些函数的捕获的文章

import React from 'react';
import GoogleSearchForm from './RenderGoogleSearchForm.js';
import ButtonWithMessage from './ButtonWithMessage.js';
import styled from 'styled-components';

export default class RenderTableOverHead extends React.Component{

  constructor(props) {
    super(props);
  }

  shouldComponentUpdate(nextProps, nextState) {
    console.log('shoulItdUpdate');
    return false;
  }

  render(){
    console.log('render overhead');
    const wrapstyle = 'd-flex align-items-center justify-content-center border-none'

  const Button = {
    // lots of defined buttons
  }

  return(

    <div className = {wrapstyle}> 
      {!this.props.isHiddenReturnButton && <Button.ReturnToPreliminarySearch />}
      {!this.props.isHiddenWelcomeButton && <Button.Welcome />}
      {!this.props.isHiddenFailureMsg && <Button.SearchFailure />}
      {!this.props.isHiddenResultsMsg && <Button.SearchResults /> }
      {(this.props.isConnectionOK >0||this.props.isConnectionOK===undefined) && <Button.ConnectionError /> }
      {!this.props.isHiddenInputForm && <GoogleSearchForm  FetchBooks = {this.props.FetchBooks} /> }
      {!this.props.isHiddenFilterToggleButton && <Button.FilterShowPrompt />}
  </div>
)}}

下面是它的道具，以形成新的功能

  const Overhead = ()=>{return(  

      <RenderTableOverHead 

      isHiddenInputForm={ this.state.isHiddenInputForm}
      isHiddenWelcomeButton={this.state.isHiddenWelcomeButton}
      ShowGoogleSearch={this.handleWelcomeButtonClick}
      //SubmitInputDataToParentState={this.fetchBooks}
      FetchBooks ={this.fetchBooks}
      isHiddenResultsMsg={this.state.isHiddenResultsMsg}
      isHiddenFailureMsg={this.state.isHiddenFailureMsg}
      toggleFilterVisibility={this.toggleFilterVisibility}
      numberOfResults ={catalog.TotalNumberOfBooks}
      numberOfPages =/*{_.last(TableWithPageNumbers)}*/{catalog.NumberOfPages}
      currentPageNumber ={catalog.CurrentPageNumber}
      //currentPage ={this.Page}//tu podmieniony numer strony jest kosztem powyższego
      isConnectionOK={this.state.connectionStatus}
      //errorStatus ={this.state.errorStatus}
      //errorMessage ={this.state.errorMessage}
      //handleError={this.handleError}
      isHiddenReturnButton={this.state.isHiddenReturnButton}
      isHiddenFilterToggleButton={this.state.isHiddenFilterToggleButton}
      />


);}

const开销=（）=>{return（
);}

返回的结果是这样的（此处为其命名的开销）

返回(
{isDataLoaded&&
{过滤}
};
)

我要试一试，因为我不好，让我们总结一下。在我的例子中，目标是防止对给定组件进行不必要的重新渲染

解决办法是 1.使用原始组件（感谢flq） 2.要在shouldComponentUpdate中进行如下比较：

return (JSON.stringify(this.props) !=JSON.stringify(nextProps));

道具之间存在着功能，这也许就是为什么简单的比较会导致误导性的结果（在这个特定的案例中）以及PureComponent的使用。

---

感谢所有的贡献者。

如果它没有执行，就意味着没有改变道具或状态。您希望它什么时候被称为Dok，更多关于它是如何工作的以及为什么我问您：道具没有改变可能是正确的。但是，其父级的状态发生更改，这显然会导致重新渲染此组件（因为此组件是在其父级的渲染函数中渲染的）。这个组件重新呈现了我从日志中看到的内容（不仅如此，让我们保持简单）。到目前为止，我确信如果shouldComponentUpdate返回false，则没有渲染。并且-在渲染之前，该函数被选中。此时此刻的这个例子告诉我，也许我的理解是错误的。但是为什么呢？谢谢你，这对我来说是非常非常有趣的评论。我怀疑（并将检查immy）问题在于第三点-封装在另一个函数中的组件不再是100%本身，也不再是自身与未定义实体之间的某个组件！！！！现在的工作就像魅力（几乎-但现在我看到了前进的道路）。还感谢您的其他评论，虽然有很多关于JS的最佳实践，但使用React并不容易！顺便说一句，我是从mysel那里学来的，也许并不总是从最好的来源学来的如果你打算去华沙一定要喝啤酒：）请注意，文档建议不要做深入的比较，由于字符串化和比较实际上可能比调用render方法更昂贵-请将昂贵的计算远离render方法，在我的特殊情况下，您几乎不需要

shouldComponentUpdate

，其他比较会导致误导性结果。我写了一个循环来比较thisProps和nextPros中的一个条目，这表明所有条目都是相等的；而当我比较整个的时候，这些是不同的。在我的情况下，它导致渲染，而上述结果满足我的期望。然而，很奇怪。不过，它将被重新编写，这样，作为功能的优点就不会被比较了

return(

        <div className='container'>
        <Overhead />
        <Pagination />
        {isDataLoaded && 
           <div className = {cardStyle}>
           <table className = {tableStyle}>
                <thead className = {tableHeaderStyle}>
                <Headline />     
                {Filtration}            
                </thead>
                <TableBody />     
       </table>
       </div>};
       </div>)

return (JSON.stringify(this.props) !=JSON.stringify(nextProps));