3- class components

Class components

This class inherits React.Component , and has a render () function, the role of the function and that function as components function that returns a JSX .

the extends React.Component Clock {class 

  // function represents rendering the render, each call to the function to be re-rendering 

  the render () { 

    return ( 

      < div > 

        < H2 > Clock, this.props.name {} </ H2 > 

      </ div > 

    ); 

  } 

}

state

It is a set of internal components for maintenance reflected component UI state change set. state needs to be initialized in the constructor, if you want to override the constructor in the component class, the need to explicitly call the constructor in the first line of super (props)

the extends React.Component Clock {class   

  constructor (The props) {// The props parameter in the constructor, the components and functions are not the same
 
    Super (The props);     

    this.state = {       

      now: new new a Date () toLocaleString ().    

    } 

  } 

}

   1. Initialize 
        constructor (The props) { 
            Super (The props); 
            this.state = { 
                MSG: 'Hello' 
            }; 
        }

    2. Using the data state in 
        the render () { 
            return < h1 of > {this.state.msg} </ h1 of > 
        }

    3. Modify the data in the state - a state 
        this.setState ({msg: 'world' })

state characteristics

1 , can not directly modify the state

Need to call this.setState () method modified

2 , State update is asynchronous

Call setState , component state does not change immediately

The life cycle of components

componentWillMount

Called before the component is to be mounted

componentDidMount

In the assembly after being mounted call immediately, you can initialize the network request, if you call setState , then render again, but this time the rendering will take place before the browser screen is updated, users will not find the middle of the state.

componentWillUnmount

Called when the component is to be uninstalled

Event binding

Required by the components 'onXxx' to bind an event, the event handler must be enclosed in braces this is specified. Event handler should be defined in a class, and render () function at the same level

this pointer

If by es6 to define the event handler function declaration mode, then in the event handler of this is undefined . We can arrow event handler function to define the event, this time the arrow function in this point component object. Preferably function by arrows with the this , it pointing member.

Guess you like