Ying's Blog🍗
Appearance

React 相关

影大宝🧐2024-01-01 08:00:00前端开发react

在 react 中借助 proxy 实现 Vue3 的 reactive

import React,{ useState } from 'react'
//proxy是代理一个对象，做对象的属性劫持
function UseReactive(initialState){
  const [ state,setState ] = useState(initialState)
  //借助副作用
  useEffect(() => {
    //proxy handler
    const handler = {
      get(target,property){
        return target[property]
      },
      set(target,property,value){
        setState({...target})
        return true
      }
    }
    initialState = new Proxy(initialState,handler)
  },[])
}
function App(){
  const state = UseReactive({count:1})
  state.count += 1
}
  • 拓展:模拟 Vue3 中组件的状态
<html>
<div id="app">{{count}}</div>
<button id="btn">click</button>
</html>
<body><script>
const data = { count:0 }
//将这个状态变成响应式,Vue2中是通过 Object.defineProperty，Vue3是Proxy
const reactiveData = new Proxy(data,{
  set(target,property,value){
    target[property] = value
    updateView()
    //updateView等价于 Vue 的 new Vue({data:{count:0}}).$mount('#app')
    //这是比较笨的方法，因为在属性中操作，Vue源码用收集依赖代替了这一步🚩
    return true
  },
  get(target,property){
    return target[property]
  }
})
//更新视图
const updateView = () => {
  document.querySelector("#app").innerHTML = reactiveData.count
}
//使用
const btnDom = document.querySelector("#btn")
btnDom.addEventListener("click",()=>{
  reactiveData.count ++
})
</script></body>

useSyncExternaStore 将 react 和 redux 状态联系

useSyncExternaStoreopen in new window 是一个让你订阅外部 store 的 React Hook.

除了 proxy, useSyncExternaStore也可以实现上述问题。

ON THIS PAGE