时间戳

首页 > 解决方案 > 如何使用 ReactJS 实现真正的部分更新？

javascript - 如何使用 ReactJS 实现真正的部分更新？

问题描述

我有一个工作面试，招聘人员问我“处理部分更新和管理应用程序大小”

例如，他解释并展示了一个大小为 8MB 的 SPA，他说这并不理想和完美！？！？

他说我们应该用不同的方法管理应用程序的大小！？

为了进行测试，在面试结束后，我使用 google chrome DevTools 检查了linkedin 网站。在任何请求之后，我看到响应是谁是 html 网页（Html，Css，JS）并且显然在每个请求后将 html 响应附加到页面，这是控制 SPA 大小的想法！

所以我有一个问题，默认情况下，在 create-react-app 包中，我们有 webpack 来创建 web 模块，并将所有组件加载到一个 bundle.js 中，这个 js 文件对于 40 个或更多组件来说会很重。也许10MB或更多...

如何用完美准确的局部更新方法实现真实优化的 SPA 结构？

不幸的是我只懂一点英文，如果我写英文有误，请原谅我:-) ;-)

谢谢

标签： javascriptreactjsperformancesingle-page-application

解决方案

我认为您正在寻找的是动态导入或在需要时异步加载组件（或更多代码）。有多种方法可以做到这一点

  • 当用户向下滚动到组件时加载
  • 仅在用户单击按钮时加载组件（例如模态）
  • 在初始关键数据已经渲染后加载组件（例如，仅在其父组件已加载并渲染到 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>
    )
  }
}

上面的代码所做的是在它的父组件已经加载之后加载组件代码，方法是将它导入到组件中。

目前这种分码方式

由 create-react-app 支持。

在这里阅读更多

还要检查这个react-loadable

推荐阅读