React学习：事件处理

React ：元素构成组件，组件又构成应用。
React核心思想是组件化，其中 组件 通过属性(props) 和 状态(state)传递数据。

---

一、React 元素 与 DOM 元素 事件处理区别

（1）命名：React 事件使用驼峰命名，而不是全部小写
（2）写法上：
HTML里：

<!-- onclick里c小写,用引号包围内容(想想JSX怎么包裹变量你就懂了)-->
<!-- onclick传递的是函数的执行过程，
	所以还可以像这样：onclick="alert('ss')"-->
<button onclick="activateLasers()">
  Activate Lasers
</button>

React 中：

<!-- onClick里c大写，用{}包围内容-->
<!-- onClick里传递的必须是函数，如要加语句 必须像下面这样：
		<button onClick=()=>{alert('ss')}>其实也是函数 -->
		<button onClick={activateLasers}>
		  Activate Lasers
		</button>

（3）阻止默认行为
在 React 中你不能通过返回 false（即 return false; ） 来阻止默认行为。必须明确调用 preventDefault 。
例如，阻止链接打开一个新页面的默认行为

HTML里：

<a href="#" onclick="
	console.log('The link was clicked.'); 
	return false;
">
  Click me
</a>

而在 React 中, 应该这么写:

function ActionLink() {
	  function handleClick(e) {
	    e.preventDefault();
	    console.log('The link was clicked.');
	  }
	
	  return (
	    <a href="#" onClick={handleClick}>
	      Click me
	    </a>
	  );
}
ReactDOM.render(
  <ActionLink/>,
  document.getElementById('root')
);

或者这样写

function ActionLink() {
      return (
        <a href="#" onClick={() => {
                e.preventDefault();
                console.log('The link was clicked.');
            }
        }>
          Click me
        </a>
      );
}
ReactDOM.render(
  <ActionLink/>,
  document.getElementById('root')
);

显然第一种写法更方便阅读。

---

这里需要注意的：我们是 给组件里的HTML元素 添加事件，而不是给组件本身添加事件。
例如下面这种写法是错误的

function ActionLink() {
      function handleClick(e) {
        e.preventDefault();
        console.log('The link was clicked.');
      }

      return (
        <a href="#">
          Click me
        </a>
      );
}
ReactDOM.render(
  //不是给组件添加事件，是给组件元素添加
  <ActionLink  onClick={handleClick}/>,
  document.getElementById('root')
);

---

二、绑定事件 及 this指向

1、匿名函数绑定事件，箭头函数解决this指向

缺点： 当事件响应逻辑比较复杂时，匿名函数的代码量会很大，会导致render函数变得臃肿，不容易直观地看出组件最终渲染出的元素结构。另外，每次render方法调用时，都会重新创建一个匿名函数对象，带来额外的性能开销，当组件的层级越低时，这种开销就越大，因为任何一个上层组件的变化都可能会触发这个组件的render方法。当然，在大多数情况下࿰