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>
)
}
测试可以正常监听及修改,有待继续测试…欢迎各位大佬指正