事件处理
通过 onXxxx 属性指定事件处理函数（小驼峰形式）
通过 event.target 可以得到发生事件的 dom 元素
使用 JSX 语法时你需要传入一个函数作为事件处理函数，而不是一个字符串。
在原生 DOM 中，我们可以通过返回 false 来阻止默认行为，但是这在 React 中是行不通的，在 React 中需要明确使用 preventDefault() 来阻止默认行为。
事件回调函数里的 event 是经过 React 特殊处理过的（遵循 W3C 标准），所以可以放心地使用它，而不用担心跨浏览器的兼容性问题。
注意：在使用事件回调函数的时候，需要特别注意 this 的指向问题。因为在 React 里，除了构造函数和生命周期钩子函数里会自动绑定 this 为当前组件外，其他的都不会自动绑定 this 的指向为当前组件，因此需要我们自己注意好 this 的绑定问题。
通常而言，在一个类方式声明的组件里事件回调，需要在组件的 constructor 里绑定回调方法的 this 指向。
render函数
当组件的 state 或者 props 发生改变的时候，render 函数就会重新执行
当父组件的 render 函数重新执行时，子组件的 render 函数也会重新
执行虚拟DOM
本质上其实就是一个 object 对象；
虚拟 dom 上的属性比较少，真实 dom 属性多，因为虚拟 dom 只在 react 内部使用，用不到那么多的属性
虚拟 dom 最终会被 react 转换成真实 dom，呈现再页面上
大致过程：state数据 jsx模版
数据+模版 结合，生成虚拟DOM（虚拟DOM就是一个JS对象，用它来描述真实的DOM）（损耗了性能）
用虚拟DOM的结构生成真实的DOM来显示state发生改变
数据+模版 生成新的虚拟DOM（极大提升了性能）
比较原始虚拟DOM和新的虚拟DOM的区别，找差异（极大提升了性能）直接操作DOM，改变内容
优点：性能提升使得跨端应用得以实现
虚拟 DOM 中的 key 的作用：当状态中的数据发生改变时，react 会根据新数据生成新虚拟 DOM随后 react 会进行新虚拟 DOM和旧虚拟 DOM的 diff 算法比较
若旧 DOM中找到了与新 DOM相同的 key，则会进一步判断两者的内容是否相同如果也一样，则直接使用之前的真实 DOM，如果内容不一样，则会生成新的真实 DOM，替换掉原先的真实 DOM
若旧 DOM中没找到与新 DOM相同的 key，则直接生成新的真实 DOM，然后渲染到页面
不用 index 作为 key 的原因：若对数据进行逆序添加、逆序删除等破坏顺序的操作时会产生不必要的真实 DOM 更新，造成效率低下如果结构中还包含输入类的 dom，会产生错误 dom 更新，出现界面异常
diff算法
在 react 中如果某个组件的状态发生改变，react 会把此组件以及此组件的所有后代组件重新渲染
不过重新渲染并不代表会全部丢弃上一次的渲染结果，react 还是会通过 diff 去比较两次的虚拟 dom 最后 patch 到真实的 dom 上diff 算法只比较同一层级，不跨级比较
tag 不相同则直接删掉重建，不再深度比较；
tag 和 key 两者都相同，则认为是相同节点，也不再深度比较虽然如此，如果组件树过大，diff 其实还是会有一部分的开销因此react 内部通过 fiber 优化 diff 算法，外部建议开发者使用 SCU 和pureComponent
