React开发日记-react的服务端渲染框架Next.js 的开发体验但其实我们也不应该修改组件的样式，而是让组件通用

背景

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

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做数据状态管理

状态提升概念

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的样式了目前在本地环境会出现这个问题但生产环境没有官方还未提供解决方案

由于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.cn/post/684490…

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

背景

目录

vue和react区别

csr和ssr

next.js遇到的问题

next.js用到的特性

总结

参考文章