## 一、单向数据流 > 一个组件可以选择将state向下传递，作为其子组件的props属性，且任何State始终由某个特定组件所有，从该state导出的任何数据或UI只能影响树中”下方”的组件。 > 所有组件都是完全独立的 ## 二、处理事件 > 通过 React 元素处理事件跟在 DOM 元素上处理事件非常相似。但是有一些语法上的区别： - React 事件使用驼峰命名，而不是全部小写。 - 通过 JSX , 你传递一个函数作为事件处理程序，而不是一个字符串。 ``` # HTML 中： <button onclick="activateLasers()"> Activate Lasers </button> # React中 <button onClick={activateLasers}> Activate Lasers </button> ``` > 在 React 中你不能通过返回 false 来 **阻止默认行为**。必须明确调用 **preventDefault** 。 ``` # HTML中 <a href="#" onclick="console.log('The link was clicked.'); return false"> Click me </a> # React中 ``` - 这里， e 是一个合成的事件。 React 根据 W3C 规范 定义了这个合成事件，所以你不需要担心跨浏览器的兼容性问题。查看 SyntheticEvent 参考指南了解更多。 - 当使用一个 ES6 类 定义一个组件时，通常的一个事件处理程序是类上的*一个方法*。例如， Toggle 组件渲染一个按钮，让用户在 “ON” 和 “OFF” 状态之间切换： ``` class Toggle extends React.Component { constructor(props) { super(props); this.state = {isToggleOn: true}; // 这个绑定是必要的，使`this`在回调中起作用 this.handleClick = this.handleClick.bind(this); } handleClick() { this.setState(prevState => ({ isToggleOn: !prevState.isToggleOn })); } render() { return ( <button onClick={this.handleClick}> {this.state.isToggleOn ? 'ON' : 'OFF'} </button> ); } } ReactDOM.render( <Toggle />, document.getElementById('root') ); ``` - 在 JavaScript 中，类方法默认没有 `绑定this` 的。如果你忘记绑定 this.handleClick 并将其传递给onClick，那么在直接调用该函数时，this 会是 undefined 。 ### 2.2 传参给事件处理程序 ``` <button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button> <button onClick={this.deleteRow.bind(this, id)}>Delete Row</button> ``` - 上述两行代码是等价的，分别使用箭头函数和bind - 通过 **箭头函数**的方式，事件对象 **必须显式**的进行传递，但是通过 bind 的方式，事件对象以及更多的参数将会被隐式的进行传递。