关于React版本升级可⾏性的考察
项⽬背景：项⽬初期为了兼容IE8，采⽤react版本较低（0.14），本⽂针对兼容性要求调整到IE9及以上，后对React升级可⾏性的考察
⼀、React浏览器⽀持
官⽅说明
1.浏览器⽀持
React ⽀持所有的现代浏览器，包括 IE9 及以上版本，但是需要为旧版浏览器⽐如 IE9 和 IE10 引⼊。
注意：
我们不⽀持那些不兼容 ES5 ⽅法的旧版浏览器（IE8基本不⽀持ES5），但如果你的应⽤包含了 polyfill，例如你可能会发现你的应⽤仍然可以在这些浏览器中正常运⾏。但是如果你选择这种⽅法，你便需要孤军奋战了。
JavaScript 环境要求
React 16 依赖集合类型和。如果你要⽀持⽆法原⽣提供这些能⼒（例如 IE < 11）或实现不规范（例如 IE 11）的旧浏览器与设备，考虑在你的应⽤库中包含⼀个全局的 polyfill ，例如或。
React 同时还依赖于requestAnimationFrame（甚⾄包括测试环境）。你可以使⽤的 package 增添requestAnimationFrame的 shim
参考：
ES6 + Webpack + React + Babel 如何在低版本浏览器上愉快的玩耍（下）
ES6 + Webpack + React + Babel 如何在低版本浏览器上愉快的玩耍（上）
⼆、升级环境准备
1.babel-loader使⽤7.0版本
2.安装npm-check-updates 模块升级插件
npm install -g npm-check-updates // 或者 cnpm install -g npm-check-updates
// 查看所有更新
ncu
// 更新package.json⽂件
ncu –u
// 安装更新
npm install
npm update，只能按照package.json中标注的版本号进⾏更新，升级后不会修改package.json中的版本号，需要⾃⼰⼿动修改，⽐较⿇烦。npm-check-updates 升级插件升级后会⾃动修改package.json⾥的版本号，简单⽅便。
官⽹：
3.IE低版本⽀持相关包去掉
export-from-ie8
es3ify-loader
三、升级修改
1.webpack升级修改
官⽅⽂档：
主要内容：
(1)    安装webpack-cli
(2)    module.loaders 改为 module.rules
(3)    webpack v4 中extract-text-webpack-plugin 改为mini-css-extract-plugin instead
(1) React. PropTypes  改为 import PropTypes from 'prop-types';
量很⼤
(2) componentWillReceiveProps 更名
报错内容：
Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See fb.me/react-async-component-lifecycle-hooks for details.
修改原则：
1. 如果你需要执⾏副作⽤（例如，数据提取或动画）以响应 props 中的更改，请改⽤ componentDidUpdate ⽣命周期。
2. 如果你使⽤ componentWillReceiveProps 仅在 prop 更改时重新计算某些数据，请使⽤ memoization helper 代替。
3. 如果你使⽤ componentWillReceiveProps 是为了在 prop 更改时“重置”某些 state，请考虑使组件完全受控或使⽤ key 使组件完全不受
控代替。
说明：
有使⽤该⽅法处理逻辑的地⽅，需要详细处理⽅案
可以使⽤ rename-unsafe-lifecycles⾃动更新组件。具体修改⽅式见官⽹说明：
(3) componentWillMount更名
报错内容：
react-dom.development.js:11494 Warning: componentWillMount has been renamed, and is not recommended for use. See
fb.me/react-async-component-lifecycle-hooks for details.
修改原则：
1. 使⽤ constructor() 来初始化 state。
2. 避免在此⽅法中引⼊任何副作⽤或订阅。如遇此种情况，请改⽤ componentDidMount()。
现状：
有接⼝调⽤获取数据等处理
具体修改⽅式见官⽹说明：
(4) ⾃定义的事件被忽略
Warning: Unknown event handler property `onInputChange`. It will be ignored.
(5) 不要将组件的属性, 传给DOM节点
Warning: React does not recognize the `errorInfos` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `errorinfos` instead. If you accidentally passed it from a parent component, remove it from the DOM element.本条改完，(4)中⼤部分可同时消除
3.antd升级
(1) 全局公共样式
⽐如，下列样式去掉
article, aside, blockquote, body, button, code, dd, details, div, dl, dt,
fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6,
header, hgroup, hr, input, legend, li, menu, nav, ol, p, pre, section, td, textarea, th, ul{
margin: 0;
padding: 0;
}
4.参考⽂章
react技术栈升级的过程
第⼀阶段：
react15+react-router2+redux3+webpack1
升级到
react16+react-router3+redux4+webpack4
在react16中去除contextTypes ，导致uter.push('/*') 需要替换成uter.push('/*') 。
2.webpack1升级到4遇到的坑：
（1）webpack4 中建议使⽤min-css-extract-plugin 分离css，sass等⽂件，取代插件extract-text-webpack-plugin 效率更⾼
（2）html-webpack-plugin 要升级到2.22.0及以上
（3）webpack4将webpack.optimize.CommonsChunkPlugin移除，使⽤和entry平级的optimization⾥的属性splitChunks来把提取出来的样式和common.js会⾃动添加进发布模式的html⽂件中，原来的html⽂件中没有，前提必须是mode=prodution 才⽣效。
（4）webpack4中把内置的webpack.DefinePlugin({'v':{NODE_ENV:JSON.stringify("development")}})去掉，添加了和entry 平级的mode属性，来区分环境。mode的value有none/development/production 这3中属性，若要在系统中使⽤，则
⽤"v.NODE_ENV"变量来获取，⽐较奇葩。
（5）entry的路径原来solve(__dirname)),'src')，'app')应替换为相对路径
的'./src/App.jsx'。
（6）output的路径原来的solve(__dirname),"dist")应替换为path.join(path.join(__dirname),"dist")。
四、兼容
1.IE11
a) babel-polyfill
安装
npm i babel-polyfill --save-dev
引⽤
在./src/index.js中加⼊
import 'babel-polyfill';
webpack配置
entry: {
app: [
'babel-polyfill',
path.join(__dirname, '../src/index.js')
]
},
2.IE9
特别注意⽂件上传等功能
React16和Antd如何在IE9环境下忍辱偷⽣
IE9引发的⾎案-如何处理webpack打包后体积依然过⼤的css⽂件
IE10、IE9在线兼容⼯具
五、项⽬关联
公共组件需要升级版本
1.webpack4中的mode
公共组件始终使⽤production
六、组件⽂档
基础库，将组件注释转化为json数据
带样式和界⾯的⽂档⼯具
七、组件开发测试⼯具
1.Carte Blanche
只有beta版本，2016年后停⽌维护
官⽹：
官⽹：
b) 添加依赖项
npm install @storybook/react --save-dev
注意：安装前需要确保项⽬包含react，react-dom，@babel/core，和babel-loader依赖，如果项⽬中没有，需要额外安装
c) 添加npm脚本
将以下NPM脚本添加到package.json，以便启动storybook：
{
"scripts": {
"storybook": "start-storybook"
}
}
d) 配置⽂件
创建⼀个.storybook/config.js（windows下输⼊”.storybook.”创建名为.storybook的⽬录）包含以下内容的⽂件：import { configure } from '@storybook/react';
t('../src', true, /\.stories\.js$/), module);
这将加载../src⽬录下与模式匹配的所有故事*.stories.js。我们建议您将故事与源⽂件放在同⼀位置，但是您可以将它们放置在任意位置。
e) 写⽤户故事
创建./src/index.stories.js⽂件，并写下您的第⼀个故事：
import React from 'react';
import { Button } from '@storybook/react/demo';
export default { title: 'Button' };
export const withText = () => <Button>Hello Button</Button>;
export const withEmoji = () => (
<Button><span role="img" aria-label="so cool">aaaaa</span></Button>
);
f) 运⾏
执⾏以下命令启动storybook
npm run storybook
g) 问题
组件中⽂件引⼊路径使⽤webpack中alias的⽆法识别
⼋、附录
1. 组件化思考
前端 UI组件化的⼀些思考
2. ucWeb中package.json
{
"name": "glodon-jf",
"version": "1.0.0",
"description": "glodon-jf",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev-build": "webpack --config build/fig.js",
"start": "webpack-dev-server --config build/fig.js --color --progress --hot",    "test-build": "webpack --config st.config.js --progress",
"release-build": "webpack --config fig.js --progress",
"product-build": "webpack --config build/fig.js --progress"
},
"keywords": [
"react",
"react-router",
"webpack",
"es6",
"react-family",
"ie8"
],
"browserslist": [
"last 2 versions",
"> 0.01%",
"ie > 7"
],
"author": "brickspert",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^9.6.1",
"babel-core": "^6.26.3",
"babel-eslint": "^10.0.3",
"babel-loader": "^7.0.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-polyfill": "^6.26.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"bower-webpack-plugin": "^0.1.9",
"bundle-loader": "^0.5.6",
"clean-webpack-plugin": "^3.0.0",
"console-polyfill": "^0.3.0",
"css-loader": "^3.2.0",
"eslint": "^6.4.0",
"eslint-loader": "^3.0.0",
"eslint-plugin-react": "^7.14.3",
"eventsource-polyfill": "^0.9.6",
"extract-text-webpack-plugin": "3.0.2",
"fetch-ie8": "^1.5.0",
"file-loader": "^4.2.0",
"html-webpack-plugin": "^3.2.0",
"html-withimg-loader": "^0.1.16",
"less": "^3.10.3",
"less-loader": "^5.0.0",
"node-sass": "^4.12.0",
"open-browser-webpack-plugin": "^0.0.5",
"postcss-cssnext": "^3.1.0",
"postcss-loader": "^3.0.0",
"react-hot-loader": "^4.12.13",
"redux-devtools": "^3.5.0",
"redux-logger": "^3.0.6",
reacthooks理解

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。