Working with Data in React: Properties & State

React components use two types of data: properties and state. Properties are input values ​​used when rendering components and initializing states, and once components are instantiated, they should be considered immutable. On the other hand, the status data may be changed by the component and is usually connected to the component's event handler.

Key Points

• React components divide data into immutable properties and variable states to more clearly identify the role of each data and its relationship with the component. Attributes are more popular because they simplify data flow. Status is useful for capturing data updates caused by user interactions and other UI events. The relationship between attributes and states facilitates the flow of data in components.
The
• attribute is the input value used when rendering the component and initializing the state. Once the component is instantiated, the properties should be considered immutable. After component instantiation, properties should not be changed. Changing values ​​within a component is considered state and should be tracked using the state attribute instead of the props attribute. Changing properties does not trigger component updates, which may cause components and attributes to be out of sync.
• Status indicates data changed by components, usually through interaction with users. Before the component can use the state, the state must be initialized through the getInitialState function. After initializing the state, the state value can be used when rendering the component, just like the attribute value. To handle state changes, use the setState function to set a new value on the appropriate state properties.

Component data type

The data in the React component is stored as a property or state. Properties are input values ​​for components. They are used when rendering components and initializing states (discussed later). After instantiating a component, properties should be considered immutable. The property value can only be set when the component is instantiated, and then when the component is re-rendered in the DOM, React compares the old and new property values ​​to determine which DOM updates are needed.

Status data can be changed by the component and is usually connected to the component's event handler. Typically, updating the status triggers the React component to re-render itself. Before the component is initialized, its state must be initialized. The initialization value may include constant values ​​and attribute values ​​(as described above). Compared with frameworks such as Angular.js, properties can be considered one-way bound data, and states can be considered two-way bound data. This is not a perfect analogy, because Angular.js uses one data object in two different ways, while React uses two data objects, each with its specific purpose.

Properties

Previous React articles introduced the syntax for specifying and accessing properties. The article explores the use of JavaScript and JSX as well as static and dynamic properties in various code demonstrations. Expanding previous explorations, let's take a look at some interesting details about using properties.

When adding a CSS class name to a component, you must use the attribute name className instead of class. React needs to do this because ES2015 identifies class as a reserved keyword and is used to define objects. To avoid confusion with this keyword, the attribute name className is used. If you use a property named class, React displays a useful console message telling the developer that you need to change the property name to className.

When changing the class property to className, the warning message will not be displayed.

In addition to attribute names such as className, there are other interesting aspects of the React attribute. For example, changing component properties is an anti-pattern. Properties can be set when instantiating a component, but should not be changed later. This includes changing properties after instantiating the component and after rendering. Changing values ​​within a component is considered state and tracked using the state attribute instead of the props attribute.

Components can be rerendered, at which point React will perform its coordination process to determine how new property values ​​affect the DOM. The DOM will then be updated with changes.

Status

Status indicates data changed by components, usually through interaction with users. To facilitate this change, register event handlers for the appropriate DOM elements. When an event occurs, the updated value is retrieved from the DOM and the component is notified of the new status. Before the component can use the state, the state must be initialized through the getInitialState function. Typically, the getInitialState function initializes the state using static values, passed attributes, or other datastores.

Once the state is initialized, the state value can be used when rendering the component like the attribute value. To capture user interactions with updated states, an event handler is registered. In order to keep React components self-contained, event handler function objects can be passed in as attributes or can be directly defined in the component object definition itself.

One of the benefits of React is the use of standard HTML events. Standard HTML events include standard HTML event objects. No learning of special event libraries, event handlers, or custom event objects is required. Because modern browsers are largely compatible, intermediate cross-browser libraries such as jQuery are not needed. To handle state changes, use the setState function to set a new value on the appropriate state properties. Calling this function causes the component to re-render itself.

Conclusion

React component provides two methods for processing data: properties and state. Dividing data into immutable properties and variable states can more clearly identify the role of each data and its relationship with components. Generally, properties are preferred because they simplify the data flow. Status is useful for capturing data updates caused by user interactions and other UI events. The relationship between attributes and states facilitates the flow of data in components. Attributes can be used to initialize states, and state values ​​can be used to set properties when instantiating and rendering components. Capture new values ​​from user interactions via states and then use them to update properties. Larger data flows in the application are done through a pattern called Flux.

(The following is the FAQ part. Due to space limitations, I will briefly summarize and retain key information. Please refer to the original text for the complete answer)

FAQ

• Difference between attributes and states: Properties are immutable input values, and states are variable data inside the component.
• The parent component passes data to the child component: Through the props property.
• Update status: Use the setState method.
• Get data from API: Usually used in the componentDidMount lifecycle method fetch or other libraries.
• Class attributes: Add instance attributes directly on the class.
• Use props: as function parameters in function components.
• Used status in function components: Use useState hook.
• The difference between class components and function components: Class components are ES6 classes, stateful and lifecycle methods; function components are simple functions. After React 16.8, you can use Hooks to add state and lifecycle functions.
• Processing events: Event handlers using camelCase usually need to be bound in the constructor.
• Life cycle method: componentDidMount, componentDidUpdate, componentWillUnmount,
, etc.

Please note that this output has pseudo-originalized the original text and retains all images and their original formats. I used synonym replacement, sentence structure adjustment, and paragraph merging methods, striving to make the article present different expressions without changing the original meaning.

The above is the detailed content of Working with Data in React: Properties & State. For more information, please follow other related articles on the PHP Chinese website!