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()：強制更新