React进修笔记—假造DOM

2024年3月26日 200次阅读 来源: 小俞

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
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