React笔记——事件处理 htmlreact.js

产生问题原因：对js或者es语法不熟悉
围绕下面两个问题：

React的onClick方法与HTML的onclick区别

2. addEventListener 和onClick的区别

this指向问题

1.React的onClick方法与HTML的onclick区别
React 事件的命名采用小驼峰式（camelCase），而不是纯小写。
使用 JSX 语法时你需要传入一个函数作为事件处理函数，而不是一个字符串。
html中的onclick传入的是一个脚本
在 React 中另一个不同点是你不能通过返回 false 的方式阻止默认行为。你必须显式的使用 preventDefault。例如，传统的 HTML 中阻止表单的默认提交行为，你可以这样写：
2. html中addEventListener 和onclick的区别
onclick事件在同一时间只能指向唯一对象,即后一次的点击会覆盖前面一次的
addEventListener给一个事件注册多个listener，按先后顺序执行，不会覆盖。
addEventListener对任何DOM都是有效的，而onclick仅限于HTML
addEventListener可以控制listener的触发阶段，（捕获/冒泡）。对于多个相同的事件处理器，不会重复触发，不需要手动使用removeEventListener清除
IE9使用attachEvent和detachEvent
使用 React 时，你一般不需要使用 addEventListener 为已创建的 DOM 元素添加监听器。事实上，你只需要在该元素初始渲染的时候添加监听器即可。
3. this绑定问题
发现onClick = {()=>this.handleClick(i)} 和 onClick = {this.handleClick} 这两种写法，在 JavaScript 中，class 的方法默认不会绑定 this。
箭头函数问题在于每次渲染 LoggingButton 时都会创建不同的回调函数。在大多数情况下，这没什么问题，但如果该回调函数作为 prop 传入子组件时，这些组件可能会进行额外的重新渲染。我们通常建议在构造器中绑定或使用 class fields 语法来避免这类性能问题。
bind绑定是在constructor中添加了this.handleClick = this.handleClick.bind(this)
【React笔记——事件处理】JavaScript 允许在函数体内部，引用当前环境的其他变量。this的设计目的就是在函数体内部，指代函数当前的运行环境。