多次调用子组件构造函数

Question

我有一个父组件，它是一个包含 header 的平面列表HeaderComponent。这HeaderComponent是我创建的一个自定义组件，它包含 2 个自己的子组件。每当我刷新列表时，我都会将一个布尔值传递给HeaderComponent传递给它自己的孩子的as 道具，我这样做是为了检查每个组件是否需要获取新数据。问题是每当父组件刷新并设置新状态时，子组件的构造函数每次都会被调用。不应该只在父级第一次初始化时调用构造函数，然后所有进一步的调用都涉及调用子级的 shouldComponentUpdate 方法，以查看它是否需要更新。

父组件

_renderHeader = () => {
    return <HeaderComponent Items={this.state.Data} refresh={this.state.refresh}/>;
};

render() {
    console.log("TAG_RENDER render called " + this.state.refresh);
    return (
        <FlatList
            refreshing={this.state.refresh}
            onRefresh={() => {
                console.log("onRefresh");
                this.setState({
                    refresh: true
                }, () => {
                    this._fetchData();
                });
            }}
            ......


            ListHeaderComponent={() => this._renderHeader()}
            .......
        />
    );
}

标题组件

export default class HeaderComponent extends React.Component {

    constructor(props) {
        super(props);
        console.debug("HeaderComponent");
    }

    render() {
        return (
            <MainHeader Items={this.props.Items}/>
            <SubHeader refresh={this.props.refresh}/>
        );
    }

}  

每当父组件刷新时MainHeader，Subheader就会调用和的构造函数。这是否意味着它每次刷新都会创建新的子组件，因为我可以看到子组件的渲染也被多次调用。

Answer 1

控制您的index.js文件。如果您看到<React.StrictMode>，您应该更改为<>。这解决了我的问题。

它应该是这样的：

ReactDOM.render(
  <>
    <App/>
  </>,
  document.getElementById('root')
);

Answer 2

正如其中一个答案中正确指出的那样，删除严格模式可以解决问题。之所以这样做，是因为严格模式有意两次调用“渲染”方法以检测潜在问题。

React 分两个阶段工作：渲染和提交。渲染阶段检查并确定要应用的新更改。并提交阶段应用它。

渲染阶段生命周期包括以下方法：constructor、UNSAFE_componentWillMount、UNSAFE_componentWillReceiveProps、...、render 等等。

渲染阶段非常耗时，并且经常被分解为多个部分以释放浏览器。渲染阶段可能在提交阶段之前被多次调用（通常非常快）。由于渲染阶段方法被多次调用，重要的是这些方法都没有任何问题或副作用。

因此，只是为了突出可能的副作用，使它们易于发现，显式反应双重调用渲染阶段方法。

您可以在以下位置阅读更多相关信息：https : //reactjs.org/docs/strict-mode.html#detecting-unexpected-side-effects :)