路由更改时如何避免构造函数调用？答案

【问题标题】：How to avoid constructor call when route changes?路由更改时如何避免构造函数调用？
【发布时间】：2019-09-24 12:07:04
【问题描述】：

我正在开发使用 webSocket(socket.io) 的应用程序。我有Layout 组件，在constructor 内部有webSocket 连接初始化：

export default class Layout extends Component {
  constructor(props) {
    super(props);
    
    this.props.initWebSocket();
  }

  render() {
    return (
      <div style={layoutStyle}>
      <Header />
      {this.props.children}
    </div>
    )
  }
}

然后我用Layout组件包裹每一页：

export default function Games() {
  return (
    <Layout>
      <p>Page with games</p>
    </Layout>
  );
}

换页时initWebSocket()再次调用的问题。我想避免重新初始化，只在第一次加载时建立它。

我已阅读官方文档中的“使用共享组件”部分，并认为它会对我有所帮助。 next.js 可以吗？

【问题讨论】：

标签： reactjs websocket next.js

【解决方案1】：

可以使用自定义 App 组件 - documentation

只需在“pages”文件夹中创建“_app.js”文件并将初始化逻辑放在那里。

【讨论】：