React-Hook：useState

1. 使用

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

因为react是函数式编程，useState函数接收一个初始化参数initialState,其返回值用数组解构俩个参数，state是初始化的state,以及更新state的函数setState. 在初始渲染期间，返回的状态 (state) 与传入的第一个参数 (initialState) 值相同。setState 函数用于更新 state。它接收一个新的 state 值并将组件的一次重新渲染加入队列。在后续的重新渲染中，useState 返回的第一个值将始终是更新后最新的 state。
注意: React 会确保 setState 函数的标识是稳定的，并且不会在组件重新渲染时发生变化。这就是为什么可以安全地从 useEffect 或 useCallback 的依赖列表中省略 setState

2.函数式更新

如果新的 state 依赖之前的state，可以将函数传递给 setState。该函数将接收先前的 state，并返回一个更新后的值。
如果你的更新函数返回值与当前 state 完全相同，则随后的重渲染会被完全跳过。

function Counter({initialCount}) {
  const [count, setCount] = useState(initialCount);
  return (
    <>
      Count: {count}
       setCount(initialCount)}>Reset
       setCount(prevCount => prevCount - 1)}>-
       setCount(prevCount => prevCount + 1)}>+
    
  );
}

与 class 组件中的 setState 方法不同，useState 不会自动合并更新对象。你可以用函数式的 setState 结合展开运算符来达到合并更新对象的效果。

setState(prevState => {
  // 也可以使用 Object.assign
  return {...prevState, ...updatedValues};
});

3.惰性初始 state

initialState 参数只会在组件的初始渲染中起作用，后续渲染时会被忽略。如果初始 state 需要通过复杂计算获得，则可以传入一个函数，在函数中计算并返回初始的 state，此函数只在初始渲染时被调用：

const [state, setState] = useState(() => {
  const initialState = someExpensiveComputation(props);
  return initialState;
});

注意

1.useState()中的参数可以使用任意类型（string，number，object，function等）作为初始值。

2.class组件调用setState，是将现在的数据与之前的state数据进行合并然后返回一个新状态，而hooks调用setState方法是将之前的state数据进行替换，返回一个新状态.

3.在开发中，无论useState()函数被调用了多少次，他们之前都是互相不影响，都是相互独立的。那么这是如何做到的呢？react会根据useState的顺序来规定的。在react实现的内部声明了一个数组，按照其useState()函数调用的顺序，来保存其数据，所以一定要在函数的外层调用useState()，不要在if...else，for循环，子函数中调用useState()。因为react函数共享一个保存数据的数组，那么也会对其他的函数组件有影响。Capture Value” 特性的产生是在于每一次 ReRender 的时候，都是重新去执行函数组件了，对于之前已经执行过的函数组件，并不会做任何操作。