React.useRef 与ES6 Proxy实现数据劫持

case

遇到一个有很多筛选条件、 表格排序的业务场景，但是这些数据状态不需要保存，但是需要保存筛选条件以请求后台。于是使用useRef保存所有类型的筛选条件。考虑到想在ref数据变更时发起请求，但是ref.current变更时不会通知且useImperativeHandle使用复杂并不被推荐，于是想到使用Proxy实现

usage

Parent.tsx

import React, { useRef } from 'react';
import { useDispatch } from 'react-redux';

const defaultValues = {
  select: 'code1',
  input: 'input somrthing'
}

export default () => {
const dispatch = useDispatch();

const dataRef = useRef(new Proxy(defaultValues, {
  set: (target, prop, value) => {
    // do something
   dispatch({
   // ......
   })
   target[prop] = value;
   // 返回假值会抛出异常
   return true;
  }
}));

return (
  <>
    <Child1 wrapperRef={dataRef} />
    <Child2 wrapperRef={dataRef} />
  </>
 )
}

Child1.tsx

import React  from 'react';

export default ({
  wrapperRef, // ref不能作为属性名传递到子组件 key也是
}) => {

function onChange(value, type) {
  // Proxy拦截set，触发请求
  wrapper.current[type] = value;
}
return (
  <>
	  <Select defaultValue={wrapper.current.select} onChange={v => onChange(v, 'select')} />
	  <Input defaultValue={wrapper.current.input} onChange={({ target }) => onChange(target.value, 'input')} />
  </>
 )
}

我是觉着这样写就不需要在每个子组件里加一堆处理方法，只需要关心数据状态更改。用起来很好，但是不知道React官方是否推荐。但好用且不会造成异常或性能问题