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

目录
打赏
0
1
0
0
8
分享
相关文章
在 React 中,组合组件和高阶组件在性能方面有何区别?
在 React 中,组合组件和高阶组件在性能方面有何区别?
26 12
如何使用组合组件和高阶组件实现复杂的 React 应用程序?
如何使用组合组件和高阶组件实现复杂的 React 应用程序?
29 11
除了高阶组件和render props,还有哪些在 React 中实现代码复用的方法?
除了高阶组件和render props,还有哪些在 React 中实现代码复用的方法?
24 6
React 音频播放器组件 Audio Player
本文介绍如何使用React创建音频播放器组件,涵盖核心功能如播放/暂停、进度条、音量控制和时间显示。通过HTML5 `<audio>` 元素和React的声明式状态管理,实现交互式音频播放。常见问题包括控件不响应、进度条无法更新和音量控制失灵,并提供解决方案。此外,还讨论了浏览器兼容性、异步错误处理和性能优化等易错点及避免方法。
389 123
除了使用Route组件,React Router还有其他方式处理404错误页面吗
除了使用Route组件,React Router还有其他方式处理404错误页面吗
100 58
React 中高阶组件的原理是什么?
React 中高阶组件的原理是什么?
117 57
除了函数组件和类组件,React 还有其他创建组件的方式吗?
除了函数组件和类组件,React 还有其他创建组件的方式吗?
95 57
如何在React Router中定义404错误页面组件?
如何在React Router中定义404错误页面组件?
94 57
在 React 中使用高阶组件时,如何避免命名冲突?
在 React 中使用高阶组件时,如何避免命名冲突?
103 56
React音频播放列表组件:常见问题、易错点与解决方案
本文介绍了在React中实现音频播放列表时常见的挑战及解决方案。通过基础实现、常见问题分析和最佳实践,帮助开发者避免状态管理、生命周期控制和事件处理中的陷阱。关键点包括使用`useRef`操作音频元素、`useState`同步播放状态、全局状态管理防止多音频同时播放、以及通过`useEffect`清理资源。还提供了代码示例和跨浏览器兼容性处理方法,确保高效实现功能并减少调试时间。
123 30
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等