现代 React Web 开发实战
宋一玮
FreeWheel 中国研发中心前端架构师
16115 人已学习
新⼈⾸单¥59
登录后,你可以任选4讲全文学习
课程目录
已完结/共 31 讲
现代 React Web 开发实战
15
15
1.0x
00:00/00:00
登录|注册

13|组件表与里(下):用接口的思路设计开发React组件

你好,我是宋一玮,欢迎回到 React 应用开发的学习。
上节课一开始就提到了,我们会用两节课的时间学习组件的“面子”和“里子”。那你可能会问了,上节课讲到的 React 单向数据流算是“面子”还是“里子”呢?我先卖个关子,学完这节课你就有答案了。
在面向对象编程实践中,接口就是天然的“面子”,接口实现就是“面子”后面的“里子”。那么这节课,我们就要借鉴面向接口编程的思路,一边探讨在 React 应用开发中接口会以什么形式存在,一边继续上节课的 oh-my-kanban 大重构。在这节课的后半段,我们还会为 oh-my-kanban 加入基础的管理员功能。
当学习完这节课,你会对 React 组件的分工和交互有更深入的理解,同时也会收获一个好用的看板应用。
下面我们开始这节课的内容。

面向接口编程

现代软件编程的一大最佳实践是面向接口编程。所谓软件接口(Software Interface),就是两个或多个模块间用来交换信息的一个共享的边界
前端组件也有接口的概念,不同框架对接口的定义和使用都有所不同。这里举三个例子。
第一个例子,Angular 里的 Form,是一个命令式接口,开发者一般不需要自己实现它,因为 Angular 框架里已经内置了实现:
确认放弃笔记?
放弃后所记笔记将不保留。
新功能上线,你的历史笔记已初始化为私密笔记,是否一键批量公开?
批量公开的笔记不会为你同步至部落
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线
笔记
复制
AI
  • 深入了解
  • 翻译
    • 英语
    • 中文简体
    • 中文繁体
    • 法语
    • 德语
    • 日语
    • 韩语
    • 俄语
    • 西班牙语
    • 阿拉伯语
  • 解释
  • 总结

本文深入探讨了React组件设计中接口的重要性,并介绍了如何合理地使用props、state、context等接口。重点讨论了React组件的接口实现,包括props、state、context、事件处理、Hooks、子组件和组件样式等。通过实际例子和技术概念,读者可以快速了解React应用开发中接口设计和组件开发的关键技术特点。此外,文章还介绍了在重构`oh-my-kanban`应用中的第二步,即将逻辑转移到各组件中的过程,以降低父组件的复杂度。通过分步骤的重构方法,读者可以学习到如何将KanbanCard相关的逻辑从App转移到KanbanColumn中。文章还介绍了状态提升(Lifting State Up)的技巧,以及如何用context解决属性钻取问题。总的来说,本文内容丰富,适合对React应用开发感兴趣的读者阅读学习。

仅可试看部分内容,如需阅读全部内容,请付费购买文章所属专栏
《现代 React Web 开发实战》
新⼈⾸单¥59
立即购买
登录 后留言

全部留言(14)

  • 最新
  • 精选
  • 船长
    反馈个 Bug:文章里的 KanbanCard 判断是否展示删除按钮时,isAdmin 会始终为 True,因为从 useContext 引出来后,其值是:{isAdmin:false},是个 obj,始终为 true,删除按钮会一直显示

    作者回复: 你好,船长,感谢抓虫,不过我重新跑了一下 https://gitee.com/evisong/geektime-column-oh-my-kanban/tree/v0.13.0 的代码,没能复现你提到的问题。 目前代码中AdminContext就是一个布尔值,你提到的“{isAdmin:false},是个 obj”,我怀疑你是不是在为Provider传值时传了obj?类似这样: - <AdminContext.Provider value={isAdmin}> + <AdminContext.Provider value={{isAdmin}}> 如果这么改代码的话,我本地确实能复现始终显示删除按钮的问题。

    2022-09-26归属地:北京
    3
    1
  • Geek_a19712
    代码是不是写错了,上边 KanbanCard 删除的方法传的是 title ,但是在 App.js 中的 handleRemove 方法中过滤的条件是 item.title !== cardToRemove.title ,所以是不是应该把 KanbanCard 删除方法改成传 props 或者 App.js 中过滤条件 item.title !== cardToRemove.title 改成 item.title !== cardToRemove

    作者回复: 你好,Geek_a19712,感谢你的抓虫。我检查了一下,不是虫。还是这一讲的内容,在“用 context 解决属性钻取问题”小节的代码中,handleRemove函数是作为prop值一路传给KanbanCard的onRemove,看一下KanbanCard是如何调用这个onRemove的: <button onClick={() => onRemove({title})}>X</button> 可以看到这里传给cardToRemove参数的值是 {title},等同于 const cardToRemove = { title: title } 是一个object。所以后续做过滤的时候也需要从object里取title属性。这也是为了跟拖拽逻辑里的参数保持一致。

    2023-08-28归属地:天津
    2
  • 网瘾少年
    M https://github.com/xzxldl55/FE-collection/tree/main/task-board

    作者回复: 赞!

    2023-07-25归属地:江西
  • 派大心
    M_M

    作者回复: ^_^

    2023-07-16归属地:北京
  • Geek_b8f92f
    请问老师: 代码中有大量的onDragStart && onDragStart(evt)这种写法 为什么不是直接写成onDragStart(evt), 这么写的好处是什么,谢谢

    作者回复: 你好,Geek_b8f92f,这是个好问题。func && func(args) 是指func不为空时才会去调用它,这样的写法能提升程序的健壮性,也可以利用ES2020的新语法func?.(args),效果是相同的。但请注意一点,这里仅判断了是否为空,如果需要进一步提升健壮性,还需要判断func的类型typeof func === 'function'。 当然,这也并不意味着我们需要在所有使用参数的地方都去做类似的检查,还是要根据实际需要。如果感兴趣的话,可以了解一下防御性编程。

    2023-06-11归属地:上海
  • 进击的莫莫哒
    M

    作者回复: 你好,进击的莫莫哒,非常高兴看到你对自己写的代码满意。

    2022-10-16归属地:北京
  • Geek_8e9c8d
    M

    作者回复: 你好,Geek_8e9c8d,非常高兴看到你对自己写的代码满意。

    2022-10-11归属地:北京
  • WL
    老师讲得很好,组件也可以看作是接口,我们通过props传入一些内容,组件帮我们实现一些功能,组件不负责保存上级组件的状态

    作者回复: 你好,WL,(握手),你说得对,尤其“组件不负责保存上级组件的状态”这一点,是React数据流保持单向性的必要条件。

    2022-09-26归属地:北京
  • 船长
    思考题 2: 父-子通信:props,context 子-父通信:props.callback() --(查课外资料) 兄弟通信:context

    作者回复: 你好,船长,答案基本正确~ * 子-父通信:父组件通过props或context传递回调函数给子组件,子组件调用回调来实现; * 兄弟通信:如A与B通信,拆分成 子(A)-父通信 加上 父-子(B)通信

    2022-09-26归属地:北京
    2
  • 船长
    思考题 1:有父子、祖孙之间的 props 传递流,也有组件内部的 state 数据流,也有 context 共享数据流(可以忽略 props 的层层传递,直接一步到位)

    作者回复: 你好,船长,很棒的答案。在设计oh-my-kanban这个项目时应该是把有代表性的数据流都做进去了,万一有遗漏的还请指出哈。

    2022-09-26归属地:北京
收起评论
显示
设置
留言
14
收藏
沉浸
阅读
分享
手机端
快捷键
回顶部