React-Hooks之,我用v3方式写react响应式

React-Hooks之,我用v3方式写react响应式

朋友们,有人喜欢react,有人喜欢vue,我就不一样了,我都爱.
两个框架各有千秋,突发奇想,用v3的绑定方式去写react,省略一切setState的繁琐,会不会是个更爽的事情呢?搞事情~~

第一步:写个useProxy自定义hooks

原理,代理+反射+useState的闭包原理

import { useState } from "react";
/**
 * 
 * @param val-外层代理对象-实际此处的val必须为对象
 * @returns 
 */
export const useProxy = (val: any) => {
  const [state, setState] = useState(val);

  const reactProxy = new Proxy(state, {
    set(target, name, value) {
      const result = Reflect.set(target, name, value);
      setState({ ...target }); // 触发更新
      return result;
    },
  });

  return reactProxy;
}

第二步:组件内测试

import React, { useEffect, useState } from 'react'
import { useProxy } from '../../hooks/useProxy';
import { Child } from './child';

const ProTest = (props: any) => {
  // 使用代理反射机制,尽量在使用前考虑好数据结构
  let obj = useProxy({ count: 0 });
  let arr = useProxy({ list: [1, 2, 4] });

  const [num, setNum] = useState(0)
  const clickBtn = () => {
    obj = { count: obj.count++ }
  }
  const clickNum = () => {
    setNum(num + 1)
  }
  const clickArr = () => {
    // 推荐深拷贝,immer等处理
    // 虚拟数据模拟接口
    let newArr = []
    for (let i = 0; i < 5; i++) {
      newArr.push(Math.random().toFixed(3))
    }
    arr.list = newArr
  }
  const changeArrItem = (item: number, index: number) => {
    // 推荐深拷贝,immer等处理
    // 虚拟数据模拟接口
    let copyArr = [...arr.list]
    copyArr[index] = item + Math.random().toFixed(3)
    arr.list = copyArr
  }
  useEffect(() => {
    console.log('num更新了');
  }, [num])
  useEffect(() => {
    console.log('obj.count更新了');
  }, [obj.count])
  useEffect(() => {
    console.log('obj更新了');
  }, [obj])
  useEffect(() => {
    console.log('arr更新了');
  }, [arr])
  useEffect(() => {
    console.log('arr.list更新了');
  }, [arr.list])
  return (
    <>
      <div>index-{obj.count}</div>
      <div>num-{num}</div>
      {
        arr.list.map((item: any, index: number) => {
          return <div key={+index} onClick={() => changeArrItem(item, index)}>
            arr子项-{item}
          </div >
        })
      }
      <button onClick={() => clickBtn()}>修改count</button>
      <button onClick={() => clickArr()}>修改arr</button>
      <button onClick={() => clickNum()}>修改num</button>
      <div>------------我是一条分割线------------</div>
      <br />
      ----子组件
      <Child obj={obj} arr={arr} count={obj.count}></Child>
    </>
  )
}


export default ProTest

第三步写个子组件检测一波

import React from 'react'

export const Child = (props: any) => {
  const { obj, arr, count } = props
  return (
    <div>
      child
      <div>count-{count}</div>
      <div>obj.count-{obj.count}</div>
      <div>
        {arr?.list?.map((item: number, index: number) => {
          return <div key={+index}>props-arr-{item}</div>
        })}
      </div>
    </div>
  )
}

测试可以正常监听及修改,有待继续测试…欢迎各位大佬指正