Dom節(jié)點用的比較少。但是先研究下還是有用處的，萬一哪個功能react不好實現，我們還能用自己強大的原生編程完成。

先說下 添加HTML

。哦。對這個也是比較偏門的

Code

// 插入
dangerouslySetInnerHTML={createMarkup()}
// 聲明
function createMarkup() {
  return {__html: '<h2 style="color: #ddd">HTML</h2>'};
}

事件綁定Call

一般是這樣的

  constructor(props) {
    super(props)
    this.state = {msg: 'Home Page', index: true}
        
    // This binding is necessary to make `this` work in the callback
    this.handleClick = this.handleClick.bind(this)
  }
  handleClick(e) {
    this.setState(prevState => ({
      msg: prevState.index ? 'Home Page' : 'Updata Home done',
      index: !prevState.index
    }));
  }

返回bind。。這個寫法好惡心??！
寫一個還記得，兩個，三個，每個都要復制粘貼，不專業(yè)的人看出來這是傻逼操作。

這樣改下聲明的函數：

handleClick = (e) => {
    this.setState(prevState => ({
      msg: prevState.index ? 'Home Page' : 'Updata Home done',
      index: !prevState.index
    }));
  }

不過，這樣會生成回調，每次都會重新渲染，大多數情況下是可以這樣用的，但是傳給子組件以及更下級組件的時候，就會浪費性能。

我不知道這樣翻譯對不對，官方的說法：
The problem with this syntax is that a different callback is created each time the LoggingButton renders. In most cases, this is fine. However, if this callback is passed as a prop to lower components, those components might do an extra re-rendering. We generally recommend binding in the constructor or using the property initializer syntax, to avoid this sort of performance problem.

<br />

參考鏈接： https://facebook.github.io/react/docs/refs-and-the-dom.html

--END--
<br />