React中编写操作树形数据的自定义Hook-6ren

React中编写操作树形数据的自定义Hook

转载作者：我是一只小鸟更新时间：2023-07-12 14:31:57

什么是 Hook

hook 即为钩子,是一种特殊的函数,它可以让你在函数式组件中使用一些 react 特性,目前在 react 中常用的 hook 有以下几类。

useState: 用于在函数组件中定义和使用状态(state)。
useEffect:用于在函数组件中处理副作用,也可以模拟 react 生命周期
useContext:用于在函数组件中访问 React 的上下文(context)。
useCallback:用于在函数组件中缓存计算结果，避免无用的重复计算。
useMemo:用于在函数组件中缓存回调函数，避免无用的重渲染。

以上各种 hook 的用法在笔记文档中均有记录,如有兴趣可以前往阅览 . 。

自定义 Hook

自定义 Hook 是指在 React 中编写的自定义函数，以便在各个组件之间重用逻辑。通过自定义 Hook，我们可以将一些逻辑抽象出来，使它们可以在不同的组件中共享和复用.

自定义 Hook 的命名以 “use” 开头，这是为了遵循 React 的 Hook 命名规范。自定义 Hook 可以使用任何 React 的内置 Hook，也可以组合其他自定义 Hook.

编写自定义 Hook

那么如何编写自定义 hook 呢,且看以下场景

在 Antd 中有一个 Tree 组件,现在需要对 Tree 组件的数据进行操作来方便我们在 Tree 中插入,更新,上移,下移,删除节点,此时我们就可以编写一个自定义 hook 来统一操作类似于 TreeData 这样的树形数据。

我们在此将这个 hook 函数其命名为 useTreeHandler,编写这个自定义 hook 函数只需要三步同时。

保存传入的数据
为传入的数据编写操作函数
将操作后的数据以及函数暴露出去供组件使用

                        
                          const useTreeHandler = (TreeData: DataNode[]) => {
  const [gData, setGData] = useState(JSON.parse(JSON.stringify(TreeData)));
  return {
    gData,
  };
};

因为本次操作的是类似 Antd 中的树形数据,就暂且使用 DataNode 类型,当然这个类型可以根据我们的需要来设定或者写一个更加通用的类型在此 hook 函数中我们要实现以下功能。

insertNodeByKey: 根据 key 来插入子级节点
insertNodeInParentByKey: 根据 key 来插入同级节点
deleteNodeByKey: 根据 key 来删除当前节点
updateTreeDataByKey: 根据 key 来更新当前节点
moveNodeInTreeByKey: 根据 key 上移/下移当前节点

插入子级

                        
                          /**
 * 插入子级
 * @param key 当前节点key
 * @param newNode 待插入节点
 */
const insertNodeByKey = function (
  key: string | number | undefined,
  newNode: any
) {
  const data = JSON.parse(JSON.stringify(gData));
  const insertChild = (
    data: any[],
    key: string | number | undefined,
    newNode: any
  ): any[] => {
    for (let i = 0; i < data.length; i++) {
      if (data[i].key === key) {
        if (Array.isArray(data[i].children)) {
          data[i].children = [...data[i].children, newNode];
        } else {
          data[i].children = [newNode];
        }
        break;
      } else if (Array.isArray(data[i].children)) {
        insertChild(data[i].children, key, newNode);
      }
    }
    return data;
  };
  setGData(insertChild(data, key, newNode));
};

上述 insertNodeByKey 函数代码中传入了两个参数 key 和 newNode ,这两个分别代表当前操作节点对象的 key 以及插入的新节点数据,在 insertNodeByKey 函数内部对 gData 进行了一次深拷贝,之后在函数内操作深拷贝之后的数据,接着又定义了一个 inserChild 函数此函数主要进行数据操作,最后将操作后的数据重新赋值给 gData ,在 inserChild 函数中首先对数组数据进行循环遍历,检查每一项的 key 是否和目标 key 相同,如果相同的话将新节点数据插入到当前遍历的节点的 children 中并 break 跳出循环,没有找到的话进行递归. 接下来更新节点,删除节点,上移/下移的函数和插入节点函数思路相同,在此就不一一解释,如下直接贴上代码

插入同级

                        
                          /**
 * 插入同级
 * @param key 当前节点key 供查询父key
 * @param newNode 新节点数据
 */
const insertNodeInParentByKey = function (
  key: string | number | undefined,
  newNode: any
) {
  const data = JSON.parse(JSON.stringify(gData));
  const insertBro = (
    data: any[],
    key: string | number | undefined,
    newNode: any
  ) => {
    for (let i = 0; i < data.length; i++) {
      const item = data[i];
      if (item.children) {
        for (let j = 0; j < item.children.length; j++) {
          const childItem = item.children[j];
          if (childItem.key === key) {
            item.children.push(newNode);
            break;
          } else if (childItem.children) {
            insertBro([childItem], key, newNode);
          }
        }
      }
    }
    return data;
  };
  setGData(insertBro(data, key, newNode));
};

