React学习记录：JSX

在React中启用了javaScript的语法扩展，也就是所谓的JSX，JSX可以让我们在javaScript中书写如同HTML一样的代码：

class AddTodo extends Component {
  render() {
    return (
      <div>
        <input type='text' ref='input' />
        <Test/>
        <button onClick={(e) => this.handleClick(e)}>
          Add
        </button>
      </div>
    )
  }
}

这是一个React组件，render包含的就是一段JSX的代码。
跟HTML很像，像亲兄弟一样，但它们并不完全一样，在JSX中都可以使用HTML的标签，但反过来就不行了。

在JSX中的元素，除了HTML标签之外，还可以是任何的React组件，在上面的代码我们可以看到，代码中有一个<Test/>组件，被直接放在了JSX的代码中，就像直接使用HTML标签一样，而HTML则只能写入HTML标签。

那么React如何来确认一个元素是React组件，还是HTML元素呢？

React判断一个元素是HTML元素还是React组件的原则就是看第一个字母是否大写。

在JSX中可以通过onClick给元素添加事件函数，如上代码中<button>中的元素所示，事件的添加的方式与在HTML中写在行间的onclick很像，但它们之间也是有区别的。

• 在HTML行间添加onclick的事件函数是在全局环境下执行的，会污染全局环境，很容易产生不可预料的后果
  给过多的DOM元素添加onclick事件可能会影响网页性能
• 对于使用了onclick事件的DOM元素，如果要动态的从DOM树中删除，需要把对应的事件注销，如果忘了注销可能会造成内存泄露
• 在JSX中则不存在上述的问题，JSX中的onClick挂载的每一个方法都可以控制在组件内部，不会污染全局变量，在JSX中使用onClick，并不是直接产生直接使用onclickde的HTML，而是使用了事件委托，无论出现了多少给onclick，其实都只在DOM树上添加了一个事件函数，挂在最顶层的DOM节点上，事件委托的性能显然是要优于HTML的onclick的，且React可以控制组件的生命周期，在组件卸载时可以清除相关的事件函数，内存泄露也不再是一个问题。