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官方是否推薦。但好用且不會造成異常或性能問題