乐趣区

关于html:React笔记事件处理

jiezi

产生问题起因：对 js 或者 es 语法不相熟

围绕上面两个问题：

  1. React 的 onClick 办法与 HTML 的 onclick 区别

2. addEventListener 和 onClick 的区别

  1. 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 的设计目标就是在函数体外部，指代函数以后的运行环境。

退出移动版