react -- Dom 与 事件

Dom节点用的比较少。但是先研究下还是有用处的，万一哪个功能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。。这个写法好恶心啊！
写一个还记得，两个，三个，每个都要复制粘贴，不专业的人看出来这是傻逼操作。

这样改下声明的函数：

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 />