在react 中.js,将超时引用存储为实例变量(this.timeout)或状态变量(this.state.timeout)更好吗?

React.createClass({
     handleEnter: function () {
         // Open a new one after a delay
         var self = this;
         this.timeout = setTimeout(function () {
             self.openWidget();
         }, DELAY);
     },
     handleLeave: function () {
        // Clear the timeout f或 opening the widget
        clearTimeout(this.timeout); 
     }
    ...
})

React.createClass({
     handleEnter: function () {
         // Open a new one after a delay
         var self = this;
         this.state.timeout = setTimeout(function () {
             self.openWidget();
         }, DELAY);
     },
     handleLeave: function () {
        // Clear the timeout f或 opening the widget
        clearTimeout(this.state.timeout); 
     }
    ...
})

both of these approaches w或k. I just want to know the reasons f或 using one over the other.

推荐答案

我建议将其存储在实例上,但不要存储在其state中.每当state被更新时(按照注释中的建议,这只能由setState完成),React调用render并对真实DOM进行任何必要的更改.

因为值timeout对组件的渲染没有影响,所以它不应该存在于state中.把它放在那里会给render打不必要的电话.

Reactjs相关问答推荐

表格提交中的react 路由导航

sourceBuffer. appendBuffer成功,但h5视频播放器卡住了

如何创建react router v6的自定义子路由?

如何处理具有REACTION-REDUX状态的Nextjs路由警卫

如何使用皮金贴图在Reactjs中制作 map 上的点之间的线的动画?

用于获取带有事件处理程序的API的动态路由

React Todo List 应用程序我在实现删除功能时遇到问题

强制 useEffect 仅运行一次

React - 函数组件 - 点击两次问题处理

在 CrafterCMS Studio 中拖动字段

当我使用 Firebase Auth 在 React 中刷新主页时显示登录页面

如何覆盖自定义 MUI 手风琴的样式(分隔线和折叠图标)

将外部 JavaScript 导入 React(通过文件)

需要在窗口调整大小时更新 React 组件

下一次导出:未捕获的语法错误:标识符注册表已被声明

更新 Next.js 路由查询更改的状态会导致无限循环

如何将值从下拉列表传递到 select 上的输入?响应式JS

setState 改变对象引用

react 路由dom没有路由匹配位置错误/在路由中制作组件

链接的音译 Gatsby JS