react function realization - component creation

Here mainly from two perspectives to analyze how to create a component needs to do, one element is a data consolidation to a large number of reference, non-original.

1. Rendering components.

Let's be clear, all of the elements must be rendered by the render method outputs all, each component class must ultimately be output through the render.

2. Create components.

There are three ways to create components:

(1) the function is defined 无状态组件.

function HelloComponent(props, /* context */) {
  return <div>Hello {props.name}</div>
}
ReactDOM.render(<HelloComponent name="Sebastian" />,document.getElementById("mountNode"))

(2) es5 natively React.createClassdefined components

var InputControlES5 = React.createClass({
 
    render: function() {
        return (
            
        );
    }
});

(3) es6 form extends React.Componentdefined components

class InputControlES6 extends React.Component {

    render() {
        return (
            
        );
    }
}

Probably the difference in three ways:

a: The first creation of the state assembly, is only responsible for rendering the value passed, but the state itself is not changed to say while the other two are stateful.

b: React.createClassand extends React.Componentdifferences there are four major aspects.

The former automatically bind this all functions, which require manual binding.

To set the default configuration is not the same.

Set the initial state is not the same.

The former support Mixins, which is not supported.

Currently more official support extends React.Component, so I chose the next extends React.Componentas created.

3. The component data.

This data category is actually particularly large, but this article to use the main, so I will divide it into two aspects, not deliberately start, not specifically discussed. One is the state of the external and internal incoming this.props this.state.

(1)this.state

We assume a scenario, if there is a button, is now red, and then click to turn black, and then click to change it back. Then how do we do?

Judgment is not red, it is, click on the black. Similarly, the red too.

Then how do we judge?

Require a variable, a value is red, black is another value to change the color of the button and then based on this variable.

This variable is what?

this.state

how to use?

initialization

class Button extends React.Component {
constructor(props) { 
//构造函数初始化this.props
 super(props); 
// 设置color的初始值
this.state = {
 color: red;
 };

    render() {
        return (
            <div className="colorButton">Hello</div>
        );
    }
}

Change state

After you must call setState () to modify the state, because with the setState () when the value this.state changes will call render () again to re-render elements from the visual to see the results.

this.setState({color:black})

Click recombination event

the Button class the extends React.Component { 
ColorChange ( Color ) { Color Red this.setState == ({Color: Black}): this.setState ({Color: Red});? }
     the render () { 
        return ( // preceded I said, this way need to manually create components of this binding function, and this is one way to bind 
            <div className = {this.state.color == Red "redBg":? "blackBg"} > the Hello </ div> 
        ); 
    } 
}
constructor(props) { 
//构造函数初始化this.props
 super(props); 
// 设置color的初始值
this.state = {
 color: red;
 };
//点击事件


    onClick={this.colorChange(this.state.color).bind(this)}

So far, we have the components according to their status (this.state.color) to show the effect of different functions.

(2)this.props

So far, we can see this.state is an internal component of its own state, it can. But so far we do not receive data from the outside world, for example, the button inside the content is not written in the dead of the components inside the initialization and modification, but to the outside world, the boss says you can not just write "hello", but I'll give you what you show, so we need to receive content to be displayed from the outside world. here we need a channel.

We come to know the components used.

Entrance:

// import components, note the component name must start with a capital letter
 import Button from "path" 
// here in custom component can pass the internal components in the form of attribute names and values, also known as the entrance. All properties attribute value is automatically added to the internal components may get in this.props 
ReactDOM.render (<the Button text = "hello" /> document.getElementById("mountNode"))

Export:

{React.Component the extends the Button class 
constructor (The props) { 
// constructor initializes this.props 
Super (The props); 
 // set the color of the initial value of 
the this .STATE = { 
 color: Red; 
 }; 
// click event 
ColorChange (color ) { 
Color == Red? the this .setState ({Color: Black}): the this .setState ({Color: Red}); 
 } 
    the render () { 
// get the value of what we want from this.props in
 const {text = this.props};
         return (
     // before have said, this approach requires manual creation of components of this binding function, which is one use of our binding get value 
            <className = {div this.state.color==red?"redBg":"blackBg"} onClick={this.colorChange(this.state.color).bind(this)}>{text}</div>
        );
    }
}

Such a channel is a complete intermediate borrow this.props different components in series to accomplish the transfer of data. Of course, the components can be nested in the same way to achieve transfer of data, transmitted in the form of a subassembly properties to his own sub-assemblies.

This is a basic function of complete primary component, of course, it comes to pass values across components, like the incoming verification function for the time being not to mention, at least now we can make a component here.

react function realization - component creation

Guess you like