This month, I experienced a react project version upgrade, not just react upgrade, but all dependencies in package.json files were upgraded.

I was a little confused when I upgraded. React version 15.6, ANTD version 2.xx I also had an upgrade experience before, just a VUE project webpack upgrade. This upgrade depends on a lot of packages, there are still concerns.

This is my upgrade.

  1. Npm-check checks the packages to be upgraded. This is useful. You can use npm-check -u to select the packages to be upgraded and install dependencies based on the upgrade.

  2. After the upgrade, the project usually does not run, this time even routing is not working. “React-router “: “^2.4.0” After the upgrade

“React -router-dom”: “^5.2.0” syntax changed

  • routing

    For example:

    import { Link, browserHistory } from "react-router";
browserHistory.push('xxxxxx');

/ / after the upgrade
import { Link, withRouter } from "react-router-dom";

//withRouter is a higher-order component.

/ / a decorator
 @withRouter
 class Home extends Component{}/ / or
 withRouter(Home)

 // Route jump
 this.props.history.push('xxxxxx'); 

 // You can use hook if you are in a function component
 import { Link, useHistory } from "react-router-dom"; 

Copy the code

    So you need to replace the route.

  • The React. PropTypes replacement

    Since React V15.5, React.PropTypes has been moved into another package. Use the prop-types library instead.

    Automatic replacement of scan items can be done using the React-codemod tool. NPX react-codemod react-proptypes-to-prop-types (path is the file name of the directory that needs to be changed in the project)

  • Rename the React lifecycle

    Run NPX react-codemod rename-unsafe-lifecycles to prefix the lifecycle UNSAFE_ the rest of the react modification reference document.

  • Antd — Icon and From

The official upgrade document is ANTD2. Mine is ANTD4. It is also possible to upgrade to ANTD4 according to this document. The main changes are the form and Icon.

From 4.0 onwards, ANTD no longer has the Icon component built in, please use a separate package @ant-design/ ICONS. Through the 'antd4-codemod SRC' command. It mainly replaces Icon values with type and Icon property values with type string. Customize the font icon using the createFromIconfontCN method.Copy the code

2. The most fundamental difference in Form is the difference in implementation. Antd4 is dependent on 'RC-field-form', antd4 precedes' RC-form '.Copy the code
Import {Form} from '@ant-design/compatible'; import {Form} from '@ant-design/compatible'; import '@ant-design/compatible/assets/index.css'; Form.create(TestClass); OnSubmit <Form Layout ="inline" onSubmit={handleSubmit}> < form. Item {getFieldDecorator("username", { initialValue: '', rules: [{ required: true, message: "Please input your username!" }] })(<Input />)} </Form.Item> <Form.Item> <Button type="primary" htmlType="submit"> Submit </Button> </Form.Item> </Form> //2. Import {Form} from 'antd'; // Get the form instance -- through ref < form ref={formRef}></ form > // other forms validation failed execute onFinishFailed onFinish < form {... layout} name="basic" initialValues={{ remember: True}} onFinish={onFinish} onFinishFailed={onFinishFailed} > // rules < form. Item label="Username" name=" Username" rules={[{ required: true, message: 'Please input your username!' }]} > <Input /> </Form.Item> </Form> ```Copy the code