componentDidMount life-cycle approach of React

1. componentDidMount () The life-cycle approach should be the most used, is generally used after entering the page, data initialization, in this case, with the subscription model method of action is the same. But when you initialize method of data are written in the subscription method, when you change the page access paths, model inside the path did not change overnight, the initialization method will not adjust. But if the data initialization interfaces are placed componentDidMount function, as long as the implementation will go into the page.

2. When you kind of situation: a parent page, edit or add a (new editor is usually the same page) is the parent page reference page:

{
  editVisible ? <PartDesignEdit form={form} editVisible={editVisible} editValue={editValue} designList={designList} colseEdit={this.colseEdit} setLoading={this.setLoading} /> : null
}
{/* <PartDesignEdit form={form} editVisible={editVisible} editValue={editValue} designList={designList} colseEdit={this.colseEdit} setLoading={this.setLoading} /> */}

The figure is a reference to the parent page in the page editor, editor page is Modal, by editVisible control, 1 and 2 are two ways to look the same

But when sometimes you may encounter such a situation:

1. In the edit page is, after you modify the data, turn off the edit page, after the second open and found the content or last modified.

2. Alternatively, the page would add some value input box is the initial value, after being edited once again into the initial value becomes the previous value of the modified

Then there is the difference.

FIG into the edit page each time, resets the initial value (according to their business):

We want, as long as each entry to edit pages when to reset the data pages is not good enough, so you can edit the method by componentDidMount / new page, to set the initial value of each page. However, when you use 2 of Figure 1, you will find that only the first edit page load time will be executed, and then go back, can not reset the value of the problem is still there. However, one way Screenshot 1 is not the same, editor page opens (editVisible = true) was only when editing the page references, editVisible = false when, not referenced, so every time editVisible = true, the equivalent of Edit Page every time is first loaded, so the method componentDidMount method is executed every time, so the problem is solved. This can be used in other similar situations.

Released five original articles · won praise 1 · views 10000 +

Guess you like

Origin blog.csdn.net/star_zone/article/details/105035518