Question

请查看我的代码。我尝试限制给定无状态组件的重新呈现，但是这样做发现从不调用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>
)}}

根据要求-父级这样调用：

import RenderTableOverHead from './components/RenderTableOverHead.js';

在其下面装有道具以形成新功能

  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}
      />


);}

并返回类似的内容（此处称为Overhead）

return(

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

Answer 1

我会尝试一下，因为我不确定问题是什么，但是我发现有些事情对我而言似乎不是惯用的，并且可能会以某种方式跳闸。

首先，检查生命周期方法中的official documentation：它指出即使sCU返回false，在某些情况下也可能发生重渲染
“很多已定义的按钮”看起来很可疑。看起来您正在每个渲染上重建一堆组件。这很可能是静态信息，可以保留在其他位置。
将实际组件包装到另一个lambda中，然后关闭外部状态，但仍然用作反应组件，看起来超级可疑。简化该代码，例如直接在正确的位置使用RenderTableOverhead。另外，请勿将组件本身称为 RenderSomething ...，应将其更多地看作是一段UI的声明。

我希望这会有所帮助。

Answer 2

好的，让我们总结一下。在我的情况下，目标是防止不必要地重新赠送给定组件。

解决方案是 1.使用原始成分（感谢flq） 2.在shouldComponentUpdate中进行如下比较：

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

道具之间存在功能，也许这就是为什么简单比较导致误导（在这种特定情况下）结果（以及使用PureComponent）的原因。感谢所有贡献者。

不应该调用shouldComponentUpdate

2 个答案: