React 如何获取上一个 State 的值?

在 react 开发中,对于某一个 state ,我们可能需要获取它的上一个状态的值,下面介绍两种方法来获取上一个 state 的值。

需求:假设页面上有一个计数器 count,点击按钮计数加1,需要在页面上展示当前 count 的值和上一个 count 的值。

通过 useState hook 的 setState 方法的实现

我们知道 useState hook 可以让我们定义一个 state 和一个 state 更新函数 setState,setState 可以直接更新 state,也可以基于上一个 state 的值来更新 state,如 setCount(preValue => preValue+1),那么 preValue 就是我们想要的上一个 state 的值,示例代码如下:

function Counter(){
	let [count, setCount] = useState(0)
    let [preCount, setPreCount] = useState(0)
	
	const _increaseCount = () => {
	    setCount(preValue => {
	      // 存储上一个状态的值
	      setPreCount(preValue)
	      return preValue + 1;
	    })
	 }
	
	return <>
		<div>Previous Count Value: {preCount}</div>
	    <div>Current Count Value: {count}</div>
	    <button onClick={increaseCount}> +1 </button>
	</>

}

结果如下:点击按钮,count(当前 count) 和 preCount 同时加 1,且 count 始终比 preCount 大 1。
React 如何获取上一个 State 的值?_第1张图片

通过自定义 usePrevious hook 实现

第一种方法虽然能满足要求,但是定义了两个 state (count 和 preCount),当点击按钮的时候,两个 state 的值都变了,导致页面更新了两次,页面多了一次不必要的更新。那么怎么才能在页面只更新一次的前提下实现需求呢?

我们分析一下,其实不把 preCount 作为 state 即可,不作为 state 后,preCount 的变化就不会引起页面的重新渲染。那在 react 中,什么样的数据变化之后,不会引起页面重新渲染呢?答案是:挂载在 useRef hook 上的数据。useRef 允许我们引用渲染时不需要的值。示例代码如下:

// usePrevious hook
function usePrevious(data) {
  const ref = useRef(0);
  useEffect(() => {
    ref.current = data;
  }, [data]);
  return ref.current;
}

// Counter 组件
function Counter(){
	let [count, setCount] = useState(0)
	
	const _increaseCount = () => {
	    setCount(count+1)
	 }
	// 从 usePrevious 取得 preCount
	const preCount = usePrevious(count)
	
	return <>
		<div>Previous Count Value: {preCount}</div>
	    <div>Current Count Value: {count}</div>
	    <button onClick={increaseCount}> +1 </button>
	</>

}

上述 usePrevious hook 中,data 作为入参,也就是我们的 state。使用了 useRef hook,把 data 挂载 ref 的 current 属性上,然后把 data 作为 useEffect 的依赖,当 data 发生改变时,把 data 重新赋值给 ref.current,这样一来,ref.current 就能随着 data 变化。最后 usePrevious hook 返回 ref.current。

最后在 Counter 组件中声明 const preCount = usePrevious(count),那么 preCount 就随着 count 的更新而更新,由于 preCount 不是组件 Counter的 state ,所以它的更新不会触发组件重新渲染,只有身为组件 state 的 count 的变化才会触发组件重新渲染,这样一来就避免了不必要的更新。

你可能感兴趣的:(react的学习与开发,前端,react.js)