React入门（2）state 和 props 主要的区别在于 props 是不可变的，而 state 可以根据与用户交

一、事件处理

React 事件绑定属性的命名采用驼峰式写法，而不是小写。
如果采用 JSX 的语法你需要传入一个函数作为事件处理函数，而不是一个字符串(DOM 元素的写法)
在 React 中不能使用返回 false 的方式阻止默认行为，你必须明确的使用 preventDefault。

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isToggleOn: true};
    this.handleClick = this.handleClick.bind(this);// 这边绑定是必要的，这样 `this` 才能在回调函数中使用
  }
  handleClick() {
    this.setState(state => ({
      isToggleOn: !state.isToggleOn
    }));
  }
  render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
    );
  }
}

向事件处理程序传递参数

// id为传参

// 通过箭头函数的方式，事件对象必须显式的进行传递
<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
// 通过 bind 的方式，事件对象以及更多的参数将会被隐式的进行传递
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>

在 HTML 当中，像 <input><textarea><select> 这类表单元素会维持自身状态，并根据用户输入进行更新。但在React中，可变的状态通常保存在组件的状态属性中，并且只能用 setState() 方法进行更新。

二、组件API

1、设置状态：setState

setState(object nextState[, function callback])

nextState，将要设置的新状态，该状态会和当前的state合并
callback，可选参数，回调函数。该函数会在setState设置成功，且组件重新渲染后调用。

Tips：

setState()并不会立即改变this.state，而是创建一个即将处理的state。setState()并不一定是同步的，为了提升性能React会批量执行state和DOM渲染。
setState()总是会触发一次组件重绘，除非在shouldComponentUpdate()中实现了一些条件渲染逻辑。

2、替换状态：replaceState

replaceState(object nextState[, function callback])

nextState，将要设置的新状态，该状态会替换当前的state
callback，可选参数，回调函数。该函数会在replaceState设置成功，且组件重新渲染后调用。

3、设置属性：setProps

setProps(object nextProps[, function callback])

nextProps，将要设置的新属性，该状态会和当前的props合并
callback，可选参数，回调函数。该函数会在setProps设置成功，且组件重新渲染后调用。

Tips：

设置组件属性，并重新渲染组件。
props相当于组件的数据流，它总是会从父组件向下传递至所有的子组件中。

4、替换属性：replaceProps

replaceProps(object nextProps[, function callback])

nextProps，将要设置的新属性，该属性会替换当前的props。
callback，可选参数，回调函数。该函数会在replaceProps设置成功，且组件重新渲染后调用。

5、强制更新：forceUpdate

forceUpdate([function callback])

callback，可选参数，回调函数。该函数会在组件render()方法调用后调用。

Tips：

forceUpdate()方法会使组件调用自身的render()方法重新渲染组件，组件的子组件也会调用自己的render()。
一般来说，应该尽量避免使用forceUpdate()，而仅从this.props和this.state中读取状态并由React触发render()调用。

6、获取DOM节点：findDOMNode

findDOMNode()

如果组件已经挂载到DOM中，该方法返回对应的本地浏览器 DOM 元素。当render返回null 或 false时，this.findDOMNode()也会返回null。

7、判断组件挂载状态：isMounted

返回值：true或false，表示组件是否已挂载到DOM中。

三、组件生命周期

1、渲染事件

constructor() ：组件创建时，如果你不需要初始化 State就不需要定义这个方法；

render() ：挂载时用来渲染内容的方法，每个类组件都需要一个 render 方法；

2、生命周期

componentWillMount：在渲染前调用,在客户端也在服务端。
componentDidMount : 在第一次渲染后调用，只在客户端，可通过this.getDOMNode()来进行访问。可在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异步操作阻塞UI)。
componentWillReceiveProps：在组件接收到一个新的 prop (更新后)时被调用。在初始化render时不会被调用。
shouldComponentUpdate：返回一个布尔值，在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。
componentWillUpdate：在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。
componentDidUpdate：在组件完成更新后立即调用。在初始化时不会被调用。
componentWillUnmount：在组件从 DOM 中移除之前立刻被调用，一般在这里面销毁定时器等会导致内存泄露的内容。

3、将生命周期方法添加到类中 & 更新 State

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }
 // 第一次加载到 DOM 中的时生成定时器——挂载
  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }
 //  DOM 被移除的时清除定时器——卸载
  componentWillUnmount() {
    clearInterval(this.timerID);
  }
 
  tick() {
    this.setState({// 更新 State,使得网页内容在渲染之后还能变化
      date: new Date()
    });
  }

四、refs

React 支持一种非常特殊的属性 Ref ，可以用来绑定到 render() 输出的任何组件上。getDOMNode()方法也可以获取DOM元素。

<input ref="myInput" />
// 通过 this.refs 获取支撑实例:
var input = this.refs.myInput;
var inputValue = input.value;
var inputRect = input.getBoundingClientRect();