React 把useState变成响应式 ，今天又可以早点下班了

Ⅰ、前言

• 我们知道 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 ;
• 这样改造和 vue3 的 reactive API 就很像了 ；