upgrade to React 16

9 years ago · 36d3f39509
5 changed files with 235 additions and 225 deletions
--- a/package.json
+++ b/package.json
@ -19,6 +19,7 @@
  "dependencies": {
    "antd": "next",
    "classnames": "^2.2.5",
+    "core-js": "^2.5.1",
    "dva": "^2.0.3",
    "lodash": "^4.17.4",
    "lodash-decorators": "^4.4.1",
@ -26,9 +27,9 @@
    "numeral": "^2.0.6",
    "prop-types": "^15.5.10",
    "qs": "^6.5.0",
-    "react": "^15.6.2",
+    "react": "^16.0.0",
    "react-document-title": "^2.0.3",
-    "react-dom": "^15.6.2"
+    "react-dom": "^16.0.0"
  },
  "devDependencies": {
    "babel-eslint": "^8.0.1",
@ -43,7 +44,7 @@
    "babel-runtime": "^6.9.2",
    "cross-port-killer": "^1.0.1",
    "enzyme": "^3.1.0",
-    "enzyme-adapter-react-15": "^1.0.2",
+    "enzyme-adapter-react-16": "^1.0.2",
    "eslint": "^4.8.0",
    "eslint-config-airbnb": "^16.0.0",
    "eslint-plugin-babel": "^4.0.0",
@ -57,7 +58,7 @@
    "lint-staged": "^4.3.0",
    "mockjs": "^1.0.1-beta3",
    "nightmare": "^2.10.0",
-    "react-test-renderer": "^15.6.2",
+    "react-test-renderer": "^16.0.0",
    "redbox-react": "^1.3.2",
    "roadhog": "^1.2.1",
    "roadhog-api-doc": "^0.1.8",
--- a/src/index.js
+++ b/src/index.js
@ -1,6 +1,7 @@
 import dva from 'dva';
 import 'moment/locale/zh-cn';
 import models from './models';
+import './polyfill';
 import './g2';
 // import { browserHistory } from 'dva/router';
 import './index.less';
--- a/src/polyfill.js
+++ b/src/polyfill.js
@ -0,0 +1,7 @@
+import 'core-js/es6/map';
+import 'core-js/es6/set';
+
+global.requestAnimationFrame =
+  global.requestAnimationFrame || function requestAnimationFrame(callback) {
+    setTimeout(callback, 0);
+  };
--- a/src/routes/Forms/AdvancedForm.js
+++ b/src/routes/Forms/AdvancedForm.js
@ -1,4 +1,4 @@
-import React from 'react';
+import React, { PureComponent } from 'react';
 import { Card, Button, Form, Icon, Col, Row, DatePicker, TimePicker, Input, Select, Popover } from 'antd';
 import { connect } from 'dva';
 import PageHeaderLayout from '../../layouts/PageHeaderLayout';
@ -41,7 +41,9 @@ const tableData = [{
  department: 'Sidney No. 1 Lake Park',
 }];

-function AdvancedForm({ form, dispatch, submitting }) {
+class AdvancedForm extends PureComponent {
+  render() {
+    const { form, dispatch, submitting } = this.props;
    const { getFieldDecorator, validateFieldsAndScroll, getFieldsError } = form;
    const validate = () => {
      validateFieldsAndScroll((error, values) => {
@ -263,6 +265,7 @@ function AdvancedForm({ form, dispatch, submitting }) {
        </FooterToolbar>
      </PageHeaderLayout>
    );
+  }
 }

 export default connect(state => ({
--- a/tests/setupTests.js
+++ b/tests/setupTests.js
@ -1,6 +1,8 @@
+/* eslint-disable import/first */
+import '../src/polyfill';
 import { jsdom } from 'jsdom';
 import Enzyme from 'enzyme';
-import Adapter from 'enzyme-adapter-react-15';
+import Adapter from 'enzyme-adapter-react-16';

 Enzyme.configure({ adapter: new Adapter() });

@ -9,7 +11,3 @@ const documentHTML = '<!doctype html><html><body><div id="root"></div></body></h
 global.document = jsdom(documentHTML);
 global.window = document.defaultView;
 global.navigator = global.window.navigator;
-
-global.requestAnimationFrame = global.requestAnimationFrame || function requestAnimationFrame(cb) {
-  return setTimeout(cb, 0);
-};