Respond to Life Cycle Techniques

Question

I am new to React.js and am trying very hard to understand a few methods in the React lifecycle methods.

So far I have something that bothers me:

one)

As far as I understand, the difference between componentWillUpdate and componentWillReceiveProps is that componentWillReceiveProps will be called when the parent changes props, and we can use setState (setState of this descendant inside componentWillReceiveProps ).

for example: reaction-table-sorter-demo

 var App = React.createClass({ getInitialState: function() { return {source: {limit: "200", source: "source1"}}; }, handleSourceChange: function(source) { this.setState({source: source}); }, render: function() { return ( <div> <DataSourceSelectors onSourceChange={this.handleSourceChange} source={this.state.source} /> <TableSorter dataSource={urlForDataSource(this.state.source)} config={CONFIG} headerRepeat="5" /> </div> ); } }); 

In TableSorter we have

 componentWillReceiveProps: function(nextProps) { // Load new data when the dataSource property changes. if (nextProps.dataSource != this.props.dataSource) { this.loadData(nextProps.dataSource); } } 

That is, when we change this.state.source , we expect componentWillReceiveProps be called in TableSorter.

However, I do not quite understand how to use componentWillUpdate in this case, the definition of componentWillUpdate is

 componentWillUpdate(object nextProps, object nextState) 

How can we pass nextState from parent to child? Or maybe I'm wrong, is nextState passed from the parent element?

2) the componentWillMount method confuses me because the official documentation says that

Called once, both on the client and on the server, immediately before the initial rendering occurs.

In this case, if I use setState in this method, it will override getInitialState, since it will only be called once from the beginning. In this case, what is the reason for setting the parameters in the getInitialState method. In this particular case, we have:

  getInitialState: function() { return { items: this.props.initialItems || [], sort: this.props.config.sort || { column: "", order: "" }, columns: this.props.config.columns }; }, componentWillMount: function() { this.loadData(this.props.dataSource); }, loadData: function(dataSource) { if (!dataSource) return; $.get(dataSource).done(function(data) { console.log("Received data"); this.setState({items: data}); }.bind(this)).fail(function(error, a, b) { console.log("Error loading JSON"); }); }, 

elements will be redefined initially and why do we still need items: this.props.initialItems || [] items: this.props.initialItems || [] in the getInitialState method?

Hope you understand my explanation, and please give me some advice if you have any.

Answer 1

1) componentWillReceiveProps is called before componentWillUpdate in the React update life cycle. You are correct that componentWillReceiveProps allows you to call setState . ComponentWillUpdate, on the other hand, is a callback to use when you need to respond to a state change.

The main difference between details and a state is that the state is a private component. Therefore, neither the parent component nor anyone else can manipulate the state (for example, call setState ) of the component. Thus, the default workflow for the relationship between the parent and child components will be as follows:

• Parent transfers new details to the child
• The child processes the new details in 'componentWillReceiveProps', if necessary calls setState
• The child processes the new state in the componentWillUpdate component, but if your component is operational, processing details in the componentWillReceiveProps component will be enough.

2) You showed a good code example to illustrate the difference. The default values ​​set in getInitialState will be used for initial rendering. Calling loadData from componentWillMount initiates an AJAX request that may or may not succeed - in addition, it is not known how long it will take to complete. By the time the AJAX request is completed and setState with a new state, the components will be displayed in the DOM with default values. That's why it makes sense to provide default state in getInitialState .

Note. I found Understanding the React Component Life Cycle - a huge help for understanding the React life cycle methods.

Answer 2

Four phases of the React component

Initialization

Mounting

Update

Unmounting

Here is a brief overview of the various methods

Lifecycle

component. You must have a good understanding of life cycle methods for the code to respond.

Methods at the stage of installation:

It starts when the component is instantiated and when it is displayed in the DOM.

1. constructor(props) - called when the component is first initialized. This method is called only once.
2. componentWillMount() - called when the component is about to mount.
3. render() -it is called when the component is rendered.
4. componentDidMount() - called when the component has completed mounting.

Methods in the update phase:

It starts when the properties or state of a component changes.

1. componentWillReceiveProps(nextProps) - is called when the component is updated and receives new details.
2. shouldComponentUpdate(nextProps, nextState) - is called after receiving the requisite and is preparing for an update. If this method returns false, componentWillUpdate (), render () and componentDidUpdate () will not be executed.
3. componentWillUpdate(nextProps, nextState) - called when the component is updated.
4. render() - called when the component is redrawn.
5. componentDidUpdate(prevProps, prevState) - called when the component has completed the update.

Methods in the unmount phase:

It starts when a component is removed from the DOM.

1. componentWillUnmount() - called immediately before unmounting the component.

Ref: https://hackernoon.com/reactjs-component-lifecycle-methods-a-deep-dive-38275d9d13c0

Answer 3

The best article I've ever read to understand the life cycle of a React component:

Understanding the React Component Life Cycle

Answer 4

Here's an amazing diagram of React's life cycle methods ( made by Dan Abramov )

Interactive version of this chart.

Answer 5

The component life cycle method is a function that we can define inside our components based on classes. If we decide to implement these methods, they will be automatically called by React at certain points during the component life cycle.

The component will be created and displayed in the DOM or browser, and we can do something like this this.setState() which will lead to a re-visualization of the component, and theoretically at some point in time the component will be completely removed from the DOM and stop showing its contents on the screen.

This entire series of events is called the component life cycle.

These life cycle methods are called at different times during the life cycle.

There is a constructor(props) function that can be optionally defined, and if we do this, it will be automatically called when a new instance of the component is created.

There is a render() method that is optional, we must define it. The render() method is a lifecycle function that is called at some point during the component's lifecycle.

We start by calling constructor(props) , then the render() method is called, returns some jsx, and the content becomes visible on the screen.

Then there is another series of life cycle methods called at different points in time.

First, immediately after the component appears on the browser screen, the componentDidMount() life cycle method will be called. This means that if we define a function inside our class, outside constructor(props) , directly above the render() method, we can define a method called componentDidMount() as follows:

 componentDidMount() { } render() { } 

This function will be called automatically once when the component is first displayed on the screen. We can put the code inside for customization or perform some initial data loading or a wide range of operations that we could perform once when the component first appears.

After calling this method, the component will sit and wait for the update. The update will look like this.setState() .

After that, the component will update or re-render, which will call another lifecycle method called componentDidUpdate() . If we define this function, it will be called automatically every time the component updates itself.

The component will sit back and wait for another update and componentDidUpdate() again or many times.

At some point, we might want to stop componentDidUpdate() and that is where we implement componentWillUnmount() and this is the method we want to call when we want to clean up our component.