React.js Zero-based (ii) component life cycle

What is the life cycle?

The component is essentially a state machine, the input is OK, the output is definite.

A different hook function is triggered when the state changes, allowing the developer to respond.

The life cycle of a component can be summarized as

Initialization: Functions that can be customized in the state

Getdefaultprops

object getDefaultProps()

Called once when the component class is created, and then the return value is cached. If the parent component does not specify a key in props, the corresponding property in the object returned here will be merged this.props (using the in instrumentation property).

This method is called before any instance is created and therefore cannot be relied upon this.props . In addition, getDefaultProps() any complex objects that are returned will be shared between instances, rather than having one copy per instance.

Getinitialstate

object getInitialState()

Called once before the component is mounted. The return value will be this.state the initial value.

Componentwillmount

componentWillMount()

Both the server side and the client are called only once, and are called immediately before the render execution is initialized. If called within this method, the updated state will be sensed, and will be setState render() executed only once, although state has changed.

Componentdidmount

componentDidMount()

Called immediately after the initialization of the rendering execution, only the client is valid (the server side is not called). At this point in the life cycle, the component has a DOM representation that you can use this.getDOMNode() to get the corresponding DOM node.

If you want to integrate with other JavaScript frameworks, use setTimeout either setInterval to set timers, or to send AJAX requests, you can perform these operations in this method.

Running: Functions that can be customized in the state

Componentwillreceiveprops

componentWillReceiveProps(object nextProps)

Called when the component receives a new props. The method is not called when the rendering is initialized.

This function can be used as an opportunity for react to update the state before rendering after prop is passed in render() . The old props can be this.props obtained by getting to. Calls in this function this.setState() will not cause a second render.

componentWillReceiveProps: function(nextProps) { this.setState({ likesIncreasing: nextProps.likeCount > this.props.likeCount });}

Shouldcomponentupdate

boolean shouldComponentUpdate(object nextProps, object nextState)

Called before a new props or state is received and will be rendered. This method is not invoked when initializing the render, forceUpdate nor when using the method.

This should be true if the new props and state are determined not to cause component updates 返回 false .

shouldComponentUpdate: function(nextProps, nextState) { return nextProps.id !== this.props.id;}

If shouldComponentUpdate false is returned, it render() will not be executed until the next state changes. (Also, componentWillUpdate and componentDidUpdate will not be called.) ）

By default, it shouldComponentUpdate always returns true, state avoiding minor bugs when changing, but if you are always careful to take as state immutable, render() only from props and state read values in, at which point you can override the shouldComponentUpdate method to implement the new old PR The comparison logic of OPS and state.

If performance is a bottleneck, especially when there are dozens of or even hundreds of components, use shouldComponentUpdate can improve the performance of your application.

Componentwillupdate

componentWillUpdate(object nextProps, object nextState)

Called immediately before a new props or state is received. The method is not called when the rendering is initialized.

Use this method to do some preparatory work before updating.

Componentdidupdate

componentDidUpdate(object prevProps, object prevState)

is called immediately after the component's update has been synchronized to the DOM. This method is not called when the rendering is initialized.

Use this method to manipulate DOM elements after a component update.

Destroy: Functions that can be customized in the state

Componentwillunmount

componentWillUnmount()

Called immediately when the component is removed from the DOM.

Perform any necessary cleanup in the method, such as an invalid timer, or clear the componentDidMount DOM element created in.

Summary: Functions that can be customized during the life cycle of a component are roughly the same. We'll see you next time.

React.js Zero-based (second) component life cycle