Shulou(Shulou.com)06/01 Report--

This article mainly introduces "react native Lifecycle case Analysis". In daily operation, I believe many people have doubts about react native Lifecycle case Analysis. The editor consulted all kinds of data and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts of "react native Lifecycle case Analysis". Next, please follow the editor to study!

Stage 1: functional analysis of instantiated phase function

1. GetDefaultProps: in this component, we can get the properties that initialize it by using this.props, and after the component initialization, using this component again will not call the getDefaultProps function, so the component itself can not modify props, but can only be modified externally when it is called by other components.

2. GetInitialState: this function is used to initialize part of the state of the component, and this function is different from getDefaultProps, and we will call it again later, so you can initialize some variables that control the state of the control here (such as the text displayed on the control, you can get the value through this.state, and modify the value of state through this.setState. )

Note: once the this.setState method is called, the component must call the render method to render the component again, but the React framework automatically determines whether it needs to be rendered based on the state of the DOM.

Let's take a look at the following related code:

Constructor (props) {super (props); this.state = {clickText: "start clicking button", count: 1, detailContent: true}}... clickButton () {const {count} = this.state; this.setState ({clickText: "I clicked the button", count: count + 1, detailContent: false})} render () {console.log ("render1111") Return (welcome to the home page Actions.notice ()} > Jump to the announcement page {this.state.count} this.clickButton ()} > {this.state.clickText})}

3. ComponentWillMount: called before the component is about to be loaded into the view

4. ComponentDidMount: the render method is called in this method. After the component is successfully loaded and rendered, the subsequent operations to be performed are usually carried out in this function.

Stage 2: analysis of the function of the existing stage function

ShouldComponentUpdate: generally used for optimization. You can return false or true to control whether to render (if true proceeds to the next 2 steps, false will not continue) componentWillUpdate: call componentDidUpdate before component refresh: after update

ShouldComponentUpdate (nextProps, nextState) {console.log (this.state.detailContent,'detailContent'); if (this.state.count! = = nextState.count) {console.log ("shouldComponentUpdate1111--- components need to be updated"); return true;} return false;} componentWillUpdate () {console.log ("componentWillUpdate1111--- components will be updated");} componentDidUpdate () {console.log ("componentDidUpdate1111--- components updated");}

ComponentWillReceiveProps: the parent element modifies the props or state of the component

/ / listen for changes in the parent element props or state in the child component and perform corresponding operations componentWillReceiveProps (nextProps) {console.log (this.props.detailContent,'this--- > > componentWillReceiveProps'); console.log (nextProps.detailContent,'next--- > > componentWillReceiveProps')} / / componentWillReceiveProps-> execute shouldComponentUpdate-> componentWillUpdate-> componentDidUpdate in the parent component after the change

Stage 3: functional analysis of the destroy phase function

ComponentWillUnmount is used to clean up some useless content, such as timer cleanup

Here are some knowledge points that we often use in our daily life.

This.state: in development, components must interact with users. One of the major innovations of React is to treat components as a state machine, starting with an initial state, and then user interaction, resulting in state changes that trigger re-rendering of the UI.

1. When the user clicks on the component, resulting in a state change, the this.setSate method modifies the state value. After each modification, the this.render method is automatically called to render the component again. 2, the component can be seen as a state machine, and there are different UI displays according to different status. As long as the state value is changed using setState and the difference is calculated according to the diff algorithm, the render method of ReactDom will be executed. Re-render interface 3. Because both this.props and this.state are used to describe the features of components, there may be confusion. A simple distinction is-this.props represents features that are no longer changed once defined, while this.state is a feature that changes with user interaction.

Get the real Dom node: 1. In React Native, the component is not a real DOM node, but a data structure in memory, called virtual DOM2, which becomes the real DOM3 only when it is inserted into the document. According to the design of React, all DOM changes take place on the virtual DOM, and then the actual changes are reflected on the real DOM. This algorithm is called DOM diff. It can greatly improve the performance of web pages. 4. Sometimes you need to get the real DOM node from the build, and then you need to get the ref attribute.

At this point, the study on "react native Lifecycle case Analysis" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.