About props and State (REACT)

React data models are classified into common data and private data. Common data can be transferred between components, and private data is private to the current component. A total of data is called using a props object in react. It contains all attribute names and attribute values of the tag. The props object has three features, one-way mobility, display transmission, and read-only. Unidirectional mobility means that the react data can only be transmitted from the parent component to the child component, but not from the child component to the parent component. Display transmission means that attributes must be explicitly assigned to the child component, data can be transmitted to sub-components. Read-only means that props data is read-only. After the data is modified, the original data model is not changed, but a new data model is generated, load the new data model to the original parent element to complete data transmission and component status changes. Private Data is private to components and is called using State objects in react. The State data model can be conveniently updated without affecting other components.

It should be understood that props is a data stream that the parent component passes to the child component. This data stream can be passed to the child component all the time. The State represents the internal state of a component (which can be a parent component or a child component ). To change the state of a component, the component is changed in semantics and may need to be re-rendered for this component and its child components. Props is a parameter passed by the parent component. It can be used to display content or set the component's own status (some props can be used to set the component's State ), not only changes in the internal state of the component will lead to re-rendering, but also changes in the props passed by the parent component.

Since both changes may cause component re-rendering, only by understanding the meaning of props and state can we determine when to use props or state.

About props and State (REACT)