React Study notes 2

Properties and states of the react

react data is delivered using two things:

1. Attribute (props): passed in from outside the component, within the component by this.props obtaining (innate, not easily changed)

2. State: Set or change within the component, internal to the component (the this.state state is acquired and often changed)

Attribute-specificity, state-passionate

React Property (Props)

• Attributes are assigned by (parent component) when a component is declared and cannot be modified

• The way properties are passed is typically passed in when a component is called

• Properties can make strings, arrays, objects ...

Pass object directly to the component, using {... The form of Object} (preceded by ...)

Example:

1 var _prop = {"title": "Home Page", "url": "Http://gist.github.com"}2 Reactdom.render (< Ele{..._prop}/>,document.getelementbyid ("example"));

React status (state)

Unlike props,state in the interior of the component to declare

Purpose: Mainly to detect whether the current component internal data changes, once the component data has changed, the state has changed

problem：

How does 1.state go about declaring and defining?

1 getinitialstate:function() {2return({3 value: ") Default ",4 bool:false5})6 },

2. How to monitor the data changes inside the component? is actually the process of assigning the state a constant value.

Full code:

1 varCompo =React.createclass ({2Getinitialstate:function(){3 return({4Value: "Hello"5 })6 },7HandleChange:function(e) {8 varText =E.target.value;9  This. SetState ({value:text});Ten }, OneRenderfunction(){ A varValue = This. State.value; - return( -<div> the<input type= "Text" onchange={ This. HandleChange} value={value}/><br/> -<span>value:{value}</span> -</div> - ) + } - }) +Reactdom.render (<compo/>,document.getelementbyid ("example"));

Enter the initial state of the page

When the input box is entered, the value of the input box is displayed synchronously below

Mixed use of props and State in actual development and development

data docking, take the show net commodity list for example:

1. Divided into two components, the outer layer is the parent component, the container of this product list

2. Each loop subkey (render template) in the list of items is a sub-component

You can store the changed data in the parent component and put it in the state

Pass the state data as props to the subcomponents, and let the subcomponents parse themselves

Data interface

React Study notes 2