React Hooks之useState

Hooks 的最大的作用就是可以让你在不编写class的情况下使用state以及其他的 React 特性。而 useState 的功能就是让你在函数式组件中使用 state。
其实useState函数是让函数组件有了状态，那么我们就来详细了解一下useState这个函数。

用法：

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

因为react是函数式编程，所以上面的代码就很好理解了

• useState函数接收一个初始化参数initialState,
• state是初始化的state,以及更新state的函数setState.
• 在初始渲染期间，返回的状态 (state) 与传入的第一个参数 (initialState) 值相同。
• setState 函数用于更新 state。它接收一个新的 state 值并将组件的一次重新渲染加入队列。

setState(newState);

1. 在后续的重新渲染中，useState 返回的第一个值将始终是更新后最新的 state。
2. 与 class 组件中的 setState 方法不同，useState 不会自动合并更新对象。你可以用函数式的 setState 结合展开运算符来达到合并更新对象的效果。

函数式更新

如果新的 state 需要通过使用先前的 state 计算得出，那么可以将函数传递给 setState。该函数将接收先前的 state，并返回一个更新后的值。

import React, {useState} from 'react'
const AddCount = () => {
  const [ count, setCount ] = useState(0)
  /*const addcount = () => {
    let newCount = count
    setCount(newCount+=1)
  } */
  return (
    <>
      <p>{count}</p>
      <button onClick={() => setCount(prevCount => prevCount + 1)}>count++</button>
    </>
  )
}
export default AddCount 

如果你的更新函数返回值与当前 state 完全相同，则随后的重渲染会被完全跳过。

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

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

useReducer 是另一种可选方案，它更适合用于管理包含多个子值的 state 对象。

惰性初始 state

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

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

跳过 state 更新

调用 State Hook 的更新函数并传入当前的 state 时，React 将跳过子组件的渲染及 effect 的执行。（React 使用 Object.is 比较算法 来比较 state。）

需要注意的是，React 可能仍需要在跳过渲染前渲染该组件。不过由于 React 不会对组件树的“深层”节点进行不必要的渲染，所以大可不必担心。如果你在渲染期间执行了高开销的计算，则可以使用 useMemo 来进行优化。

useState 的初步实现

let state;
function useState(initialState) {
  state = state || initialState;
  function setState(newState) {
    state = newState;
    render();
  }
  return [state, setState];
}

实现思路如下：

外部声明一个 state，用来接收初始值和更新后的值。为什么要定义在 useState 函数外面？是因为如果定义在函数里面，每次重新渲染时，都会将这个值设置为初始值，那样的话就拿不到最新的值了。内部定义一个函数，函数用来更新 state,并触发重新渲染。函数会接收一个 newState，并将其赋值给外部的 state，然后调用 render 函数，实现组件的重新渲染。返回一个数组。数组中是最新的 state 以及更新 state 的方法。

---