Edit on GitHub

与浏览器协作

React提供了强大的抽象机制使你在大多数情况下免于直接接触DOM,但有时你仅仅只需要访问底层API,也许是为了与第三方库或者已有的代码协作。

虚拟 DOM #

React非常快速是因为它从不直接操作DOM。React维持了一个快速的内存中的DOM表示。render() 方法实际上返回一个对DOM的描述,然后React能将其与内存中的“描述”进行比较,以计算出最快速的方式更新浏览器。

此外,React实现了一个完备的合成事件(synthetic event)系统,以使得所有的事件对象都被保证符合W3C细则,而不论各个浏览器的怪癖,并且所有事件跨浏览器地一致并高效的冒泡(bubbles),你甚至能在IE8里使用一些HTML5事件!

大多数时间你应该和React的"伪造浏览器"呆在一起,因为它更高性能并且容易推理。然而,有时你只需要访问底层API,或许是为了与第三方库比如一个jQuery插件协作。React为你提供了安全舱口来直接使用底层API。

Refs 和 findDOMNode() #

为了与浏览器互动,你需要一个指向DOM node的引用。你可以连接一个 ref 到任何的元素,这允许你引用组件的 backing instance 。如果你需要在组件上调用命令式函数,或者想访问底层的DOM节点,它很有用。要了解更多关于 refs,包括更有效使用他们的方法,请查看我们的 关于Refs的更多内容 文档。

组件的生命周期 #

组件的生命周期有三个主要部分:

  • 挂载: 组件被注入DOM。
  • 更新: 组件被重新渲染来决定DOM是否应被更新。
  • 卸载: 组件从DOM中被移除。

React提供生命周期方法,以便你可以指定钩挂到这个过程上。我们提供了 will 方法,该方法在某事发生前被调用,did方法,在某事发生后被调用。

挂载 #

  • getInitialState(): object 在组件挂载前被调用。有状态组件(Stateful components) 应该实现此函数并返回初始state的数据。
  • componentWillMount() 在挂载发生前被立即调用。
  • componentDidMount() 在挂载发生后被立即调用。 需要DOM node的初始化应该放在这里。

更新 #

  • componentWillReceiveProps(object nextProps) 当挂载的组件接收到新的props时被调用。此方法应该被用于比较this.propsnextProps以用于使用this.setState()执行状态转换。
  • shouldComponentUpdate(object nextProps, object nextState): boolean 当组件决定任何改变是否要更新到DOM时被调用。作为一个优化实现比较this.propsnextPropsthis.statenextState ,如果React应该跳过更新,返回false
  • componentWillUpdate(object nextProps, object nextState) 在更新发生前被立即调用。你不能在此调用this.setState()
  • componentDidUpdate(object prevProps, object prevState) 在更新发生后被立即调用。

卸载 #

  • componentWillUnmount() 在组件被卸载和摧毁前被立即调用。清理应该放在这里。

已挂载的方法 #

Mounted 复合组件同样支持以下方法:

  • component.forceUpdate() 可以在任何已挂载的组件上调用,在你知道某些深处的组件状态在未使用 this.setState() 就被改变了时。

浏览器支持 #

React 支持绝大多数流行的浏览器,包括 Internet Explorer 9 及以上。

(我们不支持那些不支持 ES5 methods 的更老的浏览器,但你可能发现如果你的页面包含了类似 es5-shim and es5-sham 的填充物时是可以在更老的浏览器上运行的。是否做这一步取决于你自己。)