react 并不推荐在原型上扩展 React.Component.prototype.$store = $store; react 是更纯粹的，函数式的。HOC的模式 将你的方法挂载到prototype是非常不纯的操作。 React获取组件实例 1. 直接new Component() 组件本身也是class，可以new，这样的组件实例意义不大 componentInstance = new Component(); 2. ReactDOM.render返回组件实例(React新版本已失效，返回null) componentInstance = ReactDOM.render(<Component />, div); 3. ref回调函数返回组件实例(React新版本可用) let componentInstance; ReactDOM.render(<Component ref={(com) => componentInstance = com} />，div>) // 1. 这两个导入时候，接收的成员名称，必须这么写 import React from 'react' // 创建组件、虚拟dom元素，生命周期 import{render } from 'react-dom' // 把创建好的组件和虚拟dom放到页面上展示的 // import App from "./app/view" import Demo from './app/view/demo' setTimeout(() =>{window.webview = React.createElement(Demo,{name: 'demo' }); console.log('212') }, 3000) let ro = class extends React.Component{// states ={a: 1 }; constructor(props){super(props) this.state ={a: 1 } this.count = 0; window.ele = this} render(){return (<div>Ro</div>) } } function _interopRequireDefault(obj){return obj && obj.__esModule ? obj :{default: obj }} const react = _interopRequireDefault(React); console.log(react.default.Component) render(){return Children.only(this.props.children) } var children = this.props.children; _react2.default.Children.forEach(children, function (element){if (match == null && _react2.default.isValidElement(element)){var _element$props = element.props, pathProp = _element$props.path, exact = _element$props.exact, strict = _element$props.strict, sensitive = _element$props.sensitive, from = _element$props.from; var path = pathProp || from; child = element; match = (0, _matchPath2.default)(location.pathname,{path: path, exact: exact, strict: strict, sensitive: sensitive }, route.match)} }); return match ? _react2.default.cloneElement(child,{location: location, computedMatch: match }) : null; this.button = new Button({children: buttonText, color: 'blue' }); this.el.appendChild(this.button.el); this.button.attrs.children = buttonText; this.button.render(); this.el.removeChild(this.button.el); this.button.destroy(); console.log(ro); window.root = React.createElement(ro,{name: 'e' }, window.webview); class RootElement extends React.Component{constructor(props){super(props); window.rootEle = this; this.count = 0} render(){console.log(this.count++) return window.rootE ? React.Children.only(window.rootE) : react.default.cloneElement(React.createElement(Demo,{name: 'demo' })) } } window.RootElement = RootElement; console.log(RootElement) console.log(react.default.Component) const C = react.default.Component; setTimeout(() =>{window.rootE = React.createElement(ro,{name: 'e' }); rootEle.setState({update: true }) }, 4000) const r = new RootElement(); render(<RootElement></RootElement>, document.getElementById('root')); 

 安装babel-loader、babel-core、babel-preset-env 这三个文件都是必需的，但彼此的作用各不相同。 首先，babel-loader作为webpack的loader的一种，作用同其他loader一样，实现对特定文件类型的处理。webpack官方文档中指出了loader的作用，即： loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack的打包能力，对它们进行处理。 虽然webpack本身就能够处理.js文件，但无法对ES2015+的语法进行转换，babel-loader的作用正是实现对使用了ES2015+语法的.js文件进行处理。 要使用babel，首先要安装babel-loader，命令行中定位到项目根目录输入以下指令进行安装： npm install -D babel-loader 1 笔者这里安装完成后显示版本是[email protected]。 第二，babel-core的作用在于提供一系列api。这便是说，当webpack使用babel-loader处理文件时，babel-loader实际上调用了babel-core的api，因此也必须安装babel-core： npm install -D babel-core 1 笔者安装完成显示版本为[email protected]。 第三，babel-preset-env的作用是告诉babel使用哪种转码规则进行文件处理。事实上，babel有几种规则都可以实现对ES6语法的转码，如babel-preset-es2015、babel-preset-latest、babel-preset-env，不过官方现已建议采用babel-preset-env，本文也将采用babel-preset-env，你可以通过官网了解几种规则的区别。同样在命令行中定位到项目根目录，输入以下指令进行安装： npm install -D babel-preset-env 1 笔者安装的版本是[email protected]。 二、配置babel 规则 上面仅仅是安装了三个包，如果要使babel起作用，便需要配置babel规则。 第一种方式是通过package.json。在package.json文件中增加一个“babel"属性，该属性是一个JSON对象，作用是设置项目中的babel转码规则和使用到的babel插件，其基本格式如下： "babel":{"presets": [], "plugins": [] } ”presets”属性字段设定转码规则，”plugins”属性设置使用到的插件。在本项目中只需将”babel”属性 的”presets”:设置为[“env”]即可，如下所示： "babel":{"presets": ["env"] } 上面的设置告诉npm本项目将使用babel，并且使用bable-preset-env规则进行转码，即实现对ES2015+语法进行转码。 除此之外，还有第二种方式，即通过.babelrc文件。在项目根目录下新建.babelrc文件，里面只需输入第一种方式中”babel”属性的值即可：{"presets": ["env"] } 作用和第一种方式相同。 三、建立并配置webpack.config.js文件 仅有上面仍然不能起作用，虽然上面已经配置好babel的规则，但webpack仍然不知道何时使用该规则，这便需要使用webpack.config.js文件。 这个文件的作用是对webpack打包的参数进行配置。我的第一篇关于webpack4.x的文章《webpack4.x开发环境配置》中已经提到，webpack4.x中webpack.config.js这样的配置文件不是必须的，但事实上，如果想要进行更加个性化的打包配置，仍然要使用该文件。在根目录下新建webpack.config.js文件，在其中输入： module.exports={module:{rules:[{test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" } ] } } 这就告诉webpack打包时，一旦匹配到.js文件就使用babel-loader进行处理，如前文所述，babel-loader调用babel-core的api使用bable-preset-env的规则进行转码。这里并没有使用entry、output这样的参数，这是webpack4.x有默认的入口和出口，本项目无须改变，因此便不必进行设置。 四、运行查看结果 假使你已经在package.json文件的"scripts"属性下增加了"build"属性，即 "build": "webpack --mode production --progress --display-modules --colors --display-reasons" 

