React Notes _ (6) _react Syntax 5

Version of React

At present, the main react have es5,es6. There are also ES5 and ES6 mixes written. More chaotic.

React officially advocates the use of ES6.

Speaking of which, we need to mention a concept--mixin

Mixin was abandoned in the ES6.

Mixin

In short, it is part of the common code, extracted as a separate block of wood,

Use it in a mixed way. This is mixin.

ES5 inside, declare a mixin singleton object, directly to the array to plug in the use of the component;

ES6 does not advocate such a notation, but rather uses higher-order components.

High-order components:

is to throw a class into another class (The decorated Class) as a parameter,

Add a little something to the previous class in this class, and then return back,

is equal to the enhancement of the function modification of the previous class.

Oh. Concept good trouble. Let's see how the code is implemented.

First explain the realization of the idea.

1. We use the arrow function to throw the component class as a parameter. 2. Inside this function, declare a class that inherits the component class passed in. 3. Add the new properties and methods, and then return the class.

　　

Look at the implementation:

Import react,{Component} from ' React '; import Reactdom from' React-dom ';//classes to be enhancedclass MyTest extends component{constructor (props) {super (props); } render () {return(<button onclick={ This. Show.bind ( This, This. props)}>click</button>);    }}//modifier function, passing the class as a parameter. Let intervalenhance = MyComponent = {//declares an inner class. //note that this inner class cannot have a render method, otherwise it overrides the render in the original class. class Es6_mixin extends MyComponent {componentwillmount () {Console.log ("Before rendering");  This. Timer = SetInterval (function() {Console.log (' Keep printing in ... '); },500); } componentwillunmount () {Console.log ("Destroy it!" "); Clearinterval ( This. Timer);        } show (obj) {console.log (obj); }    }//return after decorationreturnes6_mixin;};varEnhancedtest =intervalenhance (MyTest); Reactdom.render (<enhancedtest myname={"Zhangwei"}/>,document.getelementbyid (' app ');//10s after destructionSetTimeout (function() {Reactdom.unmountcomponentatnode (document.getElementById ("App"));},10000);

Description

1.MyTest This class, has been enhanced by the timer function and the show () method. Finally, we use the enhanced class as the new component class to render to the page.

2.ES5 version of the Mixin object if there is the same periodic function, you can load mixin, and then load the component itself, there will be no overwrite

3. The practice of higher-order components weakens previous mixin functions.

4. The new style enhances the code's normative

Source code Description: Click here to download

React Notes _ (6) _react Syntax 5