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

Question

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

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

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

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

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

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

不幸的是我只懂一点英语，如果我写错了，请原谅我:-) ;-)

谢谢

Answer 1

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

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

在这里阅读更多

还要检查这个反应加载