"@babel/core": "^7.0.0", "@babel/plugin-proposal-class-properties": "^7.0.0", "@babel/plugin-proposal-decorators": "^7.1.2", "@babel/plugin-proposal-export-default-from": "^7.0.0", "@babel/plugin-proposal-export-namespace-from": "^7.0.0", "@babel/plugin-proposal-function-sent": "^7.0.0", "@babel/plugin-proposal-json-strings": "^7.0.0", "@babel/plugin-proposal-numeric-separator": "^7.0.0", "@babel/plugin-proposal-throw-expressions": "^7.0.0", "@babel/plugin-syntax-dynamic-import": "^7.0.0", "@babel/plugin-syntax-import-meta": "^7.0.0", "@babel/plugin-transform-modules-commonjs": "^7.1.0", "@babel/plugin-transform-runtime": "^7.0.0", "@babel/polyfill": "^7.0.0", "@babel/preset-env": "^7.0.0", "@babel/preset-react": "^7.0.0", "@babel/runtime": "^7.1.5", "@babel/runtime-corejs2": "^7.1.5", "babel-loader": "^8.0.0", 

而 import/export 的写法就多种多样：import fs from 'fs' import{default as fs} from 'fs' import * as fs from 'fs' import{readFile} from 'fs' import{readFile as read} from 'fs' import fs,{readFile} from 'fs' export default fs export const fs export function readFile export{readFile, read} export * from 'fs' 

babel7中 preset-env 完全使用 const presets = [ ['@babel/env',{// chrome, opera, edge, firefox, safari, ie, ios, android, node, electron // targets 和 browerslist 合并取最低版本 targets:{ie: 8, // 是否使用 esmodules esmodules: true, }, // 启用更符合规范的转换，但速度会更慢，默认为 `false`，从目前来看，是更严格的转化，包括一些代码检查。 spec: false, // 有两种模式：normal, loose。其中 normal 更接近 es6 loose 更接近 es5 loose: false, // "amd" | "umd" | "systemjs" | "commonjs" | "cjs" | false, defaults to "commonjs" modules: false, // 打印插件使用情况 debug: true, // 按需增加移除一些功能 // include: [], // exclude: [], // 增加 polyfills // 按需使用 // useBuiltIns: 'usage', // 引用一次 // useBuiltIns: 'entry', // 不引用，独自使用 // useBuiltIns: false, // 强制使用所有的插件 // forceAllTransforms: false, // 配置 browerslist 的位置 // configPath: , // 配置是否忽略 browerslist 文件 // ignoreBrowserslistConfig: false, // 是否跳过 proposal 的文件 // shippedProposals: false, }] ]; const plugins = [ [ // 重用把 babel 注入的帮助代码， 依赖 @babel/runtime "@babel/plugin-transform-runtime",{// false || 2, 变成全局或者局部 "corejs": false, // 生成器运行时的使用，变成全局或者局部 "regenerator": true, // 帮助函数是变成 inline, 还是 lib "helpers": true, // helpers 切换成 esm "useESModules": true } ] ]; module.exports ={presets, plugins }; 

@babel/plugin-proposal-class-properties 箭头函数在class字段中直接绑定this @babel/plugin-transform-object-assign Object.assign @babel/plugin-transform-proto-to-assign bar.__proto__ ={} @babel/runtime 避免编译输出中的重复 @babel/preset-react 转换React JSX 语法 Babel 7 1,stage-x插件的废弃 2 es2015 插件 -> env 插件 babel-upgrade 这个工具的本质其实就是把之前的es2015换成env，stage-x换成各种proposal-xxx，并且加上了@babel作为新的Babel 7生态统一使用的scope。如果之前的项目使用了stage-x插件，就会多出大量的插件，其实这里面大部分插件都是无需使用的，你可以根据项目中用到的特性适当删减。