1, the role of the state: state React is a component of the subject , React, the updated component state, will lead to re-render the user interface (do not operate DOM). Simply put, the user interface will change as the state changes
2, state principle: data change notification method React calling setState (data, callback). This approach will merged data to this.state, and re-rendering components . After the rendering is complete, the optional callback callback call. Most cases do not need to provide callback, because React will be responsible to update it to the latest state
3, which components need to set the state: the work of most of the components of the data should be taken from the props in and rendered. However, it is sometimes necessary for a user input, requesting the server to respond or time changes , then only need state. Components should be as free of state, so that can be isolated state, put it in the most logical place (Redux do is this thing?), But also to reduce redundancy and easy-to-explain working of the process. Common mode is only responsible for rendering data to create multiple stateless (stateless) components, creating in them an upper state (stateful) component and put it through the props pass state subcomponents. Stateful component encapsulates all the user interaction logic, these stateless components responsible only declarative render data.
4, which attributes should be the state: state event handlers should include those components may be changed and updated user interface to trigger data. Which such data is generally small and can be serialized JSON. When creating a state of the components, it should stay lean data, and then stored in this.state. Other data in the render () is calculated in accordance with the required state. Because if in a state where redundant data is added or calculated data, often manually maintain data synchronization.
5, which properties should not be the state: this.state should include only the minimum data capable of representing a user interface desired state. Thus, it should not include: (1) calculated data; (2) React components: props and used to create a state in which render () where; (3) repeating the data props: props used to do as much as possible to maintain the unique data sources, to effectively save the props scene state is the need to know before it is worth the time, because the future of props may change.
6, assembly props is a parent to the child mode data transfer . Y component in the render () method creates the component X, then Y (owner) to have X (belonger). In React, the data flow from the owner's ownership by props.
Author: Julian crayfish
link: https: //www.jianshu.com/p/4ac1e86d6882
Source: Jane books
are copyrighted by the author. Commercial reprint please contact the author authorized, non-commercial reprint please indicate the source.