浏览器中的工作原理.pdfVIP

浏览器中的⼯作原理 React提供了强大的抽象，让你在大多数应用场景中不再直接操作DOM，但是有时你 需要 单地调用底层的API，或者借助于第三方库或已有的代码。 虚拟DOM React是很快的，因为它从不直接操作DOM。React在内存中维护一个快速响应的 DOM描述。render()方法返回一个DOM的描述，React能够利用内存中的描述来 快速地计算出差异，然后更新浏览器中的DOM。 另外，React实现了一个完备的虚拟事件系统，尽管各个浏览器都有自己的怪异行 为，React确保所有事件对象都符合W3C规范，并且持续冒泡，用一种高性能的方式 跨浏览器 （and everything bubbles consistently and in a performant ay cross-bro ser）。你甚至可以在IE8中使用一些HTML5的事件！ 大多数时候你应该呆在React的“虚拟浏览器”世界里面，因为它性能更加好，并且容 易思考。但是，有时你 单地需要调用底层的API，或许借助于第三方的类似于 jQuery插件这种库。React为你提供了直接使用底层DOM API的途径。 Refs和getDOMNode() 为了和浏览器交互，你将需要对DOM节点的引用。每一个挂载的React组件有一 个getDOMNode()方法，你可以调用这个方法来获取对该节点的引用。 注意： getDOMNode()仅在挂载的组件上有效 （也就是说，组件已经被放进了DOM 中）。如果你尝试在一个未被挂载的组件上调用这个函数 （例如在创建组件 的 render() 函数中调用getDOMNode() ），将会抛出异常。 为了获取一个到React组件的引用，你可以使用this 来得到当前的React组件，或 者你可以使用refs来指向一个你拥有的组件。它们像这样工作： var MyComponent = React.createClass({ handleClick: unction() { // Explicitly ocus the text inpu t using the raw DOM API. this.re s.myTextInput.getDOMNode(). ocus(); }, render: unction() { // The re attribute adds a re erence to the component to // this.re s when the component is mounted. return ( div input type=text re =myTextInput / input type=button value=Focus the text input onClick={this.handleClick} / /div ); } }); React.render( MyComponent /, document.getElementById(example) ); 更多关于 Refs 为了学习更多有关Refs的内容，包括如何有效地使用它们，参考我们的更多关于Refs 文档。 组件生命周期 组件的生命周期包含三个主要部分： 挂载： 组件被插入到DOM中。 更新： 组件被重新渲染，查明DOM是否应该刷新。 移除： 组件从DOM中移除。 React提供生命周期方法，你可以在这些方法中放入自己的代码。我们提供will方 法，会在某些行为发生之前调用，和did方法，会在某些行为发生之后调用。 挂载 getInitialState(): object 在组件被挂载之前调用。状态化的组件应该 实现这个方法，返回初始的state数据。 componentWillMount()在挂载发生之前立即被调用。 componentDidMount()在挂载结束之后马上被调用。需要DOM节点的初始 化操作应该放在这里。 更新 componentWillReceiveProps(obj