React Hooks 核心原理与实战
王沛
eBay 中国研发中心资深技术专家
新⼈⾸单¥59.9
1207 人已学习
课程目录
已更新 13 讲 / 共 23 讲
0/2登录后,你可以任选2讲全文学习。
开篇词 (1讲)
开篇词 | 全面拥抱 Hooks,掌握最新 React 开发方式
免费
基础篇 (7讲)
01|认识 React:如何创建你的第一个 React 应用?
02|理解 Hooks:React 为什么要发明 Hooks?
03|内置 Hooks(1):如何保存组件状态和使用生命周期?
04|内置 Hooks(2):为什么要避免重复定义回调函数?
05|进一步认识 Hooks :如何正确理解函数组件的生命周期?
06|自定义Hooks :四个典型的使用场景
07|全局状态管理:如何在函数组件中使用 Redux?
实战篇 (5讲)
08|复杂状态处理:如何保证状态一致性?
答疑解惑01|如何转换应用React Hooks 的思路?
09|异步处理:如何向服务器端发送请求?
10|函数组件设计模式:如何应对复杂条件渲染场景?
11|事件处理:如何创建自定义事件?
React Hooks 核心原理与实战
15
15
1.0x
00:00/00:00
登录|注册

10|函数组件设计模式:如何应对复杂条件渲染场景?

王沛 2021-06-17
你好,我是王沛。今天我们来聊聊函数组件中的设计模式。
所谓设计模式,就是针对特定场景,提供一种公认的最佳实践。在前面的课程中,我们已经提到了不少模式,比如保证状态的唯一数据源,语义化的拆分复杂组件,等等。熟练掌握这些模式,可以让我们的代码更加简洁直观。
那么今天这节课我会介绍另外两个模式:
一个和 Hooks 相关,用于解决 Hooks 无法在条件语句中执行带来的一些难题;
另一个则是经典的 render props 模式,用于实现 UI 逻辑的重用。

容器模式:实现按条件执行 Hooks

第 2 讲我们介绍了 Hooks 的一个重要规则,即:Hooks 必须在顶层作用域调用,而不能放在条件判断、循环等语句中,同时也不能在可能的 return 语句之后执行。换句话手,Hooks 必须按顺序被执行到。
这个规则存在的原因就在于,React 需要在函数组件内部维护所用到的 Hooks 的状态,所以我们无法在条件语句中使用 Hooks,这因而会给我们实现业务逻辑带来一定的局限。
比如说,对于一个对话框组件,通过 visible 属性来控制是否显示。那么在 visible 为 false 的时候,其实不应该执行任何对话框内部的逻辑,因为还没展示在 UI 上。
需要注意,只有在 visible 为 true 的时候才应该去执行业务逻辑,展现数据。那么我们期望的代码可能是下面的方式:
确认放弃笔记?
放弃后所记笔记将不保留。
新功能上线,你的历史笔记已初始化为私密笔记,是否一键批量公开?
批量公开的笔记不会为你同步至部落
公开
同步至部落
取消
完成
0/1000字
划线
笔记
复制
© 版权归极客邦科技所有,未经许可不得传播售卖。 页面已增加防盗追踪,如有侵权极客邦将依法追究其法律责任。
该试读文章来自付费专栏《React Hooks 核心原理与实战》,如需阅读全部文章,
请订阅文章所属专栏新⼈⾸单¥59.9
立即订阅
登录 后留言

精选留言(5)

  • Free fall
    做过一个文件预览的功能,根据选中的文件类型,用对应的插件预览
    2021-06-17
    2
  • 知鱼
    后期会有视频吗?

    编辑回复: 没有啦,知鱼同学~这次王沛老师带来的是专栏,主要是文字➕音频的形式哦~对于React Hooks的学习来说完全够用了,老师也讲得很清晰。

    2021-06-18
  • 何用
    UserInfoModalWrapper 考虑 Modal 动画了吗?这种改写不是等价的,会散失动画效果

    作者回复: 很好的问题。如果考虑动画的场景,那么 visible 从 false -> true 是会默认保留动画;如果是 true -> false,那取决于什么时候设置 visible。比如对于 antd 的 Modal,可以在 afterClose 事件里再去设置 visible 为 false,也就是动画结束后才是真正的 visible=false,那就会保留动画了。所以这属于具体如何封装的实现细节,具体情况具体考虑,总体的模式是不变的。

    2021-06-18
    1
  • Geek_71adef
    对于新加/修改表单(表单字段较多),这种是不是不适合用render props ,而组件直接引入,传递参数这样更好,这样的理解对么
    2021-06-18
  • 与你.
    学react的时候直接学过hooks, 对于这个render props好像还是不理解
    2021-06-17
收起评论
5
返回
顶部