如何使用ReactJS实现真正的部分更新?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (142)

我参加了一次面试,招聘人员问我“处理部分更新和管理应用程序的大小”。

例如,他解释并展示了一个大小为8MB的SPA,他说它并不理想和完美!?

他说我们应该用不同的方法来管理应用程序的大小!?

作为一个测试,面试结束后,我用谷歌铬工具查看了LinkedIn的网站。在任何请求之后,我看到的响应是html网页(HTML、CSS、JS),而且很明显,LinkedIn在每次请求之后都会将html响应附加到页面上,控制SPA大小是一种想法!

因此,我有一个问题,默认情况下,在Crey-Reaction-app包中,我们有webpack来创建web模块,并且将所有组件加载到一个bundle.js中,这个js文件对于40个或更多组件来说将是很重的。也许10 MB或更多.

如何使用完善和准确的部分更新方法实现真正的优化SPA结构?

提问于
用户回答回答于

我认为需要的是动态导入或异步加载组件(或更多代码)。有很多种方法可以这样做

  • 当用户向下滚动到组件时加载
  • 只有当用户单击按钮时才加载组件(例如Modal)
  • 在初始关键数据已经呈现之后加载组件(例如,在组件的父组件已经加载并呈现到dom之后,只下载组件的代码)。

最后一个例子如下所示:

class Dynamic extends Component {
  constructor(props) {
    super(props);
    this.state = { module: null };
  }
  componentDidMount() {
    const { path } = this.props;
    import(`${path}`)
      .then(module => this.setState({ module: module.default }))
  }
  render() {
    const { module: Component } = this.state; // Assigning to new variable names @see: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
    return(
      <div>
        {Component && <Component />}
      </div>
    )
  }
}

上面的代码所做的是在其父组件已经加载之后,通过导入组件DID挂载来加载组件代码。

此代码分割方法当前为

支持创建-反应-应用程序。

扫码关注云+社区

领取腾讯云代金券