React开发日记-react的服务端渲染框架Next.js 的开发体验

背景

做为一个react初学者，本文主要分享一下在一个开发者的角度 从vuejs转到reactjs+nextjs的差异

目录

vue和react区别
csr和ssr区别
next.js项目开发使用的特性
next.js遇到的问题
next.js开发友好的点
复制代码

vue和react区别

1 生命周期不一样

基本的created mounted destroy update 等生命周期二者都有
可是触发时机和使用方法有所不一样，使用时须要注意
举个🌰
    X同窗实现了一个组件modal须要知道本身被关闭和打开的时机，修改css,实现防止页面滚动的状况。
    X同窗使用componentWillUpdate 判断组件的active prop 修改的时机
    然鹅，因此不管是active发生了修改，仍是父组件的其余prop/state发生了更新，都会触发modal的componentWillUpdate
复制代码

parent.tsx
    👇
  constructor(props) {
    super(props)
    this.state = {
      test:1
    }
    setInterval(() => {
      this.setState({
        test:Math.random()
      })
    }, 3000)
  }
  public componentWillUpdate(prop,state){
    console.log('page triggered update')
  }
  
  component.tsx
  👇
   public componentWillUpdate(prop,state){
    console.log('modal triggered update')
  }
复制代码

我在parent.tsx 定时修改了某个state，此state与component无关
    然鹅，子组件也一块儿触发了update
复制代码

上图 👏：

在一样的状况下 vue项目是不会的

显然这是不合理的。
    而在vue中，若是咱们分别在父子组件使用update钩子，父组件的update触发不会同时触发子组件的update
复制代码

2 react 对 typescript的支持更友好

缘由实际上是 typescript对react进行了支持
  
  2.1
    vue的ts须要分别引用 vue-class-component vue-property-decorator vuex-class 来支持组件声明 组件 vue api ,vuex 等功能。
    
    react相对简单。
    
  2.2 
    vue 开发过程当中 须要使用 vue-property-decorator 等第三方模块规定的语法,因此加上以后，还得习惯新语法。而且在调用window等全局对象或者其余module的时候须要先在typing下声明一次。
复制代码

react 只需

npx create-react-app my-app --typescript
复制代码

而且调用一些对象 的时候，因为有内置的类型，不须要咱们手动作
复制代码

👏 3 react没有vue的各类指令

用惯了vue的各类指令，切换到react的时候，会不习惯没有各类指令。
但后面发现能够用mobx的Reactive，react hook的USEEffect解决  实现v-model,watch 的相似功能。
复制代码

4 组件通讯方式

vue 能够直接在子组件上监听事件，$refs调用子组件的方法，:variable.sync 的方式实现属性的同步。

    react 是单向数据流
复制代码

通常状况下
    父组件把handlechange的方式传给子组件，子组件在propchange的时候执行对应的方法。若是是须要父子组件共享的数据，可能须要考虑使用状态提高/mobx作数据状态管理

    状态提高：
    https://www.reactjscn.com/docs/lifting-state-up.html
复制代码

5 声明模板的方式

vue 使用拓展的html语法

react jsx方式， 可使用全部js语法特性,较为灵活
复制代码

csr和ssr

1
    之前调试csr项目的时候，习惯在控制台debugger或者查看network的请求
    而ssr项目的首屏资源是在服务器完成请求和组装的，
    因此只能在服务端的控制台查看输出
2 
    当咱们项目须要作状态管理
    例如 vuex redux mobx等
    在ssr开发时要注意客户端和服务端的store数据同步问题
    csr不须要考虑这个问题，由于全部的逻辑都在客户端执行
3
    在服务器端的环境不一样于浏览器，没有window,document等对象
    没注意的话可能致使报错
复制代码

next.js遇到的问题

1 从page/index 跳转到 page/b 的时候，会出现页面样式错乱的问题 缘由是浏览器加载的style.chunk.css中的样式不存在page/b的样式 而构建出来的css 已经有page/b的样式了 目前在本地环境会出现这个问题 但生产环境没有 官方还未提供解决方案

3

因为next中是使用className设置样式
而且在构建后生成 .class__hash的形式
因此当咱们试图在其余模块设置引用的模块的样式的时
会出现hash 对不上，样式不生效的问题
复制代码

a.tsx ---组件a
.footerwrapper{XXX}
pageb.tsx --引用了a
.footerwrapper{XXX}
复制代码

最后的dom结构和css文件是这样的
复制代码

后者的样式没法生效 这时我就遇到一个问题，我不能在特殊状况下修改组件的样式 但其实咱们也不该该修改组件的样式，而是让组件通用。 4 项目结构固定，可是熟悉react和vue开发的同窗仍是能很快习惯的 官方： next.js enforces a_structure_so that we can do more advanced things like:

*   Server side rendering
*   Automatic code splitting
复制代码

next.js用到的特性

1 bucket问题

因为页面可能须要在不一样国家访问
    而咱们根据不一样的地区访问的服务器不一样致使接口地址是不一样的
    所以咱们使用bucket作区分
    经过url上面的contry或者buckte参数,存储到globalstore对象中，而后map.get对应的s_bucket，
    拼接好对应的接口地址。
    这里一样涉及到了store数据同步的问题。每一个页面实例咱们会维护一个单独的store对象，防止数据污染。
复制代码

2 使用mobx作reactive

全局状态 咱们放在mobx进行管理。
    
    经过@action修改到@observable变量的时候 mobx会帮咱们更新视图
    
    便于管理
复制代码

3 多语言

使用 react-intl 将local和 对应地区的messages注入到app中
    
    这样app下面的component都能都过 const { messages } = this.props.intl
    
    拿到须要的多语言文案
复制代码

next.js开发友好的点

1 
    对于熟悉react 而且想使用ssr的团队 nextjs的生态完善,文档齐全,遇到问题容易搜到，或者能及时在github上得到回复。
    
2
     对ts支持友好，
     react 和 next 拥有各类内置类型，
     咱们声明组件或者页面的时候
     不须要咱们手动声明类型
复制代码

3 开箱即用,执行两行命令就能够愉快的开始开发了

npx create-next-app
npm install --save next react react-dom
复制代码

支持使用now一键部署（不须要自定义服务器的状况下）
复制代码

总结

熟悉react开发的同窗 基本是能够顺利上手nextjs的 学习成本不高
欢迎补充 指正
复制代码

参考文章

juejin.im/post/5b8b56…