React

React 用组件来组织界面。组件收到数据后，返回要显示的结构；数据变化时，React 会重新显示对应的 UI。

• Props 是传给组件的输入，例如任务标题和完成状态。
• 组件把结构、显示和交互放在一个可复用的界面单元里。
• 数据更新后，React 重新渲染受影响的组件，不需要手动拼整张页面。

JavaScript 或 TypeScript 是写代码的语言，React 是用来组织界面组件的方案；它通常运行在前端，不负责数据库和服务器接口。

• HTML 可以描述页面结构，React 把结构拆成可以复用和更新的组件。
• Props 和状态变化可以触发界面更新，但外部接口返回的数据仍然需要单独验证。

看到“组件接收数据并更新对应 UI”时想到 React，看到“服务器保存数据”时还要看后端接口和数据库。

拆开这次任务卡更新，可以看到 React 组件树、局部状态和渲染边界三个真实部分。

• TREE 是 App、TaskBoard 到 TaskCard 的父子组件关系。
• STATE 是 TaskCard 自己管理的 done 状态，以及 setDone(true) 这次更新。
• RENDER 是状态变化后，TaskCard 边界内显示新的完成态。

请把任务卡拆成可复用 React 组件，通过 props 接收标题和完成状态；数据变化时更新对应 UI，不要手动拼整张页面。请保留键盘可用性、可读状态提示，以及 390px 和 320px 下不横向滚动。