Reactjs Introduction to Combat (iv)----state

this.propsRepresents features that, once defined, are no longer changed, but this.state are features that change as users interact.

Components are unavoidable to interact with the user, React is a big innovation, is to consider the component as a state machine, initially have an initial state, and then user interaction, resulting in state changes, triggering the re-rendering UI

The component is actually a state machine (machines)

React the user interface as a simple state machine. Think of the user interface as having a different state and then rendering these states, making it easy to keep the user interface and data consistent.

React, simply update the state of the component and then re-render the user interface based on the new state (do not manipulate the DOM). React to decide how to update the DOM most efficiently.

How state works

A common method of notifying React data changes is to call setState(data, callback) . This method will merge (merge) data to and this.state re-render the component. After rendering is complete, invoke the optional callback callback. This is not required in most cases callback , as React will be responsible for updating the interface to the latest state.

Which components should have state?

the work of most components should be to fetch the data from the props inside and render it. However, there are times when you need to respond to user input, server requests, or time changes, and then you need to usestate.

* * Try to make as many components as possible stateless. * * This can isolate the state, put it in the most reasonable place, also reduce redundancy, and easy to explain the process of program operation.

A common pattern is to create multiple stateless (stateless) components that are only responsible for rendering the data, creating a stateful (stateful) component on top of them and passing it to the props child. This stateful component encapsulates the interaction logic of all users, and these stateless components are responsible for rendering the data in declarative form.

What should beAs state?

The state should include data that could be changed by the component's event handlers and trigger user interface updates . in real-world applications, this data is generally small and can be serialized by JSON. When creating a stateful component, imagine what data is needed to indicate the minimum state of its status, and only deposit that data this.state . The render() other data you need is calculated in the state according to the state. You will find that thinking and developing programs in this way is often correct, because if you add redundant data or compute data to the state, you need to keep the data in sync manually, and you can't let React handle it.

What should notAs state?

this.stateYou should include only the minimum data that is required to represent the state of the user interface. Therefore, it should not include:

• Calculated data: Don't worry about pre-calculating data based on state--putting all the calculations in place render() makes it easier to keep the user interface and data consistent. For example, in the state there is an array (listItems), we want to render the array length as a string, directly in the render() use this.state.listItems.length + ‘ list items‘ of it than put it in the state is much better.
• React components: render() Use the current props and state in to create it.
• duplicate data based on props: use props as the only source of data when possible. A valid scenario for saving props to state is when you need to know its previous value, because future props may change.
• Chestnuts:

• <div id="Example"></div> <script type="Text/babel">varCount =React.createclass ({getinitialstate:function () {return{count:0}}, Handleclick:function () { This. SetState ({count: This. State.count +1}); }, Render:function () {return (                        <div> <a onclick={ This. Handleclick}>you has clicked { This. State.count} times</a> </div>                    );            }                            }); Reactdom.render (<count/>, document.getElementById ('Example')            )        </script>

Reactjs Introduction to Combat (iv)----state