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），仅供参考