This is the 13th day of my participation in Gwen Challenge

constructor()

The React data is initialized by constructor(), which accepts two parameters: props and context. When you want to use these two parameters inside a function, you need to pass them in with super(). Note: Whenever you use constructor() you must write super(), otherwise this will point to an error.

componentWillMount()

ComponentWillMount () is used less often, and more often for server-side rendering. It represents the process when the component has gone through a constructor() initialization of data, but has not yet rendered the DOM.

componentDidMount()

componentDidMount()
Copy the code

ComponentDidMount () is called immediately after the component is mounted (inserted into the DOM tree). Initialization dependent on DOM nodes should be placed here. This is a good place to instantiate a request to get data over the network.

This method is a good place to add subscriptions. If you add a subscription, don’t forget to unsubscribe at componentWillUnmount()

You can call setState() directly in componentDidMount(). It triggers an additional rendering, but before the browser updates the screen. This ensures that the user will not see the intermediate state even if render() is called twice. Use this pattern with caution, as it can cause performance problems. In general, you should initialize state in constructor(). You can use this if your rendering depends on the size or location of DOM nodes, such as implementing Modals and tooltips.

componentWillReceiveProps (nextProps)

  1. This is often used when props need to re-render the component after accepting changes to the parent component
  2. Accept a parameter, nextProps
  3. The component is rerendered by comparing the state of nextProps to the state of the current component

After React16, the getDerivedStateFromProps(nextProps, prevState) agent will throw an unsafe warning if React is used.

shouldComponentUpdate()

shouldComponentUpdate(nextProps, nextState)
Copy the code

Check whether the output of the React component is affected by changes to the current state or props based on the return value of shouldComponentUpdate(). The default behavior is that the component is rerendered every time the state changes. For the most part, you should follow the default behavior.

componentDidUpdate()

componentDidUpdate(prevProps, prevState, snapshot)
Copy the code

ComponentDidUpdate () is called immediately after the update. This method is not performed for the first rendering.

This is where you can manipulate the DOM when the component is updated. If you compare the props before and after the update, you can also do the network request here. (For example, network requests are not executed when the props are not changed).

componentDidUpdate(prevProps) {
  // Typical usage (don't forget to compare props) :
  if (this.props.userID ! == prevProps.userID) {this.fetchData(this.props.userID); }}Copy the code

You can also call setState() directly in componentDidUpdate(), but note that it must be wrapped in a conditional statement, as in the example above, otherwise it will cause an infinite loop. It also causes additional re-rendering, which is invisible to the user but affects component performance. Instead of “mirroring” props to state, consider using props directly.

componentWillUnmount()

ComponentWillUnmount () is called directly before the component is unmounted and destroyed. Perform necessary cleanup actions in this method, such as clearing timers, canceling network requests, or clearing subscriptions created in componentDidMount().

SetState () should not be called in componentWillUnmount() because the component will never be re-rendered. Once a component instance is unmounted, it will never be mounted again.