恒美微站 Logo 恒美微站
  • 首页
  • 关于我们
  • 建站服务
  • 主题模板
  • 案例展示
  • 资讯中心
  • 联系我们

react-kanban 受控还是非受控?10 分钟搞懂看板两种状态管理模式

  • 首页
  • 资讯中心
  • /
  • react-kanban 受控还是非受控?10 分钟搞懂看板两种状态管理模式

相关资讯

无审查模型的安全边界在哪里?Qwen3.8-27B-Heretic-Abliterated-Uncensored-GGUF责任使用与合规指南 2026/8/20 21:13:56
LRC歌词批量下载完整清单:给整个音乐库补歌词的免费方案 2026/8/20 21:13:56
103、车载摄像头自检机制——冻结帧/黑帧/模糊帧的实时检测算法与芯片实现 2026/8/20 21:08:56

最新资讯

网络协议栈丢包时的处置流程
向量化存储排障实验失败后怎样复盘
量化推理异常的排查方法
高性能调用框架的延迟治理
大模型推理部署中的显存与拓扑检查
软件测试求职实战指南:从简历优化到面试通关

今日推荐

类模板模板参数的全部使用场景
多态的理解,虚函数表的理解
C++ 类编译器自动生成的默认函数 | 拷贝构造函数 vs 拷贝赋值运算符(赋值构造)

本周热门

【文章复现】非线性值迭代自适应动态规划(ADP):离散时间非线性系统的策略迭代自适应动态规划算法研究附Matlab代码
【双层规划,节点出清价,绿证交易,CVaR方法】两级电力市场环境下计及风险的省间交易商最优购电模型附Matlab代码
隐式mpc+自适应mpc+时变mpc,线性时变模型预测控制附Simulink仿真

本月精选

如何用DamaiHelper实现演唱会门票的智能自动化抢购:完整技术解决方案指南
第4篇:59 倍性能差距的索引瓶颈定位——一次教科书级的全表扫描调优
终极歌词批量下载神器:5分钟解决离线音乐库歌词同步难题

react-kanban 受控还是非受控?10 分钟搞懂看板两种状态管理模式

