react - component API

Official website address: https://zh-hans.reactjs.org/docs/react-component.html#setstate    ( setState )

https://zh-hans.reactjs.org/docs/react-dom.html#finddomnode     ( finddomnode )

Reference blog: https://itbilu.com/javascript/react/EkACBdqKe.html

1, set state: setState (called component)

(1) Format

setState(updater[, callback])

Parameter Description:

updater, the new state to be set, the status and the current state consolidation.

callback, optional parameters, the callback function. This function sets the success setState, and after re-rendering component called.

The combined updater and the current state, and re-rendering components. setState are React event handler method and request major UI update callback function triggered.

(2) properties

1) will be delayed batch update

　　Objective: To improve performance; internally consistent

　　The reason: setState () will be queued component state changes, and notify React need to use the state of the updated re-render this component and its children. But React to setState regarded as a request, not an order to update the components immediately;

　　Hazards: React and will not change the state guarantee will take effect immediately, immediately after the call to read this.state setState, the value has not been updated in a timely manner;

　　Solution:

• Use componentDidUpdate

• Use setState callback function setState (updater, callback)

Example:

export default class Counter extends React.Component{
  constructor(props) {
      super(props);
      this.state = {clickCount: 0};
  }
  
  handleClick() {
    this.setState(function(state) {
      return {clickCount: state.clickCount + 1};
    });
  }
  render () {
    return (<H2 = {the onClick the this .handleClick.bind ( the this !)}> I site clicks: { the this .state.clickCount} </ H2>);
   }
}

The above two methods can be guaranteed to trigger after applying the update

 (3) According to previous state sets the current state ( in fact, that I do not understand )

Unless  shouldComponentUpdate() returned  false, otherwise it  setState() will always perform the re-rendering operations. If the object variable is used, and can not  shouldComponentUpdate() achieve the conditions for rendering, then not only a time to call in the old and new state  setState()to avoid unnecessary re-rendering

Example:

export default class IndexCom extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            counter: 123
        }
    }

    shouldComponentUpdate() {
        return false
    }

    handClick() {
        this.setState((state, props) => {
            return {counter: state.counter + props.increment};
        });
        console.log(this.state.counter)
    }

    render() {
        return(
            <div onClick={this.handClick.bind(this)}>
                点我加{this.state.counter}
            </div>
        )
    }
}

At this point, no matter how many times you click, change the value of state occurs, but does not re-render the page. 

2, update: forceUpdate (called components)

 (1 Introduction

　　Force the assembly to re-render.

　　Call forceUpdate () component will call render () method, and ignore shouldComponentUpdate (). However, children of this component will call your own render (), when the component is re-rendered, and still reads this.props this.state, if the state does not change, then React only updated DOM.

　　Applied outside the this.props and this.state components redrawn. We should try to avoid using forceUpdate ().

Example:

export default class ForceUpdate extends React.Component{
  constructor(){
    super();
  };
  
  forceUpdateHandler(){
    this.forceUpdate();
  };
  
  render(){
    return(
      <div>
        <button onClick= {this.forceUpdateHandler.bind(this)} >FORCE UPDATE</button> 
　　　　 <h4>Random Number : { Math.random() }</h4> 
　　　　</div>  
　　 ); 
   } 
}

 

After calling this function, the order will hook function call:

(2) Format

component.forceUpdate(callback)

Parameter Description:

callback: Optional parameter callback function, which will be in the assembly () the render call the method call.

3, the replacement state: replaceState

(1 Introduction

replaceState () method and setState () is similar, but the method only kept nextState state, the original state is not nextState in the state will be deleted.

(2) Format

replaceState(object nextState[, function callback])

Parameter Description:

nextState, the new state to be set, which will replace the current state of the state.

callback, optional parameters, the callback function. This function sets the success replaceState, and after re-rendering component called.

Note: The incorrect report, unresolved issues

4, set the properties: setProps

(1 Introduction

Setting component properties, and re-rendering components

(2) Format

setProps(object nextProps[, function callback])

Parameter Description:

nextProps , new property to be set, and the current status of props merge

callback , optional parameters, the callback function. This function will setProps set up, and after re-rendering component called.

Note: The incorrect report , unresolved issues

5, the replacement property: replaceProps

(1 Introduction

replaceState and setProps similar, but it will delete the original props.

(2) Format

replaceProps(object nextProps[, function callback])

Parameter Description:

nextProps, the new property to be set, this property will replace the current props.

callback, optional parameters, the callback function. This function sets the success replaceProps, and after re-rendering component called.

Note: The incorrect report , unresolved issues

6, get the DOM node: findDOMNode

(1 Introduction

 　　Get DOM node.

　　If the component has been mounted into the DOM, the method returns a corresponding local browser DOM elements. When the render return null  or  false when, this.findDOMNode () will return null . Values read from the DOM when this method is useful, such as: obtain the value of the form field, and do some DOM operations.

　　In most cases, you can bind a ref to the DOM node, you can completely avoid the use of findDOMNode.

　　Starting React 16, multiple components may be returned to the fragment child node, in this case, findDOMNode it returns the first non-empty DOM node corresponding to the node.

(2) Format

ReactDOM.findDOMNode(component)

Return value: DOM element DOMElement

(3) Note

1) findDOMNode is a contingency plan access the underlying DOM node (escape hatch). In most cases, this method is not recommended, because it will destroy the abstract structural components.

2) strict mode is deprecated.

3) findDOMNode it is only available (i.e., the component has been placed in the DOM) is mounted on the assembly.

4) findDOMNode can not be a function component.

Example:

import React from 'react';
// import { findDOMNode } from 'react-dom';
import ReactDOM from 'react-dom'
import IndexCom from "./com/com"
import "./index.scss"

export default class Index extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            increment: 123
        }
    }

    clickEvent() {
        // let node = findDOMNode(this.refs.IndexComNode)
        let node = ReactDOM.findDOMNode(this.refs.IndexComNode)
        console.log(node)
    }

    render() {
        return(
            <div className="index_page">
                <Button the onClick = { the this .clickEvent.bind ( the this )}> Click grindstone </ button>
                <IndexCom  ref="IndexComNode" increment={this.state.increment}></IndexCom>
            </div>
        )
    }
}        

Screenshot results:

7, determination component mounted state: isMounted

 (1 Introduction

isMounted () method for determining whether the component mounted into the DOM. You can use this method to ensure the setState () and forceUpdate () call in asynchronous scene can not go wrong.

(2) Format

bool isMounted()

Return Value: to true or to false , indicating whether the assembly has been mounted to the DOM