第二章，UI交互

一个简单例子：

import React, {Component} from 'react';
import {render} from 'react-dom';

export default class LikeButton extends Component {
  state = {liked: false}

  // ES6+ React不会自动绑定实例对象this到方法上，
  // 所以需要使用箭头函数,或手动进行绑定。
  handleClick = event => {
    this.setState({liked: !this.state.liked});
  }

  render() {
    return (
      <p onClick={this.handleClick}>
        You {this.state.liked? 'like': 'haven\'t liked'} this.
        Click to toggle.
      </p>
    );
  }
}

render(<LikeButton />, document.getElementById('app');

事件代理

React不会将事件处理方法绑定到对应的DOM上，当React启动时，它会用一个事件监听器来监听它所管理的所有组件的事件。当组件挂载或者移除的时候，它仅仅是增加或移除一个内部映射。当事件发生时，React会通过该映射来调用对应组件的事件处理方法。

组件即是状态机。

this.state与UI的状态一一对应。

State工作原理

通过this.setState(data, callback)来改变组件的state。这个方法将data赋值给this.state，然后重新渲染组件。当组件渲染完毕后callback会被调用。

state 最佳实践

• 保持组件拥有较少的state。
• state中包含最少的能表达你UI状态的数据，不应该包含计算过的数据、组件、从props中复制的数据。
• 一些组件［子组件］只负责渲染，通过一个组件［顶层组件］来管理state。通过props来传递状态变化。