Edit the articles

instantiation

First instantiation

  • getDefaultProps
  • getInitialState
  • componentWillMount
  • render
  • componentDidMount

Updates after the instantiation is complete

  • getInitialState
  • componentWillMount
  • render
  • componentDidMount

pol

State changes when a component already exists

  • componentWillReceiveProps
  • shouldComponentUpdate
  • componentWillUpdate
  • render
  • componentDidUpdate

Destruction & clean-up period

  • componentWillUnmount

instructions

The lifecycle provides 10 different apis.

1.getDefaultProps

Called only once on the component class, returns the object used to set the default props, for reference values, which are shared in the instance.

2.getInitialState

Function on an instance of a component, called once at instance creation to initialize the state of each instance, at which point you can access this.props.

3.componentWillMount

Called before the first rendering is complete, at which point the component’s state can still be modified.

4.render

Mandatory method to create a virtual DOM, which has special rules:

  • Only throughthis.propsandthis.stateTo access the data
  • Can returnnull,falseOr any React component
  • Only one top-level component can appear (cannot return an array)
  • You cannot change the state of a component
  • You cannot modify the DOM output

5.componentDidMount

Called after the real DOM has been rendered, in which the real DOM element is accessed via this.getDomNode (). At this point, you can manipulate the DOM using other class libraries.

On the server side, this method is not called.

6.componentWillReceiveProps

Called when the component receives a new props and uses it as the nextProps parameter. In this case, you can change the component props and state.

    componentWillReceiveProps: function(nextProps) {
        if (nextProps.bool) {
            this.setState({
                bool: true}); }}Copy the code

7.shouldComponentUpdate

Whether the component should render new props or state, returning false to skip subsequent lifecycle methods, is generally not needed to avoid bugs. In case of application bottlenecks, this method can be used for appropriate optimization.

This method is not called during the first rendering or after the forceUpdate method is called

8.componentWillUpdate

When the props or state is received, the props or state cannot be updated before rendering.

9.componentDidUpdate

Called after rendering the new props or state to access the new DOM element.

10.componentWillUnmount

The component is called before it is removed and can be used to do some cleanup, and all tasks added in the componentDidMount method need to be undone in that method, such as timers created or event listeners added.


Component API

ReactComponent

The React component instance is created at render time. These instances are reused in subsequent renderings and can be accessed in component methods through this. The only way to get a handle to the React component instance outside React is to save the return value of React. Render. In other components, you can use refs to get the same result.

setState

setState(object nextState[, function callback])Copy the code

Merge nextState and current state. This is the primary way to trigger UI updates in event handlers and request callbacks. In addition, optional callback functions are supported, which are called after setState has been executed and the component has been rerendered.

Note:

Never change this.state directly, because calling setState() later may replace the changes you made. Treat this.state as immutable.

SetState () does not immediately change this.state, but instead creates a state transition to be processed. Getting the value of this.state after calling this method may result in the existing value, not the most recently set value.

Synchronization of setState() calls is not guaranteed, and state transitions and DOM rendering may be performed in batches to improve performance.

SetState () will always trigger a redraw unless conditional rendering logic is implemented in shouldComponentUpdate(). If you are using mutable objects but cannot implement this logic in shouldComponentUpdate(), calling setState() only when the new state is different from the previous state can avoid unnecessary rerendering.

replaceState

replaceState(object nextState[, function callback])Copy the code

Similar to setState(), but removes all existing state keys that are not in nextState.

forceUpdate()

forceUpdate([function callback])Copy the code

If the Render () method is reading data from somewhere other than this.props or this.state, you need to tell React when to run Render () again by calling forceUpdate(). ForceUpdate () is also called if you change this.state directly.

Calling forceUpdate() will cause the render() method to be called on the corresponding component, and the child component will also call its own Render (), but React will only update the DOM if the tag changes.

In general, you should try to avoid all forceUpdate() situations and just read data from this.props and this.state in render(). This will make the application much simpler and more efficient.

getDOMNode

DOMElement getDOMNode()Copy the code

