React data transfer

React Basic Concepts

1. React is a component-based development that enables Web applications to achieve the effects of desktop applications through a combination of components.
2. React is more conducive to the development of single-page applications.
3. is not an MVC framework, only a V
4. Features with a single data stream
5. Advantage: The code reuse rate is relatively high. Virtual DOM, which reduces the real DOM operation, can improve rendering efficiency,

State Property

This.props can only get data, cannot be modified, and cannot be set.

The difference between This.props and this.state: this.state: Each component has a State property (independent property), and state has read and modify functionality. It is possible to modify the virtual DOM to the real DOM, not the ship value of the parent component to the child component. This.props: The parent component can be passed to the child component.

1. Initialize State:

1 getinitialstate:function() {2     return  {3         cnt:04    }5 }

2. Set state
3. Get the value of state

1 Count:function() {2this     . SetState ({3         this. state.cnt+14    })5},67 < label>{This .state.cnt}</label>

Input box in react cannot be modified

1 defaultvalue = {this. state.cnt}    // default value2     onchange={}                     // The event is triggered whenever the value in the input box is changed

Get the real DOM node

2. Get By property

   Add ref= "" property to the input box to get (This.refs.pwdInput.refs.input.value)

3. function methods

   Add to the input box you want to get

   1ref= {function(ele) {//Parent Component2       This. _pwd =Ele; 3}.bind ( This)}4 5ref= {function(ele) {//Sub-component6       This. _input =ele;7}.bind ( This)}8  9  //when using theTen   One   This. _pwd._input

   Also available as an arrow function ref = {(ele) =>this._input = ele} //Sub-component ref = {(ele) =>this._pwd = ele} //Parent component

Ajax

另一种Ajax提交方式：        利用promise 异步模型。nodejs内部也是使用promise模型实现的单线程异步原理。        fetch()方法，采用promise实现异步提交，没有用到XHR对象。、

The life cycle of a component

Three methods

1. Componentwillmount //Before component rendering
2. Render //component Rendering
3. Componentdidmount //After component rendering

The first and third are executed only once in the lifecycle of a component.

React data transfer