React Component API

In this section we will discuss React component API. We will explain the following seven methods:

• Set Status: setState
• Replace Status: replaceState
• Setting properties setProps
• Replace property replaceProps
• Update: forceUpdate
• Get DOM Node: findDOMNode
• Analyzing components mounted state: isMounted

Set Status: setState

setState(object nextState[, function callback])

Parameter Description

• nextState, the new state to be set, the status and the current state merge
• callback, optional parameters, the callback function. This function will be provided in setState successful Called after the assembly re-rendering.

Merge nextState and current state, and re-rendering component. setState are React event handler method and request major UI update callback function triggered.

About setState

You can not modify the internal components by this.state state, because the state will replace the call setState () after.

setState () does not change this.state immediately, but will soon create a state treatment. setState () is not necessarily synchronized in order to enhance performance would React batch execution state and DOM rendering.

setState () always triggers a redraw assembly, unless a number of conditions to achieve shouldComponentUpdate () in rendering logic.

Examples

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')
);

try it"

Examples by clicking on the h2 tags to make a hit counter is incremented.

Replace Status: replaceState

replaceState(object nextState[, function callback])

• nextState, the new state will be set up, which will replace the current state of the state.
• callback, optional parameters, the callback function. This function will be provided in replaceState successful Called after the assembly re-rendering.

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

Setting properties: setProps

setProps(object nextProps[, function callback])

• nextProps, the new property will be set, and the current status of the merger props
• callback, optional parameters, the callback function. This function will be provided in setProps successful Called after the assembly re-rendering.

Setting component properties, and re-rendering component.

data flow props equivalent components, it will always be passed down from parent to all the sub-assembly components. When an external JavaScript and application integration, we may need to pass data to the component or notice React.render () components need to re-render, you can use setProps ().

Update component React.render I can call again on the node () to be () method to change the component properties by setProps, trigger re-rendering component.

Replace Attribute: replaceProps

replaceProps(object nextProps[, function callback])

• nextProps, the new property to be set, this property will replace the current props.
• callback, optional parameters, the callback function. This function will be provided in replaceProps successful Called after the assembly re-rendering.

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

props

Update: forceUpdate

forceUpdate([function callback])

Parameter Description

• callback, optional parameters, the callback function. This function will be called after the component render () method call.

forceUpdate () method causes the component that calls itself render () method to re-render the sub-assembly component, the component will call your own render (). However, when the assembly re-rendered, and still reads this.props this.state, if the state does not change, then React only updated DOM.

forceUpdate () method is suitable for outside this.props and redraw this.state components (such as: changes this.state after), notified by the method React call render ()

In general, you should avoid using forceUpdate (), and read only this.props and this.state state triggered by React render () calls.

Get DOM Node: findDOMNode

DOMElement findDOMNode()

• Return Value: DOM element DOMElement

If the component has been mounted to the DOM, the method returns the corresponding local browser DOM elements. When render return null or false when, this.findDOMNode () will return null. Read from the DOM value, this approach is useful, such as: Gets the value of the form field and do some DOM manipulation.

Analyzing components mounted state: isMounted

bool isMounted()

• Return Value: true or false, indicating whether the component is mounted to the DOM

isMounted () method is used to determine whether the components are mounted to the DOM. You can use this method to ensure that the setState () and forceUpdate () call in the asynchronous scenario can not go wrong.

Herein by reference: http: //itbilu.com/javascript/react/EkACBdqKe.html