React-HOOK-useState

#欢迎来到React-HOOK-useState篇

语法
useState() 方法里面唯一的参数就是初始 state。不同于 class 的是，我们可以按照需要使用数字或字符串对其进行赋值，而不一定是对象，并且useState 不会自动合并更新对象。

const[state,setState]=setState(initialState);

在初始渲染期间，返回的状态 (state) 与传入的第一个参数 (initialState) 值相同。
示例:

const[count,setState]=setState(0);

我们声明了一个叫 count 的 state 变量，然后把它设为 0。

在后续的重新渲染中，useState 返回的第一个值将始终是更新后最新的 state。
示例：

function Counts(){
	const[count,setState]=setState(0);
	function handleClick1(){
		setConut(count+1)
		}
	function handleClick2(){
		setCount((preCount)=>{
			return preCount+1
	})
	}
	return(
	<div>
	<p>You clicked {count} times</p>
		<button onClick={handleClick1}>Click</button>
		<button onClick={handleClick2}>Click</button>
	</div>)
	}

这里handleClick1是通过接收一个新的state值更新；handleClick2是通过函数式更新返回新的state值。这两种方法在同步更新的时候并没有什么区别（定时器），在异步更新的时候，如果在更新新的state值的时候需要用到之前的state值时，则使用函数式更新
原因 ：在进行异步更新的时候，操作state会变得频繁，react为节约性能会把多次setState合并为一次，最后在一次性的更新 state。而同步更新时操作state则不会合并。
示例：

handleClick = () => {
    this.setState({ count: this.state.count + 1 })
    this.setState({ count: this.state.count + 1 })
  }

在进行事件绑定（异步）时，两次更新state只会执行一次（count只会加1）

handleClick = () => {
    setTimeout(() => {
      this.setState({ count: this.state.count + 1 })
      this.setState({ count: this.state.count + 1 })
    }, 10000);
    //10000是防止时间过短，操作不及时
  }

在定时器中操作state，则会执行两次（count会加2）