React Component Development

Directory:

1. Property: Props
2. inline style
3. Status Memory: State
4. Life cycle
5. Accessing the DOM
6. Form input

Quick Start article: http://www.cnblogs.com/jasonnode/p/4444504.html

Property: Props

Components should provide properties that allow developers to adjust the behavior of component instance elements in different scenarios, which can improve the efficiency of component utilization.

In react, the properties of an instance element are accessed using the props field.

For example, in the following jsx fragment, an instance element of the Ezlampcomp component has an attribute OnOff:

1.  
   React.render( <ezlampcomp onoff="off"></ezlampcomp> ,
   document.querySelector("#content"));
   

So in the implementation of the Ezlampcomp component, we can access this property through the props field and set its style class based on the property value.

In Jsx, we can also assign a JavaScript expression to the attributes of the react element, and use a pair of curly braces instead of the quotation marks:

1.  
   var myOnoff = "on";
   React.render( <ezlampcomp onoff="{myOnoff}"></ezlampcomp>,
   document.querySelector("#content"));
   

   
   

If you find it difficult to understand, then we convert the JSX code above into javascript:

1.  
   var myOnoff = "on";
   React.render(
   React.createElement(
   EzLampComp,
   {
   onoff : myOnoff
   }),
   document.querySelector("#content"));
   

   
   

inline style

In the previous example, we always use style classes whenever we need to set the style of an element. But sometimes we do need to declare inline styles directly on elements, just like in HTML:

1. //html <  style= "width:200px;height:200px;" ></ Div >

   
   

To declare a style in the react element, you need to give a JSON object whose field corresponds to the style name, for example, to render the above HTML fragment, as needed:

1.  
   var myStyle = {
   width:"200px",
   height:"200px" }; //JSX var e = <div style="{myStyle}"></div>; //JavaScript var e = React.createElement( "div",{
   style : myStyle
   }); //render React.render(e,...);
   

   
   

• Note 1-fields that correspond to style names need to be named with Camel

For example: The Border-radius style needs to be accessed using Borderradius, and the background-image style needs to be accessed using BackgroundImage.

• Note 2-The vendor prefix in the style name requires a capital letter except MS

For the vendor prefix (-webkit,-moz,-O,-ms), the first letter is capitalized in addition to Ms. For example:-webkit-transition should be accessed through webkittransition, but-ms-transition need to be accessed through mstransition.

Status Memory: State

In many cases, the appearance and behavior of a component instance can be customized by using the props variable. Such a component we call a stateless/stateless component, because at any given moment, the performance of a component instance depends only on the externally passed-in props property, which has nothing to do with its own performance, that is, it has no memory of its own.

Having a component with memory means not only reacting to stimuli from the outside world (by props incoming data, or user interaction events), but also by reacting to the same stimuli in its own state.

For example, the toggle switch, which can respond to the user's Click event, if the current state is off, then it will switch to the open state (showing the open picture), and if the current state is open, then it switches to the state of the off (show off the state of the picture):

Now think about it, can you implement this toggle switch using props?

The react component does introduce the concept of a state machine, by dividing the components into different states, so that the components have a certain memory capability:

• State-Status variables for the component

Each react component instance has a state variable that is used to hold the current status of the component. You can use This.state to read the current state at any time.

• Getinitialstate ()-Sets the initial state of the component

The implementation of the component should implement a Getinitialstate () method to set the initial state of the component. The Getinitialstate () method must return a JSON object or null value NULL, which means that even if you only need a simple flag as a state, such as true or false, put it in a JSON object.

• SetState (CurrentState)-Sets the current state of the component

Although you can use This.state to directly set the current state of the component, react requires that we use the SetState () method to set the state. This is because the SetState () method automatically re-renders the component, which is usually what we expect.

The parameter currentstate is a JSON object that does not have to contain all the fields of the state variable, and the SetState () method merges the parameter value with the current state this.sate, and the result is the new value of the state variable.

Life cycle

During the entire cycle of a component instance, react invokes the following methods at a specific point in time:

• Componentwillmount ()-Called when a component instance is about to be hooked (first rendered)

This method is only called once throughout the life cycle.

• Componentdidmount ()-Called when a component instance is hooked (first rendered)

This method is only called once throughout the life cycle.

• Componentwillreceiveprops (Nextprops)-called when a component instance is about to set a new property

The parameter nextprops represents the new property value that will be applied to the component instance.

This method is not called when it is first rendered. Calling SetState () within this method does not cause a re-rendering.

• Shouldcomponentupdate (Nextprops, nextstate)-called when a component instance is about to be re-rendered

The parameter Nextprops incoming new property value that will be applied to the component instance, and the parameter nextstate the state value that the incoming component instance is about to be set. If this method returns false, then the component instance will not be re-rendered. This method should return true unless we explicitly know that the new attribute and state do not need to be re-rendered.

This method is not called when rendering at first or through the ForceUpdate () method.

• Componentwillupdate (Nextprops, nextstate)-called when a component instance is about to be re-rendered

This method is not called when it is first rendered. Note: SetState () cannot be called within this method.

• Componentdidupdate (Prevprops, prevstate)-called when the component instance is re-rendered

This method is not called when it is first rendered.

• Componentwillunmount ()-Called when a component instance is about to be removed from the DOM tree

This method is only called once throughout the life cycle.

Accessing the DOM

In react, it is sometimes necessary to directly access the DOM object corresponding to the react element, such as reading the user's input. This requires a two-step process:

• Set the ref attribute of the REACT element

If you need to access the DOM object of a REACT element in your code, you first need to set the ref attribute of the react element.

For example, we need to read the value of the text input box, so we first specify the ref attribute for this INPUT element:

1. //JSX <  type= "text"  defaultvalue= "Beijing"  ref= "Q"  Placeholder= "Please enter the city pinyin, such as: Beijing">

After declaring the ref attribute of the react element, you can access the component through the This.refs object, such as the example above: this.refs.q points to the input Component object, you should have noticed that we set the value of the ref attribute for the REACT element, This is used here as the key value for the This.refs object.

• Get DOM Object

After you set the ref attribute of the react element, you can use the React.finddomnode () method to get the corresponding DOM object:

1. React. Finddomnode(component)

The parameter component is a react Component object, which we can get through the This.refs object as described earlier.

If the react element is already rendered to the DOM tree, the Finddomnode () method returns the DOM node object corresponding to the Component object, which can then be manipulated using the standard DOM API.

Form input

In react, form input elements such as input, textarea, option, and so on, require special attention compared to other standard HTML elements:

• Text input Box

Do not use the Value property to set the initial value of a text input box element, you should use DefaultValue:

1. //JSX <  type= "text"  defaultvalue= "Demo">

• Check button

Do not use the Checked property to set the Check button's initial selection state, you should use defaultchecked:

1. //JSX <  type= "checkbox"  defaultchecked= "">

• radio Button Group

Do not use the selected property of the option element to set the initial selected state of a radio button group, you should use the DefaultValue of the Select element:

//JSX
<select defaultvalue="A">
<option value="A">China</option>
<option value="B">India</option>
<option value="C">Japan</option>
</select>

Add a selection box in the sample code that you want to log into the system so that it looks like this:

Optional systems are: OA, finance, human resources. Human resources is selected by default.

React Component Development