reactjs - 为什么按钮点击触发与setTimeout()触发不同？-6ren

reactjs - 为什么按钮点击触发与setTimeout()触发不同？

转载作者：行者123 更新时间：2023-12-03 14:14:24

26

4

考虑以下几乎相同的两个片段。

区别在于:

第一个使用 setTimeout() 触发事件
第二个在单击按钮时触发事件

如果您检查控制台，您将看到代码段 1 中的最后两行是:

App rendering 1 folder(s)
Observed js

在代码片段 2 中是:

Observed js
App rendering 1 folder(s)

问题:为什么顺序颠倒了？

setTimeout() playground

Button playground

<小时/>

代码片段 1:setTimeout() 触发器

class App extends React.Component {
  constructor() {
    super();
    
    this.events$ = new Rx.Subject();
    this.eventsByName$ = this.events$.groupBy(e => e.name);
    
    this.state = {};
    
    setTimeout(() => {
      console.log('Emitting event');
      
      this.events$.next({
        type: 'ADD_FOLDER',
        name: 'js',
        permissions: 400
      });
    }, 1000);
  }
  
  componentDidMount() {
    this.eventsByName$.subscribe(folderEvents$ => {
      const folder = folderEvents$.key;
      
      console.log(`New stream for "${folder}" created`);

      folderEvents$.subscribe(e => {
        console.log(`Observed ${e.name}`);
      });
      
      this.setState({
        [folder]: folderEvents$
      });
    });
  }
  
  render() {
    const folders = Object.keys(this.state);
    
    console.log(`App rendering ${folders.length} folder(s)`);
    
    return (
      <div>
        {
          folders.map(folder => (
            <div key={folder}>
              {folder}
            </div>
          ))
        }
      </div>
    );
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('app')
);

<head>
  <script src="https://unpkg.com/rxjs@5.2.0/bundles/Rx.js"></script>
  <script src="https://unpkg.com/react@15.4.2/dist/react.js"></script>
  <script src="https://unpkg.com/react-dom@15.4.2/dist/react-dom.js"></script>
</head>
<body>
  <div id="app"></div>
</body>

代码片段 2:按钮触发

class App extends React.Component {
  constructor() {
    super();
    
    this.events$ = new Rx.Subject();
    this.eventsByName$ = this.events$.groupBy(e => e.name);
    
    this.state = {};
  }
  
  componentDidMount() {
    this.eventsByName$.subscribe(folderEvents$ => {
      const folder = folderEvents$.key;
      
      console.log(`New stream for "${folder}" created`);
      
      folderEvents$.subscribe(e => {
        console.log(`Observed ${e.name}`);
      });
      
      this.setState({
        [folder]: folderEvents$
      });
    });
  }
  
  onClick = () => {
    console.log('Emitting event');
    
    this.events$.next({
      type: 'ADD_FOLDER',
      name: 'js',
      permissions: 400
    });
  };
  