删除当前节点

                        
                          /**
 * 删除当前节点
 * @param data 源数据
 * @param key 待删除节点key
 */
const deleteNodeByKey = function (key: string | number | undefined) {
  const data = JSON.parse(JSON.stringify(gData));
  const delNode = (data: any[], key: string | number | undefined) => {
    for (let i = 0; i < data.length; i++) {
      const obj = data[i];
      if (obj.key === key) {
        data.splice(i, 1);
        break;
      } else if (obj.children) {
        delNode(obj.children, key);
        if (obj.children.length === 0) {
          delete obj.children;
        }
      }
    }
  };
  delNode(data, key);
  setGData(data);
};

更新当前节点

                        
                          /**
 * 更新子节点配置
 * @param oldData 旧数据
 * @param key 待更新子节点key
 * @param newData 更新后新数据
 */
const updateTreeDataByKey = function (
  key: string | number | undefined,
  newData: any
) {
  const data = JSON.parse(JSON.stringify(gData));
  const updateNode = (
    oldData: any[],
    key: string | number | undefined,
    newData: any[]
  ) => {
    for (let i = 0; i < oldData.length; i++) {
      if (oldData[i].key === key) {
        oldData[i] = { ...oldData[i], ...newData };
        break;
      } else {
        if (Array.isArray(oldData[i].children)) {
          updateNode(oldData[i].children, key, newData);
        }
      }
    }
  };
  updateNode(data, key, newData);
  setGData(data);
};

当前节点上移/下移

                        
                          /**
 * 上移/下移
 * @param data 源数据
 * @param key 目标key
 * @param direction 移动类型
 * @returns 更新后数据
 */
const moveNodeInTreeByKey = function (
  key: string | number | undefined,
  direction: "UP" | "DOWN"
) {
  const data = JSON.parse(JSON.stringify(gData));
  const moveNode = (
    data: any[],
    key: string | number | undefined,
    direction: string
  ) => {
    const newData = [...data];
    for (let i = 0; i < newData.length; i++) {
      const item = newData[i];
      const itemLen = item.children.length;
      if (item.children) {
        for (let j = 0; j < itemLen; j++) {
          const childItem = item.children[j];
          if (childItem.key === key) {
            if (j === 0 && direction === "UP")
              // message.info("已经处于第一位,无法上移");
              message.info({
                content: "已经处于第一位,无法上移",
                className: "custom-class",
                style: {
                  marginTop: "5vh",
                  position: "absolute",
                  right: 20,
                  textAlign: "center",
                },
              });
            if (j === itemLen - 1 && direction === "DOWN")
              // message.info("已经处于最后一位,无法下移");
              message.info({
                content: "已经处于最后一位,无法下移",
                className: "custom-class",
                style: {
                  marginTop: "5vh",
                  position: "absolute",
                  right: 20,
                  textAlign: "center",
                },
              });
            // splice (开始位置,移除元素个数,新增元素对象)
            if (direction === "UP") {
              item.children.splice(j, 1);
              item.children.splice(j - 1, 0, childItem);
            } else {
              item.children.splice(j, 1);
              item.children.splice(j + 1, 0, childItem);
            }

            break;
          } else if (childItem.children) {
            moveNode([childItem], key, direction);
          }
        }
      }
    }
    return newData;
  };
  setGData(moveNode(data, key, direction));
};

