React源码中如何实现受控组件

开发 前端
今天我们站在框架开发者的角度来聊聊如何实现受控组件。

[[347457]]

今天我们站在框架开发者的角度来聊聊如何实现受控组件。

在React中一个简单的受控组件如下:

  1. function App() { 
  2.   const [num, updateNum] = React.useState(0); 
  3.    
  4.   const onChange = ({target: {value}}) => { 
  5.     updateNum(value); 
  6.   } 
  7.  
  8.   return ( 
  9.     <input value={num} onChange={onChange}/> 
  10.   ) 

在onChange中会更新num,num作为value prop传递给<input/>,达到value受控的目的。

如果让你来设计,你会怎么做?

我相信大部分同学第一个想法是:将value prop与其他attribute prop一样处理就行。

我们知道React内部运行有3个阶段:

  • schedule 调度更新阶段
  • render 进行diff算法的阶段
  • commit 进行DOM操作的阶段

假设我们要在onChange中触发更新改变className,只需要在render阶段记录要改变的className,在commit阶段执行对应的addClass DOM操作。

同样的,如果我们要在onChange中触发更新改变value,只需要在render阶段记录要改变的value,在commit阶段执行对应的inputDOM.setAttribute('value', value)操作。

这样逻辑非常通顺。那么事实上呢?

直接改变value的问题
className只是inputDOM上的一个普通属性。而value则涉及到输入框光标的位置。

如果我们直接修改value,那么属性改变后input的光标输入位置也会丢失,光标会跳到输入框的最后。

想想我们将1234修改为12534。

  1. 1234 --> 12534 

需要先将光标位置移动到2之后,再输入5。

如果setAttribute('value', '12534'),那么光标不会保持在5后面而是跳到4后面。

那么React如何解决这个问题呢?

用非受控的形式实现受控组件

你没有看错,React用非受控形式实现了受控组件的逻辑。

简单的说,不同于className在commit阶段受控更新,value则完全是非受控的形式,只在必要的时候受控更新。

因为一旦更新value,那么光标位置就会丢失。

我们稍微修改下Demo,input为受控组件,value始终为1:

  1. function App() { 
  2.   const num = 1; 
  3.  
  4.   return ( 
  5.     <input value={num}/> 
  6.   ) 

当我们在源码中打上断点,输入2后,实际上会先显示12,再删掉2。

只不过这个删除的过程是同步的所以看起来输入框内始终只有1。

所以,不同于React其他组件props的更新会经历schedule - render - commit流程。

对于input、textarea、select,React有一条单独的更新路径,这条路径触发的更新被称为discreteUpdate。

这条路径的工作流程如下:

  1. 先以非受控的形式更新表单DOM
  2. 以同步的优先级开启一次更新
  3. 更新后的value在commit阶段并不会像其他props一样作用于DOM
  4. 调用restoreStateOfTarget方法,比较DOM的实际value(即步骤1中的非受控value)与步骤3中更新的value,如果相同则退出,如果不同则用步骤3的value更新DOM

什么情况下这2个value会相同呢?

我们正常的受控组件就是相同的情况:

  1. function App() { 
  2.   const [num, updateNum] = React.useState(0); 
  3.    
  4.   const onChange = ({target: {value}}) => { 
  5.     updateNum(value); 
  6.   } 
  7.  
  8.   return ( 
  9.     <input value={num} onChange={onChange}/> 
  10.   ) 

什么情况下这2个value会不同呢?

上面的Demo中,虽然受控,但是没有调用updateNum更新value的情况:

  1. function App() { 
  2.   const num = 1; 
  3.  
  4.   return ( 
  5.     <input value={num}/> 
  6.   ) 

在这种情况下,步骤1的非受控value变为了12,步骤3的受控value还是1,所以最终会用1再更新下DOM的value。

总结
可以看到,要实现一个完备的前端框架,是有非常多细节的。

为了实现受控组件,就得脱离整体更新流程,单独实现一套流程。

责任编辑:姜华 来源: 魔术师卡颂
相关推荐

2021-03-18 08:00:55

组件Hooks React

2021-07-09 08:33:35

React组件受控

2022-07-06 08:29:12

antdInput 组件

2021-02-26 15:10:00

前端React组件交互

2021-07-15 07:23:25

React动画页面

2023-01-01 23:42:22

React框架暗黑模式

2019-10-08 11:10:18

React自动保存前端

2016-11-25 13:50:15

React组件SFC

2022-07-18 09:01:58

React函数组件Hooks

2022-05-13 08:48:50

React组件TypeScrip

2023-12-21 10:26:30

​​Prettier

2023-04-06 09:41:00

React 组件重渲染

2020-05-20 14:25:45

Reactreact.js前端

2020-12-20 10:02:17

ContextReactrender

2023-01-29 08:00:00

Instagram滤镜图片编辑

2021-09-26 18:43:48

表单受控React

2021-12-13 14:37:37

React组件前端

2019-07-22 10:42:11

React组件前端

2021-10-11 09:41:20

React位运算技巧前端

2021-03-31 08:01:24

React Portareactcss3
点赞
收藏

51CTO技术栈公众号