antd mobile 作者教你写 React 受控组件和非受控组件(一 )

简介: 曾经,我每次面试时几乎都会问一个问题:antd 中的 Input 组件是受控组件还是非受控组件?

曾经,我每次面试时几乎都会问一个问题:antd 中的 Input 组件是受控组件还是非受控组件?


有些人会毫不犹豫的回答:是受控组件,因为有 valueonChange,而另外也有一些人会比较犹豫,因为的确似乎说 Input 是受控组件或非受控组件都说得过去。当然,实际上 Input 组件既可以是受控组件,也可以是非受控组件,这完全取决于业务项目中怎么去使用它。


在这篇文章,我们将一起聊聊怎么去让一个组件像 antd 的 Input 组件这样,既支持受控模式,又支持非受控模式。让我们从最简单和基础的部分出发,一点点来分析和演进,看看会遇到哪些问题,又如何一步步解决。


什么是受控组件?什么又是非受控组件?


让我们先来看一个简单的例子,这个 Input 组件有一个内部的状态(State)value,而且它没有任何属性,因此很显然,它是一个非受控的组件,它的组件状态并不受外部环境控制,而是封闭在组件内部。


640 (4).jpg


而如果我们稍微对它做一点调整,把原本的内部状态 value 去掉,放到 props 上去,它就变成了受控组件:


640.jpg

很显然,此时输入框的值是取决于外部传递进来的 props


如果我们画个图,那可以很清楚的看到受控和非受控的区别:


640 (1).jpg


图中蓝色的方框表示组件,黄色的圆圈表示组件内的状态。


既受控组件又非受控?


尽管在业务项目中,我们写的组件都是明确的受控或者非受控,但对于组件库来说,有非常多的组件需要做到既支持受控模式,又支持非受控模式。以 antd-mobile 现在的 5.17 版本为例,几乎全部的涉及到输入值、切换、展开收起的组件,都是需要做到既受控又非受控的。


尽管听起来似乎不难,但实际写起来还是会遇到一些困难的,让我们来试一试。


如何实现


最简单的方案:内外两个状态,手动同步


考虑到实现成本的复杂度,我们需要让组件逻辑在两种模式下,尽可能的保持一致,减少逻辑分支意味着更好的可维护性和可读性。所以,自然而然的,我们可以很容易想到这个方案:


Child 组件内部始终存在一个状态,不管它处于哪种模式,它都直接使用自己内部的状态。而当它处于受控模式时,我们让它的内部状态和 Parent 组件中的状态手动保持同步


下面的示意图中加上了两个对勾标记,被勾选的状态表示 Child 组件实际在使用哪个状态


640.jpg


这套方案听起来是可行的,我们把它写成代码:


640 (1).jpg


仔细看上面的代码,我们会发现在受控模式下存在两个问题:


  1. 原子性:Child 内部状态的更新会比 Parent 组件晚一个渲染周期,存在 tearing 的问题


  1. 性能:因为是在 useEffect 中通过 setState 来做的状态同步,所以会额外的触发一次渲染,存在性能问题


明确问题之后,我们来逐个解决:


解决问题 1:原子性


这个问题其实很好解决,我们其实并不需要 Child 和 Parent 的状态保持非常严格的每时每刻都一致,我们只需要判断,如果组件此时处于受控模式,那么直接使用来自外部的状态就可以了:


640 (2).jpg


这样,即便状态的同步是存在延迟的,但是 Child 组件所真正使用到的值一定是最新的。


代码如下:


640.jpg


解决问题 2:性能


因为我们是在 useEffect 去做状态同步的,所以自然会额外的多触发一次 Child 组件的重渲染。如果 Child 组件比较简单的话,那出现的性能影响可以忽略不计。但是对于一些复杂的组件(例如 Picker),多渲染一次带来的性能问题是比较严重的。


那有没有办法在 Child 组件的 render 阶段就直接更新 value 状态呢?


并不可以,React 不允许我们在 render 过程中调用 setState


似乎进入了死胡同,但我们可以停下来,重新考虑一下这行 useState 的代码:


640.png


当我们创建这个 State 时?我们的目的是什么?State 的本质是什么?


如果比较简单粗暴的分析,我们可以把 State 拆成两部分:


  1. State 是用来存放数据的,它让我们在组件的渲染函数之外,可以“持久化”一些数据


  1. State 的更新可以触发重新渲染,因为 React 会感知 State 的更新


如果写一个公式的话,可以写成:


State = 存放数据 + 触发重新渲染


而但就存放数据来看,我们可以直接使用 Ref;同样,如果只是需要触发重新渲染,我们可以使用类似于 setFlag({}) 或者 setCount(v => v + 1) 这样的强制方式(虽然很蠢,但想必 90% 的 React 开发者都曾经这么写过)。


那我们根据这个推断来调整一下上面的公式:


State = Ref + forceUpdate()


我们已经非常接近了,根据这个公式,我们可以把 Child 组件中的 State 拆成一个 Ref 和一个 forceUpdate 函数:


下图中的虚线浅色圆圈表示 ref,刷新图标表示 forceUpdate 函数


