REACT learning experience three: Component Comments

table of Contents

 

One: one of the components of the three attributes: props property

1: Each component object has properties props (blank by default)

2: All the components inside the tag attributes are present in props (a particular example, default attributes are passed in props)

3: Internal read a value of: this.props.propsname

4: attribute tag transmitted through to the inner component from the outer component (read only)

5: The default value of the component props:

6: Set Properties props necessity and the type of data (need to import library ())

7: Nested Components

 Two: refs properties of the three components

1) refs property

1: Label components can be defined within the ref attribute to identify themselves

2: the real component may be obtained through the DOM object this.refs.refName

3: Role: dom element ref attribute specified by the object operation (mostly form tag)

2): Event Processing:

1: onXxx event handler through attribute specified component

       1: React by custom (synthetic) event, rather than using the DOM events

       2: Note: In the custom in this method we specify points null, an object point to an instance method of an object built

3: event.target: Object Gets the element itself 

Three: state of the three components of the property

1: component state machine is called, to update the display of the corresponding page status value by updating component (re-rendering)

2: initialization state

3: read a status value: this.state.statepropeName

4: update status -------> Component Interface updates

Four: the controlled components;

1: Recat is a unidirectional data flow, but can be customized bi-directional data flow component

2: Case:

Five: the life cycle of components;

1: Life Cycle chart;

1: Initialize Rendering - "construction method -" method performed when the component is to be mounted - "Render render-" perform a complete assembly mounted method

2: In addition to the above-described method of Reder () is executed once

3: Before the component rendering execution method, transmission ajax user request, starts a timer.

4: The method of assembly is modified plus the execution order;

5: Include file execution order of destruction method;

Six: Virtual DOMDiff algorithms: minimum page redrawn. 

---

One: one of the components of the three attributes: props property

1: Each component object has properties props (blank by default)

2: All the components inside the tag attributes are present in props (a particular example, default attributes are passed in props)

3: Internal read a value of: this.props.propsname

4: attribute tag transmitted through to the inner component from the outer component (read only)

Factory function with parameter declaration:

5: The default value of the component props:

6: Set Properties props necessity and the type of data (need to import library ())

7: Nested Components

Nested components: component properties is the use of continuous transmission parameters

 Two: refs properties of the three components

1) refs property

1: Label components can be defined within the ref attribute to identify themselves

2: the real component may be obtained through the DOM object this.refs.refName

3: Role: dom element ref attribute specified by the object operation (mostly form tag)

        <input ref = 'username'></input>

         this.refs.username: return to input objects

2): Event Processing:

1: onXxx event handler through attribute specified component

       1: React by custom (synthetic) event, rather than using the DOM events

                  React event is processed (entrusted to the outermost element assembly) by way of commission

       2: Note: In the custom in this method we specify points null, an object point to an instance method of an object built

               Must have an end tag in the tag render

The solution: mandatory binding;

1: Binding Constructor

3: event.target: Object Gets the element itself 

 

Three: state of the three components of the property

1: component state machine is called, to update the display of the corresponding page status value by updating component (re-rendering)

2: initialization state

constructor(props){

super(props);

this.state={

stateProp1:value1

};

}

3: read a status value: this.state.statepropeName

4: update status -------> Component Interface updates

this.setState({

stateProp1:value1

});

Case:

Four: the controlled components;

1: Recat is a unidirectional data flow, but can be customized bi-directional data flow component

2: Case:

 

Five: the life cycle of components;

1: Life Cycle chart;

1: Initialize Rendering - "construction method -" method performed when the component is to be mounted - "Render render-" perform a complete assembly mounted method

2: In addition to the above-described method of Reder () is executed once

3: Before the component rendering execution method, transmission ajax user request, starts a timer.

4: The method of assembly is modified plus the execution order;

5: Include file execution order of destruction method;

 

Six: Virtual DOMDiff algorithms: minimum page redrawn. 

Where the change, where change him. Do not get no change.