完整的 hook 函数

                        
                          const useTreeHandler = (TreeData: DataNode[]) => {
  const [gData, setGData] = useState(JSON.parse(JSON.stringify(TreeData)));
  /**
   * 插入子级
   * @param key 当前节点key
   * @param newNode 待插入节点
   */
  const insertNodeByKey = function (
    key: string | number | undefined,
    newNode: any
  ) {
    const data = JSON.parse(JSON.stringify(gData));
    const insertChild = (
      data: any[],
      key: string | number | undefined,
      newNode: any
    ): any[] => {
      for (let i = 0; i < data.length; i++) {
        if (data[i].key === key) {
          if (Array.isArray(data[i].children)) {
            data[i].children = [...data[i].children, newNode];
          } else {
            data[i].children = [newNode];
          }
          break;
        } else if (Array.isArray(data[i].children)) {
          insertChild(data[i].children, key, newNode);
        }
      }
      return data;
    };
    setGData(insertChild(data, key, newNode));
  };

  /**
   * 插入同级
   * @param key 当前节点key 供查询父key
   * @param newNode 新节点数据
   */
  const insertNodeInParentByKey = function (
    key: string | number | undefined,
    newNode: any
  ) {
    const data = JSON.parse(JSON.stringify(gData));
    const insertBro = (
      data: any[],
      key: string | number | undefined,
      newNode: any
    ) => {
      for (let i = 0; i < data.length; i++) {
        const item = data[i];
        if (item.children) {
          for (let j = 0; j < item.children.length; j++) {
            const childItem = item.children[j];
            if (childItem.key === key) {
              item.children.push(newNode);
              break;
            } else if (childItem.children) {
              insertBro([childItem], key, newNode);
            }
          }
        }
      }
      return data;
    };
    setGData(insertBro(data, key, newNode));
  };
  /**
   * 删除当前节点
   * @param data 源数据
   * @param key 待删除节点key
   */
  const deleteNodeByKey = function (key: string | number | undefined) {
    const data = JSON.parse(JSON.stringify(gData));
    const delNode = (data: any[], key: string | number | undefined) => {
      for (let i = 0; i < data.length; i++) {
        const obj = data[i];
        if (obj.key === key) {
          data.splice(i, 1);
          break;
        } else if (obj.children) {
          delNode(obj.children, key);
          if (obj.children.length === 0) {
            delete obj.children;
          }
        }
      }
    };
    delNode(data, key);
    setGData(data);
  };
  /**
   * 更新子节点配置
   * @param oldData 旧数据
   * @param key 待更新子节点key
   * @param newData 更新后新数据
   */
  const updateTreeDataByKey = function (
    key: string | number | undefined,
    newData: any
  ) {
    const data = JSON.parse(JSON.stringify(gData));
    const updateNode = (
      oldData: any[],
      key: string | number | undefined,
      newData: any[]
    ) => {
      for (let i = 0; i < oldData.length; i++) {
        if (oldData[i].key === key) {
          oldData[i] = { ...oldData[i], ...newData };
          break;
        } else {
          if (Array.isArray(oldData[i].children)) {
            updateNode(oldData[i].children, key, newData);
          }
        }
      }
    };
    updateNode(data, key, newData);
    setGData(data);
  };
  /**
   * 上移/下移
   * @param data 源数据
   * @param key 目标key
   * @param direction 移动类型
   */
  const moveNodeInTreeByKey = function (
    key: string | number | undefined,
    direction: "UP" | "DOWN"
  ) {
    const data = JSON.parse(JSON.stringify(gData));
    const moveNode = (
      data: any[],
      key: string | number | undefined,
      direction: string
    ) => {
      const newData = [...data];
      for (let i = 0; i < newData.length; i++) {
        const item = newData[i];
        const itemLen = item.children.length;
        if (item.children) {
          for (let j = 0; j < itemLen; j++) {
            const childItem = item.children[j];
            if (childItem.key === key) {
              if (j === 0 && direction === "UP")
                message.info("已经处于第一位,无法上移");
              if (j === itemLen - 1 && direction === "DOWN")
                message.info("已经处于最后一位,无法下移");
              // splice (开始位置,移除元素个数,新增元素对象)
              if (direction === "UP") {
                item.children.splice(j, 1);
                item.children.splice(j - 1, 0, childItem);
              } else {
                item.children.splice(j, 1);
                item.children.splice(j + 1, 0, childItem);
              }

              break;
            } else if (childItem.children) {
              moveNode([childItem], key, direction);
            }
          }
        }
      }
      return newData;
    };
    setGData(moveNode(data, key, direction));
  };
  return {
    gData,
    insertNodeByKey,
    insertNodeInParentByKey,
    deleteNodeByKey,
    updateTreeDataByKey,
    moveNodeInTreeByKey,
  };
};

写在最后

演示地址。

完整代码。

最后此篇关于React中编写操作树形数据的自定义Hook的文章就讲到这里了,如果你想了解更多关于React中编写操作树形数据的自定义Hook的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！。

文章推荐：一个高性能、低内存文件上传流.Net组件

文章推荐： 5.2基于ROP漏洞挖掘与利用

文章推荐：使用C#编写.NET分析器（三）

文章推荐： Dubbo的高级特性：服务治理篇

