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

Posted 2023-02-16

【中文标题】路由更改时如何避免构造函数调用？

【英文标题】：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 可以吗？

【参考方案1】：

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

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