（React）绑定数据

前言

在实际开发中，我们的界面上的数据肯定不是一成不变的；可能是通过网络请求需要刷新界面，也可能是点击某个按钮改变界面；
在Vue中，通过数据的双重绑定实现此功能；
在React中，又是使用什么方式呢；

一、State状态

React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。
React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。
React中的State和Vuex类似，只要更新修改State，就会造成界面的重新绘制；

函数组件是没有State的。

二、使用State

import React, { Component } from "react";
import "./App.css";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = { count: 1 };
  }

  respondsToClick = () => {
    var count = this.state.count
    // 设置State，刷新界面
    this.setState({
      count: count + 1
    })
  }

  render() {
    return (
      <div className="App">
        <div>{this.state.count}</div>
        <a onClick={this.respondsToClick}>点击增加</a>
      </div>
    );
  }
}
export default App;

只有使用this.setState设置state，才会引发界面的重新绘制；