React, redux personal learning notes

react, redux personal learning notes

Reactredux Personal Learning Notes state actions and reducer react component lifecycle react the State Browser console in the component snapshot

This article records the individual in the learning process climbed the pit, for reference only, Daniel Bypass, if there is wrong place to welcome criticism, hope to help some and I just started to learn react novice. State , 

actions and reducer

When using react and redux frame construction project, its core is nothing more than the store, the actions and the reducer three. The core idea is very well understood that the state in the store stores the data to control the status of the component, and the various behaviors involved in the component are called actions, but the actions are just a JSON object that contains the type attribute and the corresponding data, does not process the data, but acts as a command. When an action is called by dispatch, it looks for the corresponding item in the reducer according to the value of the type attribute in the action, and the actual operation of the data is reducer. Reducer then updates the data that is carried in the action to the state in the store, and when state changes, the diff algorithm in the react will render the corresponding component to the smallest extent possible based on the state change. 

react component life cycle

This picture shows the life cycle of the react component well, knowing and remembering the importance of the order of execution and trigger conditions for each lifecycle I don't stress.

It is worth mentioning that componentwillreceiveprops this link, when the component is first rendered, the method is not invoked, and after the first rendering props changes will not trigger the function. Also, when the parent component that invokes the component triggers the render, all the subcomponents in the parent component trigger a Componentwillreceiveprops method once, even if the state that changed is not related to a subassembly. Therefore, when you want to add a value to the state in the parent component, be sure to think twice before you do so, which may cause the child component to accidentally trigger the Componentwillreceiveprops method.

 State within the react component

In addition to state in the store, individual components have their own states that control the status of the component itself, and do not confuse two states. It should be noted that after the call to This.setstate (NewState) within the component, NewState is added to a queue (as shown in the following illustration) and does not immediately perform an update, but rather triggers a judgment condition to determine whether it needs to be updated immediately. So when you call This.setstate (NewState), taking the value out of the state right away is probably not going to get newstate. And when the same value in the state is continuously assigned, State does not repeat the update, but instead updates the corresponding value directly to the last assignment result.
Browser Console Snapshot

As for data delivery, it is important to mention that I encountered a hole in the beginner's react, when the parent component passes the reference type data to the subassembly through props, in the constructor of the subassembly, This.props.data values are not available in methods such as Componentwillmount, while other types of data, such as Boolean, String, and number, are normally obtained.

Constructor (props) {
 super (props);
 Console.log (this);
 Console.log (This.props.contentData);
}

As in the above code, in the table component constructor method to print this and this.props.data in the console separately:

We found This.props.data to be an empty array, and then look at the props in the table:

We found that the contentdata in the props in the table was got. Why is there such inconsistency? This strange phenomenon is actually caused by two reasons, the first reason is because the Chrome browser console when recording a multi-level data structure, actually recorded only a snapshot of the structure (snapshot), meaning that the console in the execution of records, In fact, only the most superficial layer of the data structure is recorded, and when you look at the inner layer data, the value of the inner data is fetched, which means that the value of the inner data you see now is not the value of the moment that executes the Console.log code, but the value of the time when you view the inner data in the console. The console only records the next snapshot at the moment of executing the code in order to minimize the impact of the program code execution, while a one-time record of the entire complex data structure will lose part of the efficiency.

To be Continued ...