640 (1).jpg


这样一来,我们就可以直接在 render 阶段直接更新 ref 的值了:


640.jpg


再回头看下代码,会发现,为什么还需要判断根据受控和非受控模式来使用不同的值呢?


(上面代码块中的第 12 行)。既然 stateRef.current 一定是最新的值,那么完全可以简化成 Child 组件永远使用内部存放的数据(Ref):


640 (1).jpg


除此之外,我们还可以把手动实现的 forceUpdate 替换成 ahooks 的 useUpdate


640.jpg

目录
相关文章
|
29天前
|
前端开发 开发者
React 函数组件与类组件对比
【10月更文挑战第4天】本文详细比较了React中的函数组件与类组件。函数组件是一种简单的组件形式,以纯函数的形式返回JSX,易于理解与维护,适用于简单的UI逻辑。类组件则是基于ES6类实现的,需要重写`render`方法并能利用更多生命周期方法进行状态管理。文章通过示例代码展示了两者在状态管理与生命周期管理上的差异,并讨论了常见的问题如状态更新异步性与生命周期管理的复杂性,最后给出了相应的解决方法。通过学习,开发者可以根据具体需求选择合适的组件类型。
52 8
|
27天前
|
人工智能 自然语言处理 前端开发
SpringBoot + 通义千问 + 自定义React组件:支持EventStream数据解析的技术实践
【10月更文挑战第7天】在现代Web开发中,集成多种技术栈以实现复杂的功能需求已成为常态。本文将详细介绍如何使用SpringBoot作为后端框架,结合阿里巴巴的通义千问(一个强大的自然语言处理服务),并通过自定义React组件来支持服务器发送事件(SSE, Server-Sent Events)的EventStream数据解析。这一组合不仅能够实现高效的实时通信,还能利用AI技术提升用户体验。
141 2
|
1天前
|
移动开发 前端开发 API
React 拖拽组件 Drag & Drop
本文介绍了在 React 中实现拖拽功能的方法,包括使用原生 HTML5 Drag and Drop API 和第三方库 `react-dnd`。通过代码示例详细讲解了基本的拖拽实现、常见问题及易错点,帮助开发者更好地理解和应用拖拽功能。
16 9
|
8天前
|
前端开发 JavaScript 安全
学习如何为 React 组件编写测试:
学习如何为 React 组件编写测试:
22 2
|
15天前
|
前端开发 JavaScript 测试技术
React 高阶组件 (HOC) 应用
【10月更文挑战第16天】高阶组件(HOC)是 React 中一种复用组件逻辑的方式,通过接受一个组件并返回新组件来实现。本文介绍了 HOC 的基础概念、核心功能和常见问题,包括静态方法丢失、ref 丢失、多个 HOC 组合和 props 冲突的解决方案,并提供了具体的 React 代码示例。通过本文,读者可以更好地理解和应用 HOC,提高代码的复用性和可维护性。
39 8
|
14天前
|
缓存 前端开发 JavaScript
前端serverless探索之组件单独部署时,利用rxjs实现业务状态与vue-react-angular等框架的响应式状态映射
本文深入探讨了如何将RxJS与Vue、React、Angular三大前端框架进行集成,通过抽象出辅助方法`useRx`和`pushPipe`,实现跨框架的状态管理。具体介绍了各框架的响应式机制,展示了如何将RxJS的Observable对象转化为框架的响应式数据,并通过示例代码演示了使用方法。此外,还讨论了全局状态源与WebComponent的部署优化,以及一些实践中的改进点。这些方法不仅简化了异步编程,还提升了代码的可读性和可维护性。
|
2天前
|
前端开发 UED
React 模态框 Modal 组件详解
【10月更文挑战第27天】本文介绍了如何在 React 中实现一个功能完善的模态框组件。从基础概念入手,逐步讲解了简单的模态框实现、CSS 样式、传递子组件、键盘事件处理等高级功能。同时,还探讨了常见问题及易错点,如背景点击关闭、键盘事件冲突和动画效果。通过本文,读者可以全面了解 React 模态框组件的实现细节。
9 0
|
26天前
|
前端开发 JavaScript 调度
React 组件状态(State)
10月更文挑战第8天
16 1
|
1月前
|
JavaScript 前端开发 安全
使用 TypeScript 加强 React 组件的类型安全
【10月更文挑战第1天】使用 TypeScript 加强 React 组件的类型安全
37 3
|
2月前
|
前端开发 JavaScript 区块链
react18函数组件+antd使用指南-使用代码集合以及报错记录汇总
本文介绍了多个React开发中常见的问题及其解决方案,包括但不限于:1)`useForm`实例未连接到任何`Form`元素的警告及解决方法;2)监听页面滚动事件的实现方式;3)React 18与antd 5.8.6中定制主题的方法;4)React结合antd 4.x版本自定义主题色的步骤;5)解决`ResizeObserver loop`相关报错的技巧;6)处理React设计表单时遇到的CDN资源加载失败问题;7)解决onClick事件传参问题;8)修复类型错误等。每部分均提供详细分析与实用代码示例,帮助开发者快速定位并解决问题。
39 2