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);
- 在后续的重新渲染中,
useState
返回的第一个值将始终是更新后最新的state
。 - 与 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 的方法。