background

As a beginner of React, this article will share the differences of switching from Vuejs to ReactJS + Nextjs from a developer’s perspective

directory

Vue vs. React CSR vs. SSR features used in next. Js Project development Problems encountered in next. Js development friendly pointsCopy the code

Vue is different from React

1 Different life cycles

Basic created Mounted Destroy Update and other life cycles have both, but the trigger timing and use method are different, you need to pay attention to use, for example, 🌰 X implemented a component modal needs to know when it is closed and opened, Modify the CSS to prevent page scrolling. X uses componentWillUpdate to determine when the active prop of the component is modified, so whether the active component is modified or other prop/state of the parent component is updated, All trigger modal componentWillUpdateCopy the code
The parent. The TSX 👇constructor(props) {
    super(props)
    this.state = {
      test:1
    }
    setInterval((a)= > {
      this.setState({
        test:Math.random()
      })
    }, 3000)
  }
  public componentWillUpdate(prop,state){
    console.log('page triggered update'TSX 👇 public componentWillUpdate(prop,state){console.log('modal triggered update')}Copy the code
I periodically changed a state in parent.tsx that had nothing to do with the component, and the child components triggered the update as wellCopy the code

Above 👏 :

Obviously this is not reasonable. In VUE, if we use the UPDATE hook on the parent component separately, the update trigger of the parent component does not trigger the update of the child component at the same timeCopy the code

React support for typescript is friendlier

The reason for this is that typescript implements 2.1 VUE support for React, which requires vue-class-component vue-property-decorator vuex-class to support component declarations in the component VUE API , vuEX and other functions. React is relatively simple. 2.2 VUE development requires the syntax specified by third-party modules such as VUe-property-decorator, so you have to get used to the new syntax. You also need to declare once under typing when calling global objects such as Windows or other modules.Copy the code

    npx create-react-app my-app --typescript
Copy the code
And when we call some objects, because of the built-in type, we don't need to do it manuallyCopy the code

👏 3 React Does not have vUE commands

I'm used to using vUE commands. When I switch to React, I'm not used to not using commands. However, it is later found that similar functions of V-Model and Watch can be realized by using MOBx Reactive and React Hook USEEffect.Copy the code

4 Component communication mode

Vue can listen for events directly on the child component, and $refs calls the child component's method, :variable.sync, to synchronize attributes. React is a one-way data flow. Normally, the parent component passes handlechange to the child component, which executes the corresponding method when propchange. If you need to share data with parent and child components, you may want to consider using state promotion/MOBx for data state managementCopy the code

State lifting concept

5 How to declare a template

React JSX vue uses the extended HTML syntax. It can use all js syntax featuresCopy the code

CSR and SSR

1. In the past, I used to debug CSR projects in the console debugger or check network requests, while the resources on the first screen of SSR projects were completed on the server. Therefore, the output can only be viewed on the console of the server side. 2 When our project needs to do state management, such as Vuex Redux Mobx, etc., we should pay attention to the store data synchronization between the client and the server side during SSR development. CSR does not need to consider this problem. Because all the logic is executed on the client side 3 in the server side environment is different from the browser, there is no window,document and other objects not paying attention to may cause an errorCopy the code

Problems encountered with next.js

1 When page/index is switched to Page /b, The reason for the page style error is that the style in the style.chunk. CSS loaded by the browser does not have the page/ B style. The CSS built with the Page/B style already has the page/ B style

Since next uses className to set the style and generates the.class__hash form after construction, when we try to set the style of the referenced module in other modules, the hash will not work and the style will not take effectCopy the code
TSX -- component A. footerWrapper {XXX} pageb.tsx -- reference a. footerWrapper {XXX}Copy the code
The final DOM structure and CSS file look like thisCopy the code

*   Server side rendering
*   Automatic code splitting
Copy the code

Features used by next.js

1 the bucket problem

Because the page may need to be accessed in different countries and the address of the interface may be different depending on the server that we're accessing in that region, we use bucket to make that distinction and store it in a GlobalStore object with the contry or buckte parameter above the URL, Then map.get corresponds to s_bucket and splices the corresponding interface address. There is also the issue of store data synchronization. We maintain a separate Store object for each page instance to prevent data contamination.Copy the code

Reactive using MOBx

Global state is managed in MOBx. Mobx updates the view for management when changing to an @Observable variable via @actionCopy the code

More than 3 language

{messages} = this.props. Intl const {messages} = this.props. Intl const {messages} = this.propsCopy the code

Next. Js development friendly points

1. For teams who are familiar with React and want to use SSR, NextJS has a complete ecology, complete documentation, easy to search for problems, or timely reply on Github. React and Next have a variety of built-in types, so we don't need to manually declare components or pagesCopy the code

npx create-next-app
npm install --save next react react-dom
Copy the code
Support for one-click deployment with NOW (when no custom server is required)Copy the code

conclusion

Students who are familiar with react development can learn NextJS easilyCopy the code

Refer to the article

Juejin. Cn/post / 684490…