把useState变成响应式

原创已于 2025-03-01 19:07:57 修改

· 947 阅读

14 ·

版权

文章标签：

#react.js #javascript #前端

于 2023-09-17 12:12:33 首次发布

React 必备专栏收录该内容

5 篇文章

订阅专栏

本文介绍了如何使用Proxy改造React中的useState，实现在不直接修改状态时自动触发setState，从而简化状态管理并避免回调嵌套问题。但注意，这仅适用于第一层对象属性，深层属性需递归处理可能导致资源消耗增加。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Ⅰ、前言

我们知道 React 中 , 要想修改「状态」 => 必须要
「state ， setState」 = useState() 中
「setState」去修改 => 「state」
那么如果用 Proxy => 去改造 useState，那么「摸鱼的时间」又增加啦？

在这里插入图片描述

Ⅱ、proxy 改造 useState

首先我们直接修改状态，页面是无法直接更新的；
但是 proxy ，可以监听到；
监听到的同时，再触发 setState => 修改 setState
同时再次赋予 proxy ，让下一次 proxy 正常监听到；

下面我们实例去看 👇

改造 👇

export default function  Reactive(obj) {
  const [value, setValue] = useState(setProxy(obj))
  function setProxy(value) {
	return new Proxy( value ,{
		get:Reflect.get,
		set(proxy,key,value,reciver){
			setValue(proxy)
			return Reflect.set(proxy,key,value,reciver)
		}
	})
  }
  return value
}

使用 👇

import  useReactive from './proxyState'
export default function Index() {
  const obj = useReactive({ num: 0 })
  return (
    <div>
		<button onClick={()=>{ obj.num-- }} >减少</button>
		<span> { obj.num } </span>
		<button onClick={()=>{ obj.num++ }} >增加</button>
	</div>
  )
}

直接修改，让 proxy 监听自动 setState ;

优势👇

import  useReactive from './proxyState'
export default function Index() {
  const [state, setState] = useState({ num:0 })
  const state2 = useReactive({ num: 0 })
   
  function add(){
	setState(
		{ num: state.num + 1  }, 
		(res) => {   console.log('当前最新的值为', res.num)
	})
  	
  	state2.num++
  	console.log('当前最新的值为',  state2.num2)
  }
  // ...
}