Appearance level is not enough, strength to gather. But think carefully, it seems that the strength is not too good, the heart suddenly sad, do not say, to learn.

Step one, climb to act16.2.0

1. React16 Scrap point

1.1 React.createClass

NPM install create-react-class

import createReactClass from 'create-react-class';
const Greeting = createReactClass({
	// ...
})
Copy the code

Viewing official Documents

1.2 React.PropTypes

The PropTypes package is now separate from React

// import {PropTypes} from 'React' deprecated
import PropTypes from 'prop-types';
Copy the code

2. Minor changes

2.1 classNameProperty must be passed string

Some of the previous code, because of the short-circuiting operation, might accept a Boolean value for className. At this point, React will give you a red warning.

let bool= false;
return <div className={bool| | 'class'} ></div>
Copy the code

Change to a three-way judgment

let bool= false;
return <div className={bool ? 'class' :"'} ></div>
Copy the code

2.2 class get methodReactDom.findDOMNodeAn error

There is some old code that uses reactdom.findDomNode to get the node to calculate the width and height attribute in the get method to achieve dynamic change. An error will be reported when the React version is upgraded. The official recommendation is to place ReactDom. FindDOMNode in componentDidUpdate or componentDidMount.

In fact, the REF can get the real node, avoiding the official findDomNode documentation altogether

3. React is getting rid of as many apis as possible

3.1 Life CyclecomponentWillMount,componentWillReceiveProps,componentWillUpdate

The React official plan is to scrap these lifecycles when react17.x and try not to use them.

3.2 Ref = string To obtain the node

Such as ref = “(see”. The DOM node is then accessed through this.refs.textinput. In the future this will be done away with. React officials suggest using callbacks or the createRef API instead of the official documentation

The first step is to see this article, and the official article to upgrade React to 16.2.0, step by step. According to the words of the front predecessor, afraid of taking a long step, easy to pull.

In the second step, move to React16.13.1

In order to use Hook and enjoy better React, we finally choose to install the latest React in one step and refer to the official document released in React V16.9.0

1. Rename the lifecycle method for Unsafe

  • ComponentWillMount – UNSAFE_componentWillMount
  • ComponentWillReceiveProps – UNSAFE_componentWillReceiveProps
  • ComponentWillUpdate – UNSAFE_componentWillUpdate

2. Discard urls in the javascript: form

3. Problems that cannot be solved

Because the technology stack used by the company’s projects includes DVA, the latest stable release of DVA2.4.1 still uses the Unsafe life cycle in methods like Connect, so the console is full of yellow warnings about the Unsafe life cycle during native development, which is a headache. This problem can only wait for dVA to be updated, or dVA to be converted to UMI.

conclusion

This article summarizes the React upgrade in the project, but actually there is no big difficulty. Finally, you can use fragments, hooks, componentDidCatch and other new features, which will benefit the development experience in the future. In fact, the upgrade plan of the project also includes the increase of DVA to 2.4.1 and ANTD2.x to ANTD3.x. These upgrades also took a while, and the result was a relatively smooth upgrade, which was well worth it when you thought about the fun of typing code later.