React学习笔记（2）

1.  React 事件处理

  (1) react 事件绑定属性的命名采用驼峰式写法；   如果采用JSX的语法你需要传入一个函数作为事件处理函数；

如： <button onClick={handleClick} >按钮</button>

  (2) react 必须要用使用 preventDefault  方式去阻止默认行为。

function Test() {
  function handleClick(e) {
    e.preventDefault();
    console.log('该链接被点击');
  }
 
  return (
    <a href="#" onClick={handleClick}>
      按钮
    </a>
  );
}

2.  Keys 

  Keys 可以在DOM中的某些元素被增加或者删除的时候帮react 识别哪些元素发生了变化，因此你应当给数组中的每一个元素赋予一个确定的标识。  通常，使用来自数据的id 作为 元素的key

const listItems = todos.map((todo) =>
  <li key={todo.id}>
    {todo.text}
  </li>
);

注意点：

（1）元素的keys 只有在它和它的兄弟节点对比时才有意义；

（2）元素的key 在它的兄弟元素之间应该唯一；

（3）当在map() 方法的内部调用元素时， 最后为