请看一下我的代码。我尝试限制给定无状态组件的重新渲染,但这样做发现 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>)
我会尝试一下,因为我不确定问题是什么,但我看到这里有一些对我来说似乎不惯用的事情,并且可能会以某种方式做出反应。
- 首先,回顾一下官方文档 https://reactjs.org/docs/react-component.html#shouldcomponentupdate关于生命周期方法:它指出即使 sCU 返回 false,在某些条件下也可能会发生重新渲染
- “很多定义的按钮”看起来相当可疑作为一个性能猪。看起来您正在每次渲染上重建一堆组件。这很可能是静态信息,可以保存在其他地方。
- 将实际组件包装到另一个 lambda 中,然后关闭外部状态and yet然后用作react组件看起来超级可疑。简化该代码,例如通过使用
RenderTableOverhead
直接在正确的位置。另外,不要调用组件本身渲染一些东西...更多地将其视为一段 UI 的声明。
我希望这有帮助。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)