关于JSX与HTML的差异

JSX：是javascript的语法扩展，让我们在javascript中可以编写像html一样的代码。

JSX与HTML定义行内事件的差异：

1、JSX中，添加行内onClick事件，不同于HTML行内事件，jsx中的原理是使用事件代理的方式，进行添加的事件。原因如下：

（1）jsx中，既可以给dom元素，又可以给react组件进行添加事件。

注意： react中区分dom元素和react组件的方式是根据首字母的大小写判定的。

（2）jsx中，通过onClick挂载的每一个函数都可以控制在单个组件中，不会污染全局。

（3）jsx中，无论给多少个组件进行事件挂载，都是通过事件委托，给一个dom元素进行事件挂载的，效率高

（4）在react的生命周期中，当unmount时，会清除所有的相关事件，避免了内存泄露。

（5）在jsx中，也可以定义样式。见例子。

2、HTML中，添加行内onclick事件，不推荐，原因如下

（1）onclick事件是在全局环境下执行的，污染全局

（2）直接给很多dom元素添加onclick事件，影响网页性能。

（3）对于使用onclick的dom元素进行动态删除时，需要及时删除掉dom元素的事件，否则如果直接删除dom，容易造成内存泄露。