react 常用hooks封装--useReactive
概述
一种具备响应式的useState
我们知道用useState可以定义变量格式为：
const [count, setCount] = useState(0)
通过 setCount 来进行设置，count 来获取，使用这种方式才能够渲染视图
来看看正常的操作，像这样 let count = 0; count = 7;此时count的值就是7，也就是说数据是响应式的。
那么我们可不可以将 useState 也写成响应式的呢？我们可以自由设置count的值，并且可以随时获取到count的最新值，而不是通过setCount来设置
那么，我们来想想怎么去实现一个具备响应式特点的useState也就是useRactive
提出以下疑问：
- 这个钩子的出入参如何设定
- 如何将数据制作成响应式--毕竟普通的操作无法刷新视图
- 如何优化
分析
以上提出的疑问，最关键的就是第二个，我们如何将数据做成响应式的，要想做成响应式，就必须监听到值的变化，再作出更改也就是说，我们对这个数进行操作的时候，要进行相应的拦截，这里就可以用到es6的：Proxy
在这里会用到Proxy和Reflect
Proxy接受的参数是对象，所以第一个问题也就解决了，入参就为对象。那么如何去刷新视图？这里就需要用到另一个自定义的hooks--useUpdate来强制刷新，使数据更改
至于优化这块，这里会用到另一个自定hooks--useCreation，再配合useRef来放置initalState即可
useUpdate
有的时候我们需要组件强制更新，这个时候就可以使用这个钩子：
hooks/useUpdate.js
// 强制更新
import { useCallback, useState } from "react";
const useUpdate = () => {
const [, setUpdate] = useState({});
return useCallback(() => setUpdate({}), []);
}
export default useUpdate;useCreation
这里封装的 useCreation 是 useMemo 或 useRef 的代替品，换言之useCreation这个钩子增强了useMemo 和 useRef ，让这个钩子可以替换这两个钩子。
- useMemo的值不一定是最新的值，但useCreation可以保证拿到的值一定是最新的值
- 对于复杂常量的创建，useRef容易出现潜在的的性能隐患，但useCreation可以避免
这里的性能隐患是指：
接下来我们来看看如何封装一个useCreation,首先我们要明白以下三点：
- 第一点：先确定参数，useCreation 的参数与 useMemo 的一致，第一个参数是函数，第二个参数参数是可变的数组
- 第二点：我们的值要保存在useRef中，这样可以将值缓存，从而减少无关的刷新
- 第三点：更新值的判断，怎么通过第二个参数来判断是否更新 useRef 里的值。
明白了一上三点我们就可以自己实现一个 useCreation
hooks/useCreation.js
import { useRef } from 'react';
const depsAreSame = (oldDeps, deps) => {
if(oldDeps == deps) return true;
for(let i = 0; i < oldDeps.length; i++) {
// 判断两个值是否是同一个值
if(!Object.is(oldDeps[i], deps[i])) return false;
}
return true;
}
const useCreation = (fn, deps) => {
const { current } = useRef({
deps,
obj: undefined,
initialized: false,
});
if(current.initialized === false || !depsAreSame(current.deps, deps)) {
current.deps = deps;
current.obj = fn();
current.initialized = true;
}
return current.obj;
}
export default useCreation;验证：
useReactive
hooks/useReactive.js
import { useRef } from 'react';
import useUpdate from "./useUpdate.js";
import useCreation from "./useCreation.js";
const observer = (initialVal, cb) => {
const proxy = new Proxy(initialVal, {
get(target, key, receiver) {
const res = Reflect.get(target, key, receiver);
return typeof res === 'object' ? observer(res, cb) : Reflect.get(target, key);
},
set(target, key, val) {
const ret = Reflect.set(target, key, val);
cb();
return ret;
}
})
return proxy;
}
const useReactive = (initialState) => {
const ref = useRef(initialState);
const update = useUpdate();
const state = useCreation(() => {
return observer(ref.current, () => {
update()
});
}, [])
return state;
}
export default useReactive;TS版（仅供参考）：
使用
demo.jsx
import React, { } from 'react';
import useReactive from "../../hooks/useReactive.js";
export const Home = () => {
const state = useReactive({
count: 0,
name: '小度小度',
flag: true,
arr: [],
bugs: ['小度', 'react', 'hook'],
addBug(bug) {
this.bugs.push(bug)
},
get bugsCount() {
return this.bugs.length;
},
});
return (
<div className="App" style={{padding: 20}}>
<div style={{fontWeight: 'bold'}}>基本使用</div>
<div style={{marginTop: 8}}>对数字进行操作：{state.count}</div>
<div style={{margin: '8px 0', display: 'flex', justifyContent: 'flex-start'}}>
<button onClick={() => state.count++}>加1</button>
<button style={{marginLeft: 8}} onClick={() => state.count--}>减1</button>
<button style={{marginLeft: 8}} onClick={() => state.count = 7}>设置为7</button>
</div>
<div style={{marginTop: 8}}>对字符串进行操作：{state.name}</div>
<div style={{margin: '8px 0', display: 'flex', justifyContent: 'flex-start'}}>
<button onClick={() => state.name = '小嘟嘟'}>设置为小嘟嘟</button>
<button style={{marginLeft: 8}} onClick={() => state.name = 'Demesy'}>设置为Domesy</button>
</div>
<div style={{marginLeft: 8}}>对布尔值进行操作：{JSON.stringify(state.flag)}</div>
<div style={{margin: '8px 0', display: 'flex', justifyContent: 'flex-start'}}>
<button onClick={() => state.flag = !state.flag}>切换状态</button>
</div>
<div style={{marginLeft: 8}}>对数组进行操作：{JSON.stringify(state.arr)}</div>
<div style={{margin: '8px 0', display: 'flex', justifyContent: 'flex-start'}}>
<button onClick={() => state.arr.push(Math.floor(Math.random() * 100))}>push</button>
<button style={{marginLeft: 8}} onClick={() => state.arr.pop()}>pop</button>
<button style={{marginLeft: 8}} onClick={() => state.arr.shift()}>shift</button>
<button style={{marginLeft: 8}} onClick={() => state.arr.unshift(Math.floor(Math.random() * 100))}>unshift</button>
<button style={{marginLeft: 8}} onClick={() => state.arr.reverse()}>reverse</button>
<button style={{marginLeft: 8}} onClick={() => state.arr.sort()}>sort</button>
</div>
<div style={{fontWeight: 'bold', marginTop: 8}}>计算属性：</div>
<div style={{marginTop: 8}}>数量：{state.bugsCount}个</div>
<div style={{margin: '8px 0'}}>
<form onSubmit={(e) => {
state.bug ? state.addBug(state.bug) : state.addBug('domesy')
state.bug = ''
e.preventDefault()
}}>
<input type="text" value={state.bug} onChange={(e) => state.bug = e.target.value}/>
<button type="submit" style={{marginLeft: 8}}>增加</button>
<button style={{marginLeft: 8}} onClick={() => state.bug.pop()}>删除</button>
</form>
</div>
<ul>
{
state.bugs.map((bug, index) => {
<li key={index}>{bug}</li>
})
}
</ul>
</div>
);
};