发布时间:2026/8/20 21:13:56
react-kanban 受控还是非受控?10 分钟搞懂看板两种状态管理模式 react-kanban 受控还是非受控?10 分钟搞懂看板两种状态管理模式【免费下载链接】react-kanbanYet another Kanban/Trello board lib for React.项目地址: https://gitcode.com/gh_mirrors/reac/react-kanbanreact-kanban 是 React 生态中一个轻量、好用的看板Kanban/Trello组件库支持拖拽卡片、拖拽列表、增删改列等完整功能。很多新手在第一次使用时都会卡在一个问题上react-kanban 受控还是非受控到底该怎么选其实两种模式都支持关键看你的数据状态由谁来管理。本文用 10 分钟带你彻底搞懂 react-kanban 的受控组件与非受控组件两种状态管理模式以及各自的适用场景。为什么 react-kanban 有两种状态管理模式React 表单领域有一个经典概念受控组件Controlled与非受控组件Uncontrolled。react-kanban 把这个思路用在了看板组件上让你可以根据项目复杂度自由选择数据管理方式。核心判断逻辑就藏在 Board/index.js 这一行代码里function Board(props) { return props.initialBoard ? UncontrolledBoard {...props} / : ControlledBoard {...props} / }也就是说传了initialBoard就是非受控模式没传就是受控模式就这么简单。非受控模式开箱即用的最快配置方法非受控模式是最省心的入门方式适合原型开发、内部工具、演示页面等场景。一键使用步骤安装依赖yarn add asseinfo/react-kanban定义你的看板数据列和卡片通过initialBoardprop 传入直接渲染import Board from asseinfo/react-kanban const board { columns: [ { id: 1, title: 待办, cards: [{ id: 1, title: 写文章, description: 完成 react-kanban 教程 }] }, { id: 2, title: 进行中, cards: [{ id: 2, title: 搭项目, description: 初始化脚手架 }] }, ], } Board initialBoard{board} /非受控模式的工作原理在非受控模式下组件内部通过useState自己持有看板状态拖拽、增删卡片等操作都由组件内部自动完成你无需关心数据如何变化。可以看 Board/index.js 中的实现const [board, setBoard] useState(initialBoard)所有操作拖拽移动、删除列、新增卡片结束后组件都会更新自己的内部状态并通过onCardDragEnd、onColumnRemove等回调通知你发生了什么。内部帮你干活回调告诉你结果这就是非受控模式的精髓。非受控模式的注意事项想拿到最新数据需要依赖回调参数如onCardDragEnd(board, card, source, destination)新增列/卡片时必须通过onNewColumnConfirm、onNewCardConfirm回调返回带唯一 id 的新数据适合不需要持久化、不与其他组件共享状态的场景受控模式把数据牢牢握在自己手里当你的看板数据需要与后端同步、与 Redux/Zustand 等状态库联动、或者多个组件共享同一份数据时受控模式才是正确选择。受控模式的使用步骤用useState在自己组件里维护看板数据通过children而不是initialBoard把数据传给Board拖拽结束后在回调里用官方 helper 更新自己的状态import Board, { moveCard } from asseinfo/react-kanban import { useState } from react function App() { const [board, setBoard] useState(initialBoard) function handleCardDrag({ source, destination }) { if (!destination) return // 用官方 helper 生成新看板再写回 state setBoard(moveCard(board, source, destination)) } return Board onCardDragEnd{handleCardDrag}{board}/Board }受控模式的工作原理受控模式下Board组件只负责渲染不保存任何状态。数据流是单向的你的 state → 组件渲染 → 用户操作 → 回调给你 → 你更新 state → 重新渲染。整个状态管理闭环完全由你掌控。官方在 README.md 中明确说明受控模式需要你自己处理看板状态组件只是反射你的状态。受控模式的常用 helper 函数受控模式最怕自己手写数据变换逻辑好消息是官方提供了一整套纯函数 helper全部在 src/services/helpers.js 中100% 单元测试覆盖不产生任何副作用Helper作用moveCard(board, source, destination)移动卡片moveColumn(board, source, destination)移动列addCard(board, column, card, {on})新增卡片可指定顶部/底部removeCard(board, column, card)删除卡片addColumn(board, column)新增列removeColumn(board, column)删除列changeColumn(board, column, newData)修改列属性如重命名changeCard(board, cardId, newData)修改卡片属性用法统一传入 board 和操作参数返回一个新 board你只需要setBoard(newBoard)即可。受控 vs 非受控一张表帮你快速决策对比维度非受控模式受控模式传入方式initialBoardchildren状态归属组件内部useState你自己的 state上手难度⭐ 简单开箱即用⭐⭐⭐ 需要自己管理数据数据持久化需要从回调中取最新数据天然适合state 即真相状态共享较困难轻松与全局状态库联动适合场景原型、演示、简单内部工具生产环境、复杂业务、后端同步生产环境的最佳实践建议如果你是初学者先用非受控模式跑通 demo感受拖拽交互正式开发时再切换到受控模式配合 helper 函数管理数据。这里给出三条实战建议始终把 helper 当作唯一的数据变更入口避免手写数组变换减少 bug在onCardDragEnd里先判断destination是否为空拖拽到看板外时destination为null此时不应更新数据官方测试用例也验证了这一点见 Board/index.spec.js记住两种模式的回调参数差异非受控模式的onCardDragEnd回调第一个参数是更新后的完整 board受控模式的回调第一个参数是移动的卡片对象具体差异可查阅官方文档 README.md总结react-kanban 受控还是非受控本质是**谁拥有数据状态**的选择题想要省心、快速出效果就选非受控想要可控、可持久化就选受控。10 分钟已经过去相信你现在已经能根据项目需求做出正确的决定了。快去你的 React 项目里试一试吧【免费下载链接】react-kanbanYet another Kanban/Trello board lib for React.项目地址: https://gitcode.com/gh_mirrors/reac/react-kanban创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考

关于恒美微站

恒美微站专注于为个体商户、工作室提供极简自助建站服务,让每个人都能轻松拥有专业网站。

快速链接

  • 关于我们
  • 建站服务
  • 主题模板
  • 案例展示
  • 资讯中心

服务项目

  • 可视化建站
  • 拖拽编辑
  • 主题定制
  • SEO 优化
  • 网站托管

联系方式

  • 📍 地址:北京市朝阳区建国路 88 号
  • 📞 电话:400-888-8888
  • ✉️ 邮箱:info@hmyw.cn
  • 🕐 时间:周一至周日 9:00-18:00

© 2024 恒美微站 hmyw.cn 版权所有 | 京 ICP 备 12345678 号