1、简化写法
我们在写 React 组件时,参考官方文档写法,一要声明 state,二要绑定函数的 this,常规写法如下:
class DEMO extends React.Component {
constructor() {
super();
this.state = {
count: 0
};
this.kick = this.kick.bind(this);
}
render() {
return <div>
<button onClick={this.kick}>点击他!</button>
你已经点击了{this.state.count}次。
</div>;
}
kick() {
this.setState({
count: this.state.count + 1
});
}
}
然而,这种写法很麻烦,灰常麻烦,但是我有解决方案,写法如下:
class DEMO extends React.Component {
state = {
count: 0
};
render() {
return <div>
<button onClick={this.kick}>点击他!</button>
你已经点击了{this.state.count}次。
</div>;
}
kick = () => {
this.setState({
count: this.state.count + 1
});
};
}
效果:
- 免去写构造函数的麻烦,并且直接声明在 class 下更加直观;
- 免去写 bind 的额外操作,减少了因为忘记写 bind 而产生 bug 的可能;
核心改动有两点:
- state 不在 constructor 里声明,而是直接在 class 里写,这种写法是一个新特性,但不需要担心,babel 可以将其识别并转换为 es5 代码;
- 函数通过箭头函数来声明,因为箭头函数的 this,绑定于他声明时的作用域,因此无需再额外通过
bind()
来绑定 this。
实现方式:
- 核心实现方式是通过 babel 来实现的;
- 具体实现方式可以参考我这篇关于
babel-loader
的说明,点击访问 5.2、支持新特性; - 以上方法无需熟悉webpack,在已有 webpack 工程的情况下,只要按说明去做就可以,非常简单(安装一个 npm 包,在配置文件添加一行配置即可);
- 如果可以的话,请顺手给我的 github 一个 star,谢谢。
- 示例DEMO项目;
2、将 React 资源通过CDN引入
虽然 React 打包后,并不大,但是对于我们,是没必要直接打包到我们的 js 代码中的,使用 CDN 是更好的选择。
举例来说,例如以上的代码,假如我们使用一般的打包方式,将 react
和 react-dom
打包到我们的 js 文件中,打包后的文件大小大约是:
app.js // 33 KB
vendor.js // 106 KB
而将 React 通过 CDN 引入后,我们打包后的 js 大小将为:
app.js // 33 KB
vendor.js // 8 KB
这之间大约 100 KB 的大小差距,就是 react
和 react-dom
这 2 个包节约下来的大小。
具体做法:
首先在 webpack.config.js
(即 webpack 的配置文件)里,给导出的 webpack 配置属性,添加一个额外属性:
externals: {
"react": "React",
"react-dom": "ReactDOM"
}
其次,在 html 模板文件里,引入 CDN ,以下两行插入 head 标签中。
在示例中,是 index.html 文件,这个是在 webpack 通过 html-webpack-plugin
插件配置的。
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
然后就搞定了。
关于原理,请参考我这一篇博客 9、外部扩展(Externals)。