产生问题起因：对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)
JavaScript 容许在函数体外部，援用以后环境的其余变量。this的设计目标就是在函数体外部，指代函数以后的运行环境。