React对底层的代码作了封装,在大多数情况下,我们不须要直接去操纵DOM。然则有时刻我们照样须要运用到底层的代码的,比方输入框猎取核心,这个时刻可以经由过程第三方的类库或许React供应的API完成。
假造DOM
React之所以快,是因为它不直接操纵DOM。React将DOM构造存储在内存中,然后同render()的返回内容举行比较,计算出须要修改的处所,末了才反应到DOM中。
另外,React完成了一套完全的事宜合成机制,可以坚持事宜冒泡的一致性,跨浏览器实行。以至可以在IE8中运用HTML5的事宜。
大部份情况下,我们都是在构建React的组件,也就是操纵假造DOM。然则有时刻我们须要接见底层的API,能够或经由过程运用第三方的插件来完成我们的功用,如jQuery。React也供应了接口让我们操纵底层API。
Refs和findDOMNode()
为了同浏览器交互,我们有时刻须要猎取到实在的DOM节点。我们可以经由过程挪用React的React.findDOMNode(component)猎取到组件中实在的DOM。
React.findDOMNode()只在mounted组件中挪用,mounted组件就是已衬着在浏览器DOM构造中的组件。假如你在组件的render()要领中挪用React.findDOMNode()就会抛出非常。
看官方的示例:
var MyComponent = React.createClass({
handleClick: function() {
// Explicitly focus the text input using the raw DOM API.
React.findDOMNode(this.refs.myTextInput).focus();
},
render: function() {
// The ref attribute adds a reference to the component to
// this.refs when the component is mounted.
return (
<div>
<input type="text" ref="myTextInput" />
<input
type="button"
value="Focus the text input"
onClick={this.handleClick}
/>
</div>
);
}
});
React.render(
<MyComponent />,
document.getElementById('example')
);
组件的生命周期
组件的生命周期主要由三个部份构成:
- Mounting:组件正在被插进去DOM中
- Updating:假如DOM须要更新,组件正在被从新衬着
- Unmounting:组件从DOM中移除
React供应了要领,让我们在组件状况更新的时刻挪用,will标识状况最先之前,did示意状况完成后。比方componentWillMount就示意组件被插进去DOM之前。
Mounting
- getInitialState():初始化state
- componentWillMount():组件被相差DOM前实行
- componentDidMount():组件被插进去DOM后实行
Updating
- componentWillReceiveProps(object nextProps):组件猎取到新的属性时实行,这个要领应当将this.props同nextProps举行比较,然后经由过程this.setState()切换状况
- shouldComponentUpdate(object nextProps, object nextState):组件发作转变时实行,应当将this.props和nextProps、this.stats和nextState举行比较,返回true或false决议组件是不是更新
- componentWillUpdate(object nextProps, object nextState):组件更新前实行,不能在此处挪用this.setState()。
- componentDidUpdate(object prevProps, object prevState):组件更新后实行
Unmounting
- componentWillUnmount():组件被移除前实行
Mounted Methods
- findDOMNode():猎取实在的DOM
- forceUpdate():强迫更新