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
}
1
2
3
4
5
6
7
8
9
10
11
12
13

使用 👇

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>
  )
}
1
2
3
4
5
6
7
8
9
10
11

• 直接修改 ， 让 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)
  }
  // ...
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

• useState 必须在 callback 回调函数里才能获取最新状态；
• 如果 setState 后面拿去 state 则还是之前的值；
• 改造后的获取则，会走 proxy 的 get 总是为最新，
• 避免了setState 的 callback 回调函数嵌套问题；

缺陷 👇

• 只能监听对象的 「第一层属性」 ， 对于深层的属性变化是没法监听到的；
• 如果需要监听深层，需要递归 proxy ，可能对资源消耗过大；