问用于反应生命周期方法(如componentWillReceiveProps )的典型用例是什么？

EN

- This is called once on the server side, if server side rendering is present, and once the client side. 
- I personally have used it just to do api calls which do not have direct effect on the components, for example getting oAuth tokens

- This function is mostly used for calling API's [(here](https://stackoverflow.com/questions/27139366/why-do-the-react-docs-recommend-doing-ajax-in-componentdidmount-not-componentwi) is why to call it in componentDidMount and not in componentWillMount)
- Components `state` initialisations which are based on the props passed by parents.

- This function is called every time props are received **except the first render**
- Most common use I have encountered is to update the _state_ of my current component which i can not do it in componentWillUpdate. 

- This method is invoked before the render happens when new props or states are received. Here we can return false if the re-render is not required.
- I see this as a performance optimisation tool. In case of frequent re-rendering of parent component this method should be used to avoid unnecessary update to current component   

- this function is called every time a component is updated, it is not called when component mounts
- Carry out any data processing here. For example, when a api fetch returns data, modelling the raw data into props to be passed to children
- `this.setState()` is not allowed in this function , it is to be done in componentWillReceiveProps or componentDidUpdate

- Invoked right after the changes are pushed to the DOM 
- I have used it whenever the required data is not at the first render (waiting for api call to come through) and DOM requires to be changed based on the data received
- Example, based on the age received show the user if he is eligible for application for an event

- As the official docs mentions, any event listeners or timers used in the component to be cleaned here

- Example, Enable editing of fields on click of an edit button
- A function in the same component changes the state no involvement of lifecycle functions

- Example, api call finished , need to display the received data
- Lifecycle methods for the win.

- Example, if the current email is already present , give the input class an error class.
- `componentDidUpdate`

- Example, parent container which formats data received after api call and passes the formatted data to children.
- `componentWillUpdate`

- Example, 
- `shouldComponentUpdate`

- Example, add a listener to monitor the DOM, based on window size.
- `componentDidMount`
- 'componentWillMount' , to destroy the listner

- 'componentDidMount'

import React from 'react';
import Person from './Person';

export default class Form extends React.Component {
  constructor(props) {
    super(props);
    this.state        = { name: '' } ;
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event) {
    this.setState({ name: event.currentTarget.value });
  }

  render() {
    return (
      <div>
        <input type="text" onChange={ this.handleChange } />
        <Person name={ this.state.name } />
      </div>
    );
  }
}