Common component types in web programming and development

I believe everyone has heard of or seen the form of component programming and development. Today, let's learn about the component types of web development.

These components are unremarkable in daily development, and we can easily change the value of components by inputting some content or setting the value attribute of elements. However, computer training/discovery because React is constrained by one-way data flow, these components may get out of control:

1. Components that keep values in their own state cannot be modified from the outside;

2. Components whose values are set by props can only be updated by external controls.

Recently, I encountered a problem when using an ant-designUI component based on react produced by Ant Financial. When editing a page, the input box will display the data before saving, but using defaultValue will not work. The input box will always be null instead of the specific passed-in value.

After passing valueprops to the component to which the code fragment belongs, the default value in the text box is always empty, because the initial value of the state corresponding to value in the state where the page is located is empty, which leads to the change of the value in the state corresponding to value after the subsequent asynchronous request is successful, and it is still displayed as empty.

Google finds out the specific reason. Once the defaultValue in the form component of React is passed, subsequent changes to the defaultValue will have no effect and will be ignored.

Specifically, this is an uncontrolled component of react, and its state is controlled within the input react and is not controlled by the caller. Can be implemented using controlled components.

Let's talk about this controlled component and uncontrolled component first. They are all form component elements based on react. For details, please refer to the introduction of react official website.

Controlled component

Formally, the controlled component is to add a value attribute to a form component; Uncontrolled components are components without added value attributes;

A form component element added with the value attribute will not maintain its own state. Once a specific value is set, the value of the component will always be this value, so the caller needs to control the change of the component value.

This writing method brings a problem: any value input by the user has no effect in the user interaction of the rendered input component, and the value in the input input box is always Hello! . This is inconsistent with the performance of input in HTML.

Uncontrolled component

Formally, the form component elements without adding the value attribute in react are uncontrolled components.

Uncontrolled components maintain their own state state when they are implemented at the bottom; This indicates that any value entered by the user can be reflected on the element.