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

我参加了一次工作面试，招聘人员问我关于“处理部分更新和管理应用程序大小”的问题

例如，他解释并展示了一个8MB大小的水疗中心，他说这不是理想和完美的

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

为了测试，面试结束后，我用谷歌chrome开发工具查看了linkedin网站。在任何请求之后，我看到了谁是html网页（html、Css、JS）的响应，显然是linkedin，在每个请求将html响应附加到控制SPA大小的页面之后

所以我有一个问题，默认情况下，在CreateReact应用程序包中，我们有webpack来创建web模块，并将所有组件加载到一个bundle.js中，这个js文件对于40个或更多组件来说会很重。可能是10MB或更多

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

不幸的是，我只懂一点英语，如果我写英语有错误，请原谅我：-）；-）

---

谢谢

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

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

类动态扩展组件{
建造师（道具）{
超级（道具）；
this.state={module:null}；
}
componentDidMount（）{
const{path}=this.props；
导入（`${path}`）
.then（module=>this.setState（{module:module.default}））
}
render（）{
const{module:Component}=this.state；//分配给新变量名@see:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
返回(
{组件&&}
)
}
}

上面的代码所做的是通过在Component Dod mount中导入组件，在其父组件已经加载之后加载组件代码

当前正在使用此代码拆分方法

由CreateReact应用程序支持

阅读更多

---

还要检查一下这个

我建议您查看ReactJs文档中的延迟加载概念。它基本上只在需要时导入，并减少了捆绑包的大小

---

无需为你的语言技能道歉。我很理解你的问题。不过，我对ReactJS和部分更新了解不够，无法回答。祝你好运您的英语非常好，您正在寻找的可能是dynamic-imports。谢谢，但单击按钮或事件后如何导入组件？如何设置组件的路径？我应该只传递组件名称吗？例如，我想加载仪表板并运行一个轻应用程序，然后如果用户单击用户列表或产品列表，则我加载这些组件并使用此技巧管理应用程序大小。那么我应该在我的事件函数体中使用import函数？tnx