  render() {
    const folders = Object.keys(this.state);
    
    console.log(`App rendering ${folders.length} folder(s)`);
    
    return (
      <div>
        <button onClick={this.onClick}>
          Add event
        </button>
        <div>
          {
            folders.map(folder => (
              <div key={folder}>
                {folder}
              </div>
            ))
          }
        </div>
      </div>
    );
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('app')
);

<head>
  <script src="https://unpkg.com/rxjs@5.2.0/bundles/Rx.js"></script>
  <script src="https://unpkg.com/react@15.4.2/dist/react.js"></script>
  <script src="https://unpkg.com/react-dom@15.4.2/dist/react-dom.js"></script>
</head>
<body>
  <div id="app"></div>
</body>

最佳答案

它们以不同的顺序运行，因为 React 尝试将 setState() 调用一起批处理，因此调用 setState() 不会导致组件同步重新渲染，而是等待事件回调返回。

但是，只有当且仅当您对 setState 的调用是 React 驱动事件的结果(例如 onClick)时，它才会执行此操作。当您使用 setTimeout 时，React(当前)无法知道您何时完成，因此无法将它们批处理在一起。相反，它会立即同步重新渲染。

据我所知，React 文档只是间接提及了这种行为:

setState() does not immediately mutate this.state but creates a pending state transition. Accessing this.state after calling this method can potentially return the existing value.

There is no guarantee of synchronous operation of calls to setState and calls may be batched for performance gains.

https://facebook.github.io/react/docs/react-component.html#setstate

如果你想让 React 批量处理事情，你需要将回调代码包装在 ReactDOM.unstable_batchedUpdates 中，顾名思义，它不是一个稳定的 API，因此它可以(并且可能会)改变没有警告。

setTimeout(() => {
  ReactDOM.unstable_batchedUpdates(() => {
    console.log('Emitting event');

    this.events$.next({
      type: 'ADD_FOLDER',
      name: 'js',
      permissions: 400
    });
  });
}, 1000);

理想情况下，您的代码的结构方式与顺序无关。

关于reactjs - 为什么按钮点击触发与setTimeout()触发不同？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42659326/

26

4

0

文章推荐： django - manage.py runserver 可以执行 npm 脚本吗？

文章推荐： reactjs - react : Unexpected token return

文章推荐： reactjs - 显示时更改react-bootstrap OverlayTrigger Popover的内容

文章推荐： reactjs - 是否可以将对象作为变量传递到 graphQL 突变中？

jquery - 触发 ('click' ) 与触发 ('click' )[0]
这个问题已经有答案了: jQuery trigger click vs click ()? (3 个回答) 已关闭 5 年前。我无法区分 trigger('click')与 trigger('cli
asp.net - IHttpModule.BeginRequest 触发 2X，Application_BeginRequest 触发 1X
我正在运行 VS 2008 和 .NET 3.5 SP1。我想在 HttpModule 中实现命中跟踪在我的 ASP.NET 应用程序中。很简单，我想。然而，BeginRequest我的事件 Htt
mysql - 触发
这是一段代码，我收到以下错误 #1064 - You have an error in your SQL syntax; check the manual that corresponds to yo
javascript - 触发 'dummy'鼠标滚轮事件
有没有办法用任意增量触发滚轮事件。就像 jQuery 对“点击”所做的那样: $('#selector').trigger('click'); 我需要类似的东西，只需一个滚轮即可: $('#selec
sql - SQL-触发 “not in”
我正在尝试在配音数据库中触发时间。我想检查一下在不出现角色的电影配音中不能对角色进行配音。这是PDM: 和CDM 我是SQL的初学者，但我知道表“DUBBES”中应该有一些触发器。我试图做这样的事情，
jquery - 触发 .on() 创建的事件
这个问题已经有答案了: jquery programmatically click on new dom element (3 个回答) 已关闭 6 年前。我有一个 jQuery 事件定义如下: $
jquery - 子菜单点击事件不起作用/触发
主菜单的点击代码适用于类更改，但不适用于子菜单...当单击食物或鞋子等子菜单项时，它不会触发警报命令...事实上，悬停非常适合子菜单但不是活跃的 HTML
jquery - 触发()后未给出鼠标位置
问题非常简单: $('#btn1').click(function(event){ alert( "pageX: " + event.pageX + "\npa
java - 触发@Scheduled方法
我使用 Spring 的调度程序 (@EnableScheduling) 并具有以下 @Scheduled 方法，该方法每分钟调用一次: @Component public class Schedul
mysql - 触发，不插入
错误 SQL 查询:文档 CREATE TRIGGER `triggers_div` AFTER INSERT ON `produits` FOR EACH ROW BEGIN INSERT INTO
MySQL 触发 IF 条件
我想在插入另一个表时填充表中的一些列值，并为特定列设置条件。我使用触发器: CREATE TRIGGER inserttrigger AFTER INSERT ON table1 FOR EACH R
MySQL 触发 If 语句并与查询进行比较
我可以在 5.6 MySQL 环境中使用一些关于触发器的指导。我想创建一个触发器，如果发现具有相同速度的电脑的价格较低，则该触发器会停止更新。架构是产品(制造商、型号、类型)PC(型号、速度、内
postgresql - 触发，更新字段更新时间戳
背景:我们有一个 completed_flag，默认为 0，当有人完成调查时更新为 1。我想记录这次更新发生的时间戳在编写了这个触发器/函数以在标志从 0 触发到 1 时更新时间戳后，我怀疑我这样做
mysql - 多行插入时触发器不工作/触发
数据库中有两个表 KistStatus和 LastKistStatus .后者将保存 KistStatus 的所有“最新”值。 . KistStatus有大约 174.000 条记录，LastKist
iPhone - 触发 APNS
我正在开发一个使用 APNS 的 iPhone 应用程序。我很清楚实现 APNS、创 build 备 token 的过程，等等等等……我不知道如何通过 Web 服务从提供商端触发和启动 APNS。任何
页面加载时 JavaScript 触发
我有这个 javascript，当数量更改时会触发 update_cart... jQuery('div.woocommerce').on('change', '.qty', function
javascript - 单击事件未使用 ON 触发？
当我单击任何按钮时，click 事件不会被触发。艰难的是，我使用 $("div").on("click", "button", function () { 让它工作，但我想看到它使用 .class 工
Android:触发 onCreateOptionsMenu
如何在我的代码中触发 Android onCreateOptionsMenu 函数，即无需用户单击手机上的选项菜单按钮？最佳答案 Activity.openOptionsMenu(); 就可以了关
Android - 触发 adjustResize
我将表单包装在中然后我设置 list android:windowSoftInputMode="adjustResize" (默认 react native )。现在，当我用手指触摸事件手动聚焦一
Android TextWatcher 触发
我有一个 Android 编程问题。使用下面的代码我想验证一个字符串匹配。它验证正常，但 LogCat 显示 TextWatcher 方法在每次击键时触发两次，我不明白为什么。我希望每次击键只触发一次

首页

博学

6Ren·AI

商城