子组件构造函数被多次调用

Question

我有一个父组件，它是一个包含标题HeaderComponent的平面列表。这个HeaderComponent是我创建的一个自定义组件，它包含自己的两个子组件。每当我刷新列表时，我都会将一个布尔值作为参数传递给HeaderComponent，然后传递给它自己的子元素，这样我就可以检查每个组件是否需要获取新数据。问题是，每当父组件刷新并设置新状态时，每次都会调用子组件的构造函数。构造函数不应该只在第一次父级初始化时调用，然后所有后续调用都涉及到调用子对象的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()}
            .......
        />
    );
}

Header组件

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

正如其中一个答案中正确指出的，删除严格模式可以解决此问题。至于为什么要这样做，是因为严格模式有意调用了两次“render”方法，以检测潜在的问题。

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

渲染阶段的生命周期包括如下方法:构造函数，UNSAFE_componentWillMount，UNSAFE_componentWillReceiveProps，...，Render等等。

渲染阶段很耗时，并且经常被分成几个部分来释放浏览器。渲染阶段可能会在提交阶段之前被多次调用(通常非常快)。由于渲染阶段的方法被多次调用，因此重要的是这些方法都不能有任何问题或副作用。

因此，为了突出可能的副作用，使它们更容易被发现，react显式地双重调用呈现阶段方法。

有关这方面的更多信息，请访问:https://reactjs.org/docs/strict-mode.html#detecting-unexpected-side-effects :)

Answer 3

严格模式不能自动为您检测副作用，但它可以通过使它们更具确定性来帮助您发现它们。这是通过有意地双重调用以下函数来实现的：

• 类组件构造函数、呈现和shouldComponentUpdate方法
• 类组件静态getDerivedStateFromProps
• 组件主体
• 状态更新程序函数(传递给useState、useMemo或useReducer

的第一个参数

https://reactjs.org/docs/strict-mode.html

如网站所述，注意:这仅适用于开发模式。生命周期在生产模式下不会被双重调用。