2React入门state和ref

setSate
我们先看几个关于setState的demo，用于黑箱推测原理：

1) "打印0"——说明setState相当于发布订阅中的发布，只是把多个状态变更需求统一放入队列updateQueue；

  "打印2"——说明存在一个专门用于开启/关闭**批量**更新模式的控制器batchUpdate。  基本流程：开启控制器  ——  入队列(updateQueue和callbackQueue) —— 合并updateQueue中state的变化  —— 根据变化来更改state  —— 执行callbackQueue ——  关闭控制器；  整个流程是同步的。    

class Mine extends React.Component {    constructor(props){        super(props);        this.state = {number: 0};    }    add = () => {        this.setState({number: this.state.number+1});        this.setState({number: this.state.number+2});        console.log(this.state.number);//打印0        setTimeout(() => {            console.log(this.state.number);//打印2        })    }    render(){        return (<button onClick={this.add}></button>)    }}

2) 理解上面流程了，就能理解为什么定时器中的setState看起来并不是延迟执行。

  因为定时器到期前，整个流程已经跑完了，控制器处于关闭状态，所以就立即更新state了；  即在setState源码中，若控制器开启，则需要入队列；若控制器关闭，则不入队列，立即执行；

this.setState({number: this.state.number+1});this.setState({number: this.state.number+2});this.setState({number: this.state.number+3});setTimeout(()=>{    this.setState({number: this.state.number+4});    console.log(this.state);//打印7}, 1000)

总之，setState有延迟/批量更新，是为了节省渲染DOM的开销，同时也保留了立即更新的功能

ref的几种用法
1) ref=字符串
不推荐，难以维护

class Calculator extends React.Component {    add = () => {        let num1 = Number(this.refs.num1.value);        let num2 = Number(this.refs.num2.value);        this.refs.result.value = num1+num2    }    render(){        return (            <div>                <input ref="num1" /> +                 <input ref="num2" />                <button onClick={this.add}\>=</button\>                <input ref="result" />            </div>        )    }}

2) ref=函数
不推荐。函数在DOM渲染后执行，instance就是DOM元素的实例~~~~

class Calculator extends React.Component {add = () => {    let num1 = Number(this.num1.value);    let num2 = Number(this.num2.value);    this.result.value = num1+num2}render(){    return (        <div>            <input ref={instance=>this.num1=instance} /> +             <input ref={instance=>this.num2=instance} />            <button onClick={this.add}>=</~~~~button>            <input ref={instance=>this.result=instance} />        </div>    )}}

3)React.createRef
推荐写法~~~~

class Calculator extends React.Component {  constructor() {    super();    this.num1 = React.createRef();    this.num2 = React.createRef();    this.result = React.createRef();  }  add = () => {    let num1 = Number(this.num1.current.value);    let num2 = Number(this.num2.cu~~~~rrent.value);    this.result.current.value = num1 + num2;~~~~  };  render() {    return (      <div>        <input ref={this.num1} /> +        <input ref={this.num2} />        <button onClick={this.add}>=</button>        <input ref={this.result} />      </div>    );  }}