React component API


In this chapter we will discuss the React component API. We will explain the following 7 methods:

  • Set state: setState

  • Replace state: replaceState

  • Set properties setProps

  • Replace properties replaceProps

  • Force update: forceUpdate

  • Get DOM Node: findDOMNode

  • Determine component mounting status: isMounted

Set state: setState

setState(object nextState[, function callback])

Parameter description

  • nextState, the new state to be set, which will be merged with the current state

  • callback, optional parameters, callback function. This function will be called after setState is set successfully and the component is re-rendered.

Merge nextState and current state, and re-render the component. setState is the main method to trigger UI updates in React event handling functions and request callback functions.

About setState

The state cannot be modified through this.state inside the component, because the state will be replaced after calling setState().

setState() does not immediately change this.state, but creates a state that is about to be processed. setState() is not necessarily synchronous. In order to improve performance, React will perform state and DOM rendering in batches.

setState() will always trigger a component redraw unless some conditional rendering logic is implemented in shouldComponentUpdate().

Instance

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>php中文网 React 实例</title>
    <script src="http://static.php.cn/assets/react/react-0.14.7/build/react.js"></script>
    <script src="http://static.php.cn/assets/react/react-0.14.7/build/react-dom.js"></script>
    <script src="http://static.php.cn/assets/react/browser.min.js"></script>
  </head>
 <body>
    <div id="message" align="center"></div>

    <script type="text/babel">
      var Counter = React.createClass({
        getInitialState: function () {
          return { clickCount: 0 };
        },
        handleClick: function () {
          this.setState(function(state) {
            return {clickCount: state.clickCount + 1};
          });
        },
        render: function () {
          return (<h2 onClick={this.handleClick}>点我！点击次数为: {this.state.clickCount}</h2>);
        }
      });
      ReactDOM.render(
        <Counter />,
        document.getElementById('message')
      );
    </script>
  </body>
</html>

Run instance »

Click the "Run instance" button to view the online instance

In the example, clicking the h2 tag increases the click counter by 1.

Replace state: replaceState

replaceState(object nextState[, function callback])

  • nextState, the new state to be set, this state will replace the current state .

  • callback, optional parameters, callback function. This function will be called after replaceState is set successfully and the component is re-rendered.

replaceState() method is similar to setState(), but the method will only retain the state in nextState, the original state States that are not in nextState will be deleted.

Set properties: setProps

setProps(object nextProps[, function callback])

  • ##nextProps, the new properties to be set will be in the same state as the current props Merge

  • callback, optional parameters, callback function. This function will be called after setProps is set successfully and the component is re-rendered.

Set component properties and re-render the component.

props is equivalent to the data flow of the component, which is always passed down from the parent component to all child components. When integrating with an external JavaScript application, we may need to pass data to the component or notify React.render() that the component needs to be re-rendered, you can use setProps().

Update the component, I can call

React.render() again on the node, or I can change the component properties through the setProps() method to trigger the component to re-render.

Replace properties: replaceProps

replaceProps(object nextProps[, function callback])

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

  • callback, optional parameters, callback function. This function will be called after replaceProps is set successfully and the component is re-rendered.

replaceProps()The method is similar to setProps, but it will delete the original 

props

force update : forceUpdate

forceUpdate([function callback])

Parameter description

  • callback, optional parameter, callback function. This function will be called after the componentrender() method is called.

The forceUpdate() method will cause the component to call its own render() method to re-render the component, and the component's subcomponents will also call their own render(). However, when the component is re-rendered, this.props and this.state will still be read. If the state has not changed, React will only update the DOM.

The forceUpdate() method is suitable for redrawing components other than this.props and this.state (for example: after modifying this.state). This method is used to notify React that render() needs to be called

Generally speaking, you should try to avoid using forceUpdate(), but only read the state from this.props and this.state and trigger the render() call by React.

Get DOM node: findDOMNode

DOMElement findDOMNode()

  • Return value: DOM element DOMElement

If the component has been mounted in the DOM , this method returns the corresponding local browser DOM element. When render returns null or false, this.findDOMNode() will also return null. This method is useful when reading values ​​from the DOM, such as getting the value of a form field and doing some DOM operations.

Determine the component mounting status: isMounted

bool isMounted()

  • Return value: true or false, indicating the component Whether it has been mounted in the DOM

isMounted() method is used to determine whether the component has been mounted in the DOM. This method can be used to ensure that setState() and forceUpdate() will not go wrong when called in asynchronous scenarios.

Reference for this article: http://itbilu.com/javascript/react/EkACBdqKe.html