• 组件 API
    • React.Component
      • setState
      • replaceState
      • forceUpdate
      • getDOMNode
      • isMounted
      • setProps
      • replaceProps

    组件 API

    React.Component

    当渲染时，React 组件的实例在 React 内部被创建。这些实例在随后的渲染中被重复使用，并可以在组件方法中通过 this 访问。唯一的在 React 之外获取 React 组件实例句柄的方法是保存 ReactDOM.render 的返回值。在其它组件内，你可以使用 refs 得到相同的结果。

    setState

    1. void setState(
    2.   function|object nextState,
    3.   [function callback]
    4. )

    执行一个 nextState 到当前 state 的浅合并。这是你从事件处理器和服务器请求回调用来触发 UI 更新的主要手段。

    第一个参数可以是一个对象（包含0或者多个keys来更新）或者一个（state 和 props的）函数，它返回一个包含要更新的keys的对象。

    这里是一个简单的运用:

    1. setState({mykey: 'my new value'});

    也可以以 function(state, props) 传递一个函数。当你想要把一个在设置任何值之前参考前一次 state+props 的值的原子更新放在队列中 这会有很用。例如，假如我们想在 state 增加一个值:

    1. setState(function(previousState, currentProps) {
    2.   return {myInteger: previousState.myInteger + 1};
    3. });

    第二个（可选）的参数是一个将会在 setState 完成和组件被重绘后执行的回调函数。

    注意:

    绝对不要 直接改变 this.state，因为之后调用 setState() 可能会替换掉你做的改变。把 this.state 当做是不可变的。

    setState() 不会立刻改变 this.state，而是创建一个即将处理的 state 转变。在调用该方法之后访问 this.state 可能会返回现有的值。

    对 setState 的调用没有任何同步性的保证，并且调用可能会为了性能收益批量执行。

    setState() 将总是触发一次重绘，除非在 shouldComponentUpdate() 中实现了条件渲染逻辑。如果可变对象被使用了，但又不能在 shouldComponentUpdate() 中实现这种逻辑，仅在新 state 和之前的 state 存在差异的时候调用 setState() 可以避免不必要的重新渲染。

    replaceState

    1. void replaceState(
    2.   object nextState,
    3.   [function callback]
    4. )

    类似于 setState()，但是删除任何 先前存在但不在 nextState 里的 state 键。

    注意:

    这个方法在从 React.Component 扩展的 ES6 class 组件里不可用。它也许会在未来的 React 版本中被完全移除。

    forceUpdate

    1. void forceUpdate(
    2.   [function callback]
    3. )

    默认情况下，当你的组件的 state 或者 props 改变，你的组件将会重绘。然而，如果它们隐式的改变（例如：在对象深处的数据改变了但没有改变对象本身）或者如果你的 render() 方法依赖于其他的数据，你可以用调用 forceUpdate() 来告诉 React 它需要重新运行 render()。

    调用 forceUpdate() 将会导致 render() 跳过 shouldComponentUpdate() 在组件上被调用，这会为子级触发正常的生命周期方法。包括每个子级的 shouldComponentUpdate() 方法。如果标记改变了，React 仍仅只更新 DOM。

    通常你应该试着避免所有对 forceUpdate() 的使用并且在 render() 里只从 this.props 和 this.state 读取。这会使你的组件 “纯粹” 并且你的组件会更简单和高效。

    getDOMNode

    1. DOMElement getDOMNode()

    如果这个组件已经被挂载到了 DOM，它返回相应的浏览器原生的 DOM 元素。这个方法对于读取 DOM 的值很有用，比如表单域的值和执行 DOM 的测量。如果 render 返回 null 或者 false 的时候，this.getDOMNode() 返回 null。

    Note:

    getDOMNode 被废弃了，已经被 ReactDOM.findDOMNode() 替换.

    这个方法在从 React.Component 扩展的 ES6 class 组件里不可用。它也许会在未来的 React 版本中被完全移除。

    isMounted

    1. boolean isMounted()

    如果组件渲染到了 DOM 中，isMounted() 返回 true，否则返回 false。可以使用该方法来控制对 setState() 和 forceUpdate() 的异步调用。

    注意:

    这个方法在从 React.Component 扩展的 ES6 class 组件里不可用。它也许会在未来的 React 版本中被完全移除,所以你也要移除它 start migrating away from isMounted() now

    setProps

    1. void setProps(
    2.   object nextProps,
    3.   [function callback]
    4. )

    当和一个外部的 JavaScript 应用整合的时候，你也许会想用 ReactDOM.render() 给 React 组件标示一个改变。

    在根组件上调用 setProps() 会改变他的属性并触发一次重绘。另外，你可以提供一个可选的回调函数，一旦 setProps 完成并且组件被重绘它就执行。

    注意:

    这个方法被弃用了并会很快移除.这个方法在从 React.Component 扩展的 ES6 class 组件里不可用. 取代调用 setProps,试着以新的 props 再次调用 ReactDOM.render(). 更多的注意事项,见我们的blog post about using the Top Level API

    如果可能，上述的在同一个节点上再次调用 ReactDOM.render() 的方法是优先替代的。它往往使更新更容易理解。（两种方法并没有显著的性能区别。）

    这个方法仅能在根组件上被调用。也就是说，它仅在直接传给 ReactDOM.render() 的组件上可用，在它的子级上不可用。如果你倾向于在子组件上使用 setProps()，不要利用响应式更新，而是当子组件在 render() 中创建的时候传入新的 prop 到子组件中。

    replaceProps

    1. void replaceProps(
    2.   object nextProps,
    3.   [function callback]
    4. )

    类似于 setProps()，但是删除任何先前存在的 props，而不是合并这两个对象。

    注意:

    这个方法被弃用了并会很快移除.这个方法在从 React.Component 扩展的 ES6 class 组件里不可用. 取代调用 replaceProps,试着以新的 props 再次调用 ReactDOM.render(). 更多的注意事项,见我们的blog post about using the Top Level API