React进修笔记—假造DOM

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():强迫更新
    原文作者:小俞
    原文地址: https://segmentfault.com/a/1190000002676131
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