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

最新推荐文章于 2024-05-27 22:56:36 发布

Simon_youth

最新推荐文章于 2024-05-27 22:56:36 发布

阅读量649

点赞数

分类专栏： es6 react 文章标签： es6 reactjs react-hooks Proxy

本文链接：https://blog.csdn.net/qq_39711712/article/details/106589009

版权

在处理包含多个筛选条件和表格排序的业务场景中，为了保存筛选条件但不保存状态，使用了React.useRef。由于ref数据变化时不触发通知，故采用ES6 Proxy监听数据变化，以在数据变更时自动发起请求。这种方法简化了子组件的处理逻辑，关注于数据状态的改变，但不确定是否为React官方推荐的做法。

摘要由CSDN通过智能技术生成

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 () =>