为什么在setTimeout中输入setState会破坏中文输入法？

Question

我在React中有一个简单的受控输入组件，我正试图理解这个行为。

如果我按正常方式操作，一切都会正常工作，中文输入法也能正常工作：

<input
  type="text"
  value={this.state.value}
  onChange={(event) => {
    this.setState({ value: event.target.value });
  }}
/>

但是如果我在外面包装了一个setTimeout或另一个setState，中文输入法就不能工作了，好像在每次setState的时候都被中断了？

# setTimeout
<input
  type="text"
  value={this.state.value}
  onChange={(event) => {
    const value = event.target.value;
    setTimeout(() => {
      this.setState({ value });
    }, 0);
  }}
/>

# another setState
<input
  type="text"
  value={this.state.value}
  onChange={(event) => {
    const value = event.target.value;
    this.setState({ isTyping: true }, () => {
      this.setState({ value });
    });
  }}
/>

我并不是在寻找正确的方法来让中文输入法发挥作用，我只是发现它非常有趣，并想知道是什么导致了这种行为。我有点理解每个setState操作都有一个"update循环“，但我不确定这会如何破坏中文输入法。这是否与事件循环有关，以及setTimeout如何将操作推到队列的后面？

非常感谢！

Answer 1

尝尝这个。不建议您在用户输入事件处理函数中执行setTimeout。不要使用设置状态的setTimeout

   handleChange = event = > {
         const value = event.target.value;
         this.setState({ value });
  }

   <input
     type="text"
     value={this.state.value}
   onChange={event => this.handleChange(event)}
  />

即使是0毫秒，setTimeout也会延迟设置用户输入。有关以0毫秒使用setTimeout的更多详细信息，请查看以下线程

Answer 2

 I checked your code amd I didn't found any issue on your code. 
 My react version is 16.6 and your code work fine on my machine.

import React from 'react';
class App extends React.Component {
   constructor(props) {
      super(props);
      this.state = {
          value: ''
      }
   }

   onClick() {
       this.setState({ showLazy: !this.state.showLazy });
   }

   render() {

    return (<div>
              <input
                type="text"
                value={this.state.value}
                onChange={(event) => {
                   const value = event.target.value;
                   this.setState({ isTyping: true }, () => {
                       this.setState({ value });
                   });
               }}
             />
            <input
               type="text"
               value={this.state.value}
               onChange={event => {
                     const value = event.target.value;
                     setTimeout(() => {
                        this.setState({ value })
                     }, 0);
              }}
           />
       </div>)
  }
}

导出默认AdvanceApp；