useState管理状态

1. setState是异步的，如果写多个 setState，只有最后一个有效
2. useState 可以传入一个函数，初始化
3. useState 调用必须规规矩矩的来
4. 调用 hooks 必须是 react组件，不能是函数
   1. 必须在顶层调用
   2. 不能在 循环和条件块里

useState特性

1. 第二个参数是更新函数，不会合并参数
   
2. 每次渲染都会创建一个新的函数，每次渲染，都是独立的闭包
   
3. useState 会返回一对值：当前状态和一个让你更新它的函数
   1. 更新函数类似 class 组件的 this.setState，但是它不会把新的 state 和旧的 state 进行合并
      1. 先解构老的值，然后新值覆盖老的值
         
   2. useState 唯一的参数就是初始 state
      
4. initialState 参数只会在组件的初始渲染中起作用，后续渲染时会被忽略
   
5. 如果，传入的 state和之前的 state一样，就不会渲染
   1. React 使用 Object.is 比较算法 来比较 state
      

getDerivedStateFromProps

修改 state的方法

class组件写法

class Counter extends Component {
  state = {
    visible: false
  }
  static getDerivedStateFromProps (props, state) {
    if (props.count >= 10) {
      return { visible: true }
    }
  }
}

hooks组件写法

function Counter(props) {
  const [visible, setVisible] = useState(false)
  if (props.count >= 10) {
    setVisible(true)
  }    
}

tsx

import React, { useState } from 'react'
interface Props {}
function App: <React.FC>(props) {
    const [count, setCount] = useState<number>(0)
}

useState原理

1. useState返回一个 useReducer
2. useReducer 返回 [workInProgressHook.memoizedState, dispatch]

tuple元祖类型：[S, Dispatch>]

1. state状态
2. 更新状态的函数，是一个事件驱动的异步更新过程 ```typescript function useState():