React / data flow

“Props”

React When the element is a user-defined component that will receive the property JSX (attributes) into a single object to the assembly, the object is called "props".

A read-only props

Whether using the component function declaration or statement by the class are never modified their props.

Assembly can take any props, including basic data types, React elements and functions .

---

 

“defaultProps”

defaultProps You can add a default props Class components . This is generally used for props unassigned, but not for the case of null. E.g:

class CustomButton extends React.Component {
  // ...
}

CustomButton.defaultProps = {
  color: 'blue'
};

---

 

“state” 

But the state is privately owned and fully controlled by the current component . " Local ", " package "

 

Correct use of State

1. Do not directly modify the State

Modify state instead of using the method setState this manner this.state.user =

2.State update may be asynchronous

For performance reasons, React might put multiple  setState() calls merged into a single call.

Because  this.props and  this.state it might asynchronous updates, so you do not rely on their value to update the next state.

To solve this problem, allowing  setState() to receive a function rather than an object. This function is to spend a state as the first argument, the props when this update is applied as the second argument:

this.setState((state, props) => ({
  counter: state.counter + props.increment
}));

3.State updates will be merged

When you call  setState() time, React objects will provide you merge into the current state. (Shallow merger)

Data flowing downward

Whether the parent component or subassembly can not know whether a component is stateful or stateless, and they do not care that it is a function of the component or class components.

Because the state of privacy, so that components can choose to its state as props downwardly passed to its subassembly