If the component is already mounted to the DOM, this method returns the corresponding local browser DOM element. This method is useful when reading values from the DOM, such as getting form field values and doing DOM manipulation. This.getdomnode () returns NULL when render returns null or false.

isMounted()

bool isMounted()Copy the code

IsMounted () returns true if the component is rendered into the DOM. You can use this method to ensure that setState() and forceUpdate() are called error-free in asynchronous scenarios.

setProps

setProps(object nextProps[, function callback])Copy the code

When integrating with an external JavaScript application, you may want to mark a component rendered with react.render () for change.

Although calling react.render () again on the same node is the preferred way to update the root component, you can also call setProps() to change the properties of the component, triggering a re-render. Alternatively, you can pass an optional callback function that will be called after the setProps is complete and the component is rerendered.

Note:

When possible, the declarative approach of calling React.render() again is preferred; it tends to make updates easier to reason about. (There’s no significant performance difference between the two approaches.)

The rigid method is called only on the root component. That is, only available on components passed directly to React. Render (), not on its children. If you prefer to use setProps() on child components, don’t make use of reactive updates, but pass in a new prop when the child component is created in Render ().

replaceProps

replaceProps(object nextProps[, function callback])Copy the code

Similar to setProps(), but instead of merging the old and new props objects, remove all existing props.


React encapsulates the underlying code, and in most cases we don’t need to manipulate the DOM directly. However, sometimes we need to use low-level code, such as input fields to get focus. In this case, we can use third-party libraries or the React API.

Virtual DOM

React is fast because it doesn’t manipulate the DOM directly. React stores the DOM structure in memory and compares it with the return of render() to figure out what needs to be changed before it is reflected in the DOM. React also implements a complete event composition mechanism that keeps events bubbling consistently across browsers. You can even use HTML5 events in IE8. For the most part, we’re building components of React that manipulate the virtual DOM. But sometimes we need to access the underlying API, perhaps by using a third-party plug-in such as jQuery. React also provides interfaces to manipulate the underlying apis.

Refs and findDOMNode ()

In order to interact with the browser, we sometimes need to get the actual DOM node. We can get the actual DOM from the component by calling React. FindDOMNode (Component).

React.finddomnode () is called only in mounted components, which are already rendered in the browser DOM structure. If you call react.finddomNode () in the component’s Render () method, it throws an exception.

See the official example:

var MyComponent = React.createClass({
  handleClick: function() {
    // Explicitly focus the text input using the raw DOM API.
    React.findDOMNode(this.refs.myTextInput).focus();
  },
  render: function() {
    // The ref attribute adds a reference to the component to
    // this.refs when the component is mounted.
    return (
      <div>
        <input type="text" ref="myTextInput" />
        <input
          type="button"
          value="Focus the text input"onClick={this.handleClick} /> </div> ); }}); React.render( <MyComponent />, document.getElementById('example'));Copy the code

Component life cycle

The component lifecycle consists of three main parts:

  • Mounting: The component is being inserted into the DOM
  • Updating: If the DOM needs to be updated, the component is being re-rendered
  • Unmounting: Component is removed from the DOM

React provides methods that we call when the component’s state is updated. Will indicates before the state starts and DID indicates after the state is complete. For example, componentWillMount represents the component before it is inserted into the DOM.

Mounting

  • GetInitialState () : initializes the state
  • ComponentWillMount () : Executed before the component is removed from the DOM
  • ComponentDidMount () : Executes after the component is inserted into the DOM

Updating

  • ComponentWillReceiveProps (object nextProps) : component to get to the new attribute, this method should be this. Props with nextProps comparison, and then by enclosing setState () switch state
  • ShouldComponentUpdate (Object nextProps, Object nextState): This. Props should be compared with nextProps and this. Stats should be compared with nextState. Returns true or false to determine whether the component is updated
  • ComponentWillUpdate (Object nextProps, Object nextState) : Executed before component update, this.setState() cannot be called here.
  • ComponentDidUpdate (Object prevProps, Object prevState) : Executes after component updates

Unmounting

  • ComponentWillUnmount () : Executed before the component is removed

Mounted Methods

  • FindDOMNode () : Get the real DOM
  • ForceUpdate () : Forces the update