聊聊React的一些玩法（上：工具篇）_react

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 KBvendor.js        // 106 KB

而將 React 通過 CDN 引入後，我們打包後的 js 大小將為：

app.js        // 33 KBvendor.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）。