ReactJs组件的生命周期及其在浏览器中的工作原理

浏览器中的工作原理
2016年2月23日
15:54
1、虚拟DOM

React是很快的，因为它从不直接操作DOM。React在内存中维护一个快速响应的DOM描述。render()方法返回一个DOM的描述，React能够利用内存中的描述来快速地计算出差异，然后更新浏览器中的DOM。

另外，React实现了一个完备的虚拟事件系统，尽管各个浏览器都有自己的怪异行为，React确保所有事件对象都符合W3C规范，并且持续冒泡，用一种高性能的方式跨浏览器（andeverything bubbles consistently and in a performant waycross-browser）。你甚至可以在IE8中使用一些HTML5的事件！

大多数时候你应该呆在React的“虚拟浏览器”世界里面，因为它性能更加好，并且容易思考。但是，有时你简单地需要调用底层的API，或许借助于第三方的类似于jQuery插件这种库。React为你提供了直接使用底层DOMAPI的途径。

2、Refs和getDOMNode()

为了和浏览器交互，你将需要对DOM节点的引用。每一个挂载的React组件有一个getDOMNode()方法，你可以调用这个方法来获取对该节点的引用。

注意：

getDOMNode()仅在挂载的组件上有效（也就是说，组件已经被放进了DOM中）。如果你尝试在一个未被挂载的组件上调用这个函数（例如在创建组件的render()函数中调用getDOMNode()），将会抛出异常。

为了获取一个到React组件的引用，你可以使用this来得到当前的React组件，或者你可以使用refs来指向一个你拥有的组件。它们像这样工作：

varMyComponent = React.createClass({

handleClick: function() {

// Explicitly focus the text input usingthe raw DOM API.

this.refs.myTextInput.getDOMNode().focus();

},

render: function() {

// The ref attribute adds a reference tothe component to

// this.refs when the component is mounted.

return (

<div>

<input type="text"ref="myTextInput" />

<input

type="button"

value="Focus the textinput"

onClick={this.handleClick}

/>

</div>

);

}

});

React.render(

<MyComponent />,

document.getElementById('example')

);

3、组件生命周期

组件的生命周期包含三个主要部分：

挂载： 组件被插入到DOM中。

更新： 组件被重新渲染，查明DOM是否应该刷新。

移除： 组件从DOM中移除。

React提供生命周期方法，你可以在这些方法中放入自己的代码。我们提供will方法，会在某些行为发生之前调用，和did方法，会在某些行为发生之后调用。

挂载

getInitialState(): object在组件被挂载之前调用。状态化的组件应该实现这个方法，返回初始的state数据。

componentWillMount()在挂载发生之前立即被调用。

componentDidMount()在挂载结束之后马上被调用。需要DOM节点的初始化操作应该放在这里。

更新

componentWillReceiveProps(object nextProps)当一个挂载的组件接收到新的props的时候被调用。该方法应该用于比较this.props和nextProps，然后使用this.setState()来改变state。

shouldComponentUpdate(object nextProps, object nextState): boolean当组件做出是否要更新DOM的决定的时候被调用。实现该函数，优化this.props和nextProps，以及this.state和nextState的比较，如果不需要React更新DOM，则返回false。

componentWillUpdate(object nextProps, object nextState)在更新发生之前被调用。你可以在这里调用this.setState()。

componentDidUpdate(object prevProps, object prevState)在更新发生之后调用。

移除

componentWillUnmount()在组件移除和销毁之前被调用。清理工作应该放在这里。

挂载的方法（Mounted Methods）

挂载的复合组件也支持如下方法：

getDOMNode(): DOMElement可以在任何挂载的组件上面调用，用于获取一个指向它的渲染DOM节点的引用。

forceUpdate()当你知道一些很深的组件state已经改变了的时候，可以在该组件上面调用，而不是使用this.setState()。

4、更多

在从render 方法中返回 UI 结构之后，你可能想冲出 React 虚拟 DOM 的限制，在 render返回的组件实例上调用某些方法。通常来说，这样做对于应用中的数据流动是不必要的，因为活跃的数据（ Reactive data ）流总是确保最新的 props 被传递到每一个从 render() 输出的子级中去。然而，仍然有几个场景使用这种方式是必须的，或者说是有益的。

考虑这样的场景：让 <input /> 元素（存在于实例的子层级中）在值被设为空字符串 ''之后获得焦点。

var App = React.createClass({

getInitialState: function() {

return {userInput: ''};

},

handleChange: function(e) {

this.setState({userInput:e.target.value});

},

clearAndFocusInput: function() {

this.setState({userInput: ''}); // Clearthe input

// We wish to focus the <input />now!

},

render: function() {

return (

<div>

<divonClick={this.clearAndFocusInput}>

Click to Focus and Reset

</div>

<input

value={this.state.userInput}

onChange={this.handleChange}

/>

</div>

);

}

});
注意，在示例中，我们想“告诉” input 元素一些东西 - 这些东西过会儿之后已无法从它的 props中推算出来。在这个场景中，我们想“通知” input 元素，现在应该处于获取焦点状态。然而，此处有一些障碍。从 render() 中返回的内容并不是你实际创建的子组件的组合，仅仅是一个某一刻某个组件实例的 描述 -
一个快照。

注意：

记住，从 render() 中返回的内容并不是实际渲染出来的子组件实例。从 render()返回的仅仅是子组件层级树实例在特定时间的一个描述。

这意味着千万不要紧紧抓住 render() 返回的东西不放，然后还一厢情愿地希望生成自己想象中的东西。

// counterexample: DO NOT DO THIS!

render: function() {

var myInput = <input />; // I'm going to try to call methodson this

this.rememberThisInput = myInput; // inputat some point in the future! YAY!

return (

<div>

<div>...</div>

{myInput}

</div>

);

}

在这个反例中，<input /> 仅仅是一个 <input
/> 组件的描述。该描述用于创建一个真正的 <input
/> 的支撑实例（backing instance ）。

所以，我们如何与真正的 input 支撑实例（ backing instance ） 交流？

完成示例

varApp = React.createClass({

getInitialState: function() {

return {userInput: ''};

},

handleChange: function(e) {

this.setState({userInput:e.target.value});

},

clearAndFocusInput: function() {

// Clear the input

this.setState({userInput: ''}, function(){

// This code executes after thecomponent is re-rendered

this.refs.theInput.getDOMNode().focus(); // Boom! Focused!

});

},

render: function() {

return (

<div>

<divonClick={this.clearAndFocusInput}>

Click to Focus and Reset

</div>

<input

ref="theInput"

value={this.state.userInput}

onChange={this.handleChange}

/>

</div>

);

}

});
在这个例子中， render 函数返回一个 <input /> 实例的描述。但是真正的实例通过this.refs.theInput 获取。只要render
返回的某个子组件带有 ref="theInput"，this.refs.theInput 就会获取到正确的实例。这甚至对于更高层的（ 非 DOM ）组件生效，例如 <Typeaheadref="myTypeahead"
/>。

优点：

可以在组件类里面定义任何公共的方法（比如在输入之前的重置方法），然后通过 refs 来调用这些公共的方法（比如 this.refs.myTypeahead.reset() ）。

管理 DOM 几乎总是需要冲出“本地”组件的限制，比如通过this.refs.myInput.getDOMNode() 获取 <input
/> 元素的底层 DOM 节点。 Refs 是做这件事唯一可靠的方式。

Refs 是被自动管理的！如果某个子级实例被销毁了，它的 ref 也会自动销毁。不用考虑内存问题（除非你自己做一些疯狂的操作，保存了什么引用）。