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

Source: Internet
Author: User
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).

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.