c++ - 当钩子(Hook)启动一个新线程时取消 Hook 一个钩子(Hook)进程
我创建了一个简单的钩子(Hook)，我安装了它 SetWindowsHookEx(WH_CBT, addr, dll, 0); 完成后，我卸载 UnhookWindowsHookEx(0); 然后我可
reactjs - React Hooks Mobx : invalid hook call. Hooks 只能在函数组件的主体内部调用
我正在使用 React Hooks，当我用 mobx 的观察者包装我的组件时，我收到了这个错误。可能是什么问题？是否可以将 mobx 与 React Hooks 一起使用？ import classn
javascript - Redux - Hooks : Using React Hooks with Redux Hooks, 创建无限循环或根本不创建任何内容
我知道这个问题已经被回答过很多次了。我只是找不到解决我的问题的答案，让我相信，我要么是愚蠢的，要么是我的问题没有被解决，因为它比我更愚蠢。除此之外，这是我的问题: 我正在尝试创建一个功能组件，它从 r
react-hooks - React Native 的 useNavigation Hook 在自定义 Hook 内？
我正在使用 React Navigation 的 useNavigation 钩子(Hook): 在 MyComponent.js 中: import { useNavigation } from "
hook - Gitlab 预提交钩子(Hook)
我想在 gitlab 中使用预提交钩子(Hook)。我做的一切都像文档中一样:https://docs.gitlab.com/ce/administration/custom_hooks.html 在
hook - 编程中术语 "hook"是什么意思？
我最近在和一些人谈论我正在编写的程序时听到了“hook”这个词。尽管我从对话中推断出钩子(Hook)是一种函数，但我不确定这个术语到底意味着什么。我搜索了定义，但找不到好的答案。有人可以让我了解这个术
hook - TYPO3:创建或编辑页面后 Hook
我正在寻找一个在页面创建或页面更改后调用的钩子(Hook)，例如“在导航中隐藏页面”、“停用页面”或“移动/删除页面“ 有人知道吗？谢谢! 最佳答案这些 Hook 位于 t3lib/class.t
hook - 在 Hook 环境中添加自定义方法？
我正在使用钩子(Hook)将新方法添加到 CalEventLocalServiceImpl 中... 我的代码是.. public class MyCalendarLocalServiceImpl e
hook - Compass 中的后期编译钩子(Hook)
编译器将所有 SCSS 文件编译为 STANDALONE(无 Rails)项目中的 CSS 后，我需要一个 Compass Hook 。除了编辑“compiler.rb”(这不是好的解决方案，因为
Python 请求 : Hook or no Hook?
我“.get”一个请求并像这样处理响应: resp = requests.get('url') resp = resp.text .. # do stuff with resp 阅读包的文档后，我看到
git Hook : is there a clone hook?
我们想在外部数据库中存储一些关于提交的元信息。在克隆或 checkout 期间，应引用此数据库，我们将元信息复制到克隆的存储库中的文件中。需要数据库而不是仅仅使用文件是为了索引和搜索等...... 我
javascript - react Hook : what is best practice for wrapping multiple instances of a hook with a single hook?
我有一个 react 钩子(Hook)useDbReadTable，用于从接受tablename和query初始数据的数据库读取数据。它返回一个对象，除了数据库中的数据之外，还包含 isLoading
javascript - 使用 React hooks 如何一起更新 2 个钩子(Hook)，但在另一个钩子(Hook)中使用其中一个的 prevState
在下面的代码中，当我调用 _toggleSearch 时，我同时更新 2 个钩子(Hook)。 toggleSearchIsVisible 是一个简单的 bool 值，但是，setActiveFilt
reactjs - 有没有办法使用带有 useFieldArray 钩子(Hook)的 react 钩子(Hook)形式在子组件中设置默认值 - 不使用 useForm 钩子(Hook)？
问题我想在可由用户添加的表单中实现输入字段的键/值对。参见 animated gif on dynamic fields . 此外，我想在用户提交表单并再次显示页面时显示保存的数据。参见 ani
javascript - react Hook : How to read & update state in hooks without infinite loops with react-hooks/exhaustive-deps rule
当状态处于 Hook 状态时，它可能会变得陈旧并泄漏内存: function App() { const [greeting, setGreeting] = useState("hello");
reactjs - React Hooks，如何实现useHideOnScroll hook？
const shouldHide = useHideOnScroll(); return shouldHide ? null : something useHideOnScroll 行为应该返回更新后
javascript - 如何在另一个自定义 Hook 中使用返回值的自定义 Hook ？
我正在使用 React-native，在其中，我有一个名为 useUser 的自定义 Hook，它使用 Auth.getUserInfro 方法从 AWS Amplify 获取用户信息，并且然后获取返
hook - Gitolite 更新 Hook 排除存储库
我正在添加一个 gitolite 更新 Hook 作为 VREF，并且想知道是否有办法将它应用于除 gitolite-admin 之外的所有存储库。有一个更简单的方法而不是列出我想要应用 Hook
react-hooks - 渲染的钩子(Hook)比上一次渲染时更多
如何使用带有 react-apollo-hooks 的 2 个 graphql 查询，其中第二个查询取决于从第一个查询中检索到的参数？我尝试使用如下所示的 2 个查询: const [o, setO
javascript - React hooks - 不能在普通异步函数中使用 hook？
我是 hooks 的新手，到目前为止印象还不错，但是，如果我尝试在函数内部使用 hooks，它似乎会提示(无效的 hook 调用。Hooks can only be called inside o

我是一只小鸟

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城