读书笔记(十一):同构应用

同构应用依赖虚拟DOM实现客户端和服务器端的统一。它允许编写一次组件,适应两端。区别主要在于路由处理,服务器端需处理StaticRoute,而客户端使用BrowserRouter。在打包上,entry会因路由差异而不同。此外,同构涉及数据的注水和脱水,服务器端请求时需保留客户端信息以进行认证。性能优化包括组件级缓存、使用HSF以及适时动态切换渲染方式。
摘要由CSDN通过智能技术生成

同构应用能够实现的基础是虚拟DOM,基于虚拟DOM我们可以生成真实的DOM,并由浏览器渲染;也可以调用不同框架的API,将虚拟DOM生成字符串,由服务器端传输给客户端。

1.打包环境区分
同构应用实现了客户端代码和服务器端代码的基本统一,我们只需要编写一种组件,就能生成适用于服务器端和客户端的组件。大多数情况下还是需要单独处理的,差别决定了代码复用难易程度。

  • 路由代码差别

    服务器端需要根据请求路径匹配页面组件,客户端需要通过浏览器中的地址匹配页面组件。

    const App = () => {
         
      return (
        <Provider store={
         store}>
          <BrowserRouter>
            <div>
              <Route path
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值