Talk about react some of the play (on: Tools) _react

1. Simplifying the wording

When we write the react component, we refer to the official document, one to declare state, two to bind the function of this, the general writing is as follows:

Class DEMO extends React.component {
    constructor () {
        super ();
        This.state = {
            count:0
        };
        This.kick = This.kick.bind (this);
    }

    Render () {return
        <div>
            <button onclick={this.kick}> click on him. </button>
            you have clicked {This.state.count} times.
        </div>;
    }

    Kick () {
        this.setstate ({
            count:this.state.count + 1
        });
    }

However, this kind of writing is very troublesome, grey often troublesome, but I have the solution, the writing is as follows:

Class DEMO extends React.component {state
    = {
        count:0
    };

    Render () {return
        <div>
            <button onclick={this.kick}> click on him. </button>
            you have clicked {This.state.count} times.
        </div>;
    }

    Kick = () => {
        this.setstate ({
            count:this.state.count + 1
        });
    }

Effects: eliminates the hassle of writing constructors, and directly declares that it is more intuitive under class; eliminates the extra operation of write bind, reducing the likelihood of bugs being caused by forgetting to write bind;

The core changes are two points: state does not declare in constructor, but writes directly in class, which is a new feature, but does not need to worry, Babel can recognize and convert it to ES5 code; The function is declared by the arrow function, because this of the arrow function is bound to his The scope of the declaration, so no additional binding () is required to bind to this.

Implementation: The core implementation is achieved through the Babel, the implementation of the way can refer to my description of the Babel-loader, click to visit 5.2, support the new features; The above methods do not need to be familiar with the webpack, in the case of the Webpack project, Just follow the instructions, it's very simple (install a NPM package, add one line to the configuration file); If you can, please give my GitHub a star, thank you. Sample demo project; 2, the introduction of react resources through CDN

Although react package, and not small, but for us, is not necessary to directly package into our JS code, the use of CDN is a better choice.

For example, such as the above code, if we use the general packaging, react and react-dom packaged into our JS file, the size of the file after the package is:

App.js        /MB
vendor.js        //KB

After the introduction of the react through CDN, the JS size after our packing will be:

App.js        //MB
vendor.js        //8 KB

The size gap between KB is the size of the 2 react and react-dom packages.

Specific practices:

First, in the Webpack.config.js (that is, the Webpack configuration file), add an additional attribute to the exported Webpack configuration attribute:

Externals: {"
    react": "React",
    "React-dom": "Reactdom"
}

Second, in the HTML template file, the CDN is introduced, and the following two lines are inserted into the head tag.

In the example, is the index.html file, which is configured in Webpack through the Html-webpack-plugin plug-in.

<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>

And then it's done.

For the principle, please refer to my blog 9, external extension (externals).