From Vueer to Reacter

1 How to switch the Vue technology stack to the React technology stack

Hello, everyone, MY name is Jone. I have two years of front-end development experience, 19 years of study in a bird training institution, learned a little bit of HTML CSS JS three-piece package, plus Vue2 technology stack, and then went out to find a job. After graduation, I happened to catch up with the epidemic, and found my first job through video interview. The company uses Vue2+ElementUI development. After working for one year, I gradually mastered the company’s business, doing only some forms and forms. There was no room for improvement. In the second year, I joined a company using Vue3+Vite+Antd technology stack through the internal promotion of my colleagues. At that time, Vue3 was just coming out, and I was the first one to take advantage of it. Later, due to the company’s business problems, I had to start looking for a job, and my salary has not been paid yet. This year, I came to Shanghai to start looking for a new job. At present, the technology stack of this company is React Hooks, which is very strange to me at the beginning, and I have made many twists and turns. However, as a developer with more than a year’s development experience, Vueer still has some foundation of component functional programming, and there are many similarities between the two technology stacks. After one or two months ‘exploration, I could not understand the code at the beginning of the company, but now I can master the normal development business.

2. Routing differences of scaffolding

Before Before

The scaffolding used by Vue before is the scaffolding built by Vue Cli, and the routing is also using Vue’s ecological Vue Router

After After

Umi now uses Umi scaffolding, which is pronounced ummi in Chinese. Unlike Vue technology stack, Umi integrates react- Router out of the box. At the same time, the built-in request library Umi Request, data management DVA and so on.

3 Differences in data and status management

Before Before

We usually use AXIOS secondary encapsulation in the Vue technology stack, and create an API folder in the SRC directory to manage the interface of each module in our system.

SRC | - components | - unified management API request interfaceCopy the code

Import the API interface in the page, define a method in methods, and call it in the Mounted lifecycle function.

import {getTableList} from '@/api/policySystem'

export default {
  data() {
    return {
      tableData: []
    }
  },
  mounted() {
      this.getTableList()
  },
  methods:{
    async getTableList(){
      const data = {
        'strMap.taskid':'203537773243756544',
      }

      const res = await getTableList(data)
      if (res.success) {
        this.tableData = res.data.zctx
      }
    }
  }
}
Copy the code

After the interface data is obtained, the data is assigned, and the data in the data changes, triggering the updated rendering of the view.

After After

At present, Umi request is used for data request. Umi request is an open source HTTP request library encapsulated based on FETCH. It has a unified API call method, simplified usage method and provides common functions of request layer

• Automatic serialization of URL parameters
• Simplified POST data submission
• Response Simplified return processing
• Request timeout processing
• Request cache support
• GBK coding processing
• Unified error handling
• Request unsupport
• Node environment HTTP request
• Interceptor mechanism
• Onion Middleware Mechanism

We usually generate a services folder in the SRC directory to manage the interface uniformly.

Public / / public documents can put some third-party font style library such as the mock / / mock file SRC | - components / / public directory components When the business need to split the component, Can be found in the corresponding business folder to create a alone components folder | - layouts / / project structure file | - locales / / planning | - models / / public model location | -- public. Js / / Public model file can be multiple | - services/store/public APICopy the code

The data layer is managed using DVA, a lightweight application framework based on Redux and Redux-Saga data Flow solutions.

• Page is responsible for dealing directly with the user: rendering the Page, accepting user input for actions, and focusing on demonstrative interactive logic.
• Model is responsible for processing business logic, for Page data, state read and write, transformation, temporary storage, etc.
• The Service interconnects with the HTTP interface for pure data reading and writing.

To create a Model

import { ServiceData } from '@/services'; Export default{namespace:'tableModel', state:{tabaleData:[]}, Reducers :{// Synchronize method saveTable(state,{payload}) {return {... satate.tabaleData,... FetchTable (payload,{call,put}) {const {data} = yield call(ServiceData, Payload) // ServiceData is the name of the interface method defined by the service layer. Payload is the parameter transmitted by the request layer. Data is the interface returned by the background. "SaveTable ",// This is the reducer fetchTable method, put is used to trigger the reducer method, payload is the passed parameters. It can also trigger other methods in Effects. Payload: {payload: data,}}}Copy the code

• Namespace Indicates the unique name of the namespace
• State Initial data
• Reducers synchronized approach
• Effects asynchronous method

Use Effects to define the asynchronous method, use the Call method to call the Service layer to define the interface method, then use PUT to call the synchronous method to trigger the reducers, similar to Vuex mutation method, which is the only way to submit the data, and then the reducers to return the data to the State.

The Index page

import React from 'react'; import { connect } from 'dva' const Index = ({tabaleData}) => { return <List data={tabaleData} />; } const mapStateToProps = ({ tableModel }) => { return { tableData: tableModel.tabaleData, }; }; const mapDispatchToProps = dispatch => ({ fetchTableList: (payload) => { disdpatch({ type: 'tableModel/fetchTable', payload, }); }}); export default connect(mapStateToProps, mapDispatchToProps)(Index);Copy the code

Connect the page to the Model using connect, call the Model layer methods using mapDispatchToProps, make the process tedious by distributing an object through the 19th patch. The props of mapStateToProps corresponds to the namespace of the Model, and returns an object that gets the data of the Model. The component receives the data and uses it in the component.

Dva so design page only receive PORPS data display, model layer focus on logic processing, so although it will be relatively troublesome to write, but the code to write more clear, later maintainability is also higher, love love.