Home > Web Front-end > JS Tutorial > What is the difference between props and state in react?

What is the difference between props and state in react?

coldplay.xixi
Release: 2020-11-17 13:57:56
Original
2292 people have browsed it

The difference between props and state in react: 1. Props are mainly used to transfer parameters between components and obtain the attribute values ​​​​of components. The attribute values ​​​​of external components cannot be directly modified, and they are read-only; 2. State is mainly used for component update control. If you want to re-render or update a component, you only need to modify the state.

What is the difference between props and state in react?

The difference between props and state in react:

<strong>props</strong>

is mainly used to pass parameters between components and obtain component attribute values. Data flows between components in one direction, from parent component to child component.

The property value of the external/parent component cannot be modified directly, it is read-only.

<strong>state</strong>

is mainly used for component update control. If you want to re-render or update the component, you only need to modify the state, and then according to the specific Modified state,

re-renders the user interface (without operating the DOM object);

The data in this component is the data of a relatively closed unit/structure

For example

Created the LikeButton component, getInitialState method is used to define the initial state, which is an object, this object can be read through the this.state property. When the user clicks on the component, causing the state to change, the this.setState method modifies the state value. After each modification, the this.render method is automatically called to render the component again

Related free learning recommendations: JavaScript (video)

The above is the detailed content of What is the difference between props and state in react?. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template