React硬编码值受控组件移动端快速输入丢失按键问题排查

我有一个值硬编码为空字符串的文本输入框，通过它的onChange事件在其他位置填充数据。该组件在桌面端（Windows）的Chrome、Firefox及移动端（Android）对应浏览器中基本正常，但移动端快速输入时会丢失部分按键：若快速输入两个字母，仅触发一次onChange事件。

复现问题的最简代码 #

import React, { ChangeEvent } from 'react';

const Test: React.FC = () => {
  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
    console.log(e.target.value);
  };
  return (
    <div>
      <input type='text' value='' onChange={handleChange} />
    </div>
  );
};

export default Test;

在桌面端同时按下两个按键时，控制台会打印两个按键对应的值；但在移动端操作时，仅会打印其中一个值。

对比组件（移动端无丢键问题但不符合需求） #

常规受控组件 #

import React, { ChangeEvent, useState } from 'react';

const Test: React.FC = () => {
  const [value, setValue] = useState('');
  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
    console.log(e.target.value);
    setValue(e.target.value);
  };
  return (
    <div>
      <input type='text' value={value} onChange={handleChange} />
    </div>
  );
};

export default Test;

监听变化的非受控组件 #

import React, { ChangeEvent } from 'react';

const Test: React.FC = () => {
  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
    console.log(e.target.value);
  };
  return (
    <div>
      <input type='text' onChange={handleChange} />
    </div>
  );
};

export default Test;

我想弄清React底层是什么机制，导致仅在移动端、仅针对硬编码值的组件、仅在快速输入时会吞掉一次onChange事件。

内容的提问来源于stack exchange，提问作者Stinvurger