React --放弃回调是一种糟糕的做法吗？

React是一个用于构建用户界面的JavaScript库。它采用了组件化的开发模式，使得开发者可以将界面拆分成独立的、可复用的组件，从而提高代码的可维护性和可重用性。

在React中，组件之间的通信可以通过回调函数来实现。回调函数是一种将函数作为参数传递给其他函数，并在特定事件发生时被调用的机制。在React中，父组件可以通过将回调函数作为props传递给子组件，从而实现子组件向父组件传递数据或触发特定事件的功能。

然而，过度依赖回调函数可能导致代码的可读性和可维护性下降。当组件层级较深或组件之间的通信较为复杂时，回调函数的传递会变得冗长且难以管理。此外，回调函数的传递也可能导致组件之间的紧耦合，使得代码难以扩展和重构。

为了解决这个问题，React引入了一种称为"状态提升"的模式。通过将共享的状态提升到它们的最近共同祖先组件中，可以避免回调函数的传递，并使得组件之间的通信更加简洁和直观。这种模式可以通过使用React的Context API或者状态管理库（如Redux）来实现。

总结起来，放弃回调函数并不一定是一种糟糕的做法，而是取决于具体的场景和需求。在简单的组件通信中，回调函数是一种简洁有效的方式。但在复杂的组件层级和通信需求中，采用状态提升或者使用状态管理库可能更加合适。

腾讯云相关产品和产品介绍链接地址：

腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
腾讯云云数据库MySQL版：https://cloud.tencent.com/product/cdb_mysql
腾讯云云原生容器服务（TKE）：https://cloud.tencent.com/product/tke
腾讯云人工智能平台（AI Lab）：https://cloud.tencent.com/product/ai
腾讯云物联网平台（IoT Hub）：https://cloud.tencent.com/product/iothub
腾讯云移动应用分析（MTA）：https://cloud.tencent.com/product/mta
腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
腾讯云区块链服务（BCS）：https://cloud.tencent.com/product/bcs
腾讯云虚拟现实（VR）：https://cloud.tencent.com/product/vr

相关·内容

国庆节前端技术栈充实计划（8）：我使用 AngularJS 和 ReactJS 的经验

我们使用 AJAX 请求从后端获取数据，使用 JavaScript 渲染新的 UI 元素然后将它插入到 DOM 中去，用户交互通过事件绑定和回调函数来实现。...我们遇到的第一个大挑战就曾让我们考虑是否应该放弃 React —— 我们陷入了回调迷宫。由于 React 的单向数据流性质，如果子组件需要更新父组件的状态，父组件就要传一个回调函数给它。...采用 Flux，我们就不用将状态保存在 root 组件中，然后将 update 回调一层层传递给它的子组件。...将框架定义的属性（或者，更恰当地说法是 directives）写入到 HTML 中的做法让我感觉很不爽。...还记得前面提到的 URL 替换和模板渲染问题吗？其实没关系，人们通常使用第三方的路由库(ui-router)它们比标准的 (ngRoute)要好用。最后，Angular 也没有我之前认为的那样糟糕。

1.4K3 0

【React】249-当我开始使用React 时，我希望我知道这些知识

弹出 React 项目就像打开正在运行的汽车的引擎盖，同时动态地更换引擎，使其运行速度提高1%。　　当然，如果你已经是一个 Webpack 高手，那么定制构建过程来定制项目的需求是值得的。　　...也就是说，了解不同的工具是件好事。如果你手上只有一把锤子，那么所有的东西看起来都像钉子　　你需要考虑使用的一些库的设置时间，并将其与之进行比较。...我要解决的问题是什么这个项目能长久地受益于这个库吗 React是否已经提供了一些现成的东西　　现在可以使用 React 的 Context 和 Hook，你还需要Redux吗？　　...当你的用户处于糟糕的互联网连接环境时，我强烈建议使用 Redux Offline。...：使用 setState 回调函数 toggleFilter = () => { this.setState((prevState) => ({ isFiltered: !

7891 0

useEffect 怎么支持 async...await

竟然 useEffect 的回调函数不能使用 async...await，那我直接在它内部使用。做法一：创建一个异步函数（async...await 的方式），然后执行该函数。...思路跟上面一样，入参跟 useEffect 一样，一个回调函数（不过这个回调函数支持异步），另外一个依赖项 deps。内部还是 useEffect，将异步的逻辑放入到它的回调函数里面。...issue[2] 中有讨论，上面有个大神的说法我表示很赞同：他认为这种延迟清除机制是不对的，应该是一种取消机制。...总结与思考由于 useEffect 是在函数式组件中承担执行副作用操作的职责，它的返回值的执行操作应该是可以预期的，而不能是一个异步函数，所以不支持回调函数 async...await 的写法。...[7] 参考 React useEffect 不支持 async function 你知道吗？

1.4K2 0

当我开始使用React 时，我希望我知道这些知识

当然，如果你已经是一个 Webpack 高手，那么定制构建过程来定制项目的需求是值得的。当你想按时完成任务时，把精力集中在它能推动你前进的地方。...也就是说，了解不同的工具是件好事。如果你手上只有一把锤子，那么所有的东西看起来都像钉子你需要考虑使用的一些库的设置时间，并将其与之进行比较。...我要解决的问题是什么这个项目能长久地受益于这个库吗 React是否已经提供了一些现成的东西现在可以使用 React 的 Context 和 Hook，你还需要Redux吗？...当你的用户处于糟糕的互联网连接环境时，我强烈建议使用 Redux Offline。...：使用 setState 回调函数 toggleFilter = () => { this.setState((prevState) => ({ isFiltered: !

9323 0

精读《React 18》

f); // 仅触发一次渲染 } 但可惜的是，React 18 以前，如果在回调函数的异步调用中执行 setState，由于丢失了上下文，无法做合并处理，所以每次 setState 调用都会立即触发一次重渲染...简单来说，Concurrent Mode 就是一种可中断渲染的设计架构。什么时候中断渲染呢？当一个更高优先级渲染到来时，通过放弃当前的渲染，立即执行更高优先级的渲染，换来视觉上更快的响应速度。...这句话是对的，但实际上用户对页面交互及时性的感知是分为两种的，第一种是即时输入反馈，第二种是这个输入带来的副作用反馈，比如更新列表。...比如 onClick 就一定是用户鼠标点击产生的吗？不一定，可能是 xxx.onClick 主动触发的，而非用户触发。用户触发的就一定是紧急中断吗？...hydration 的过程也是逐步的，这样不会导致一下执行所有完整的 js 导致页面卡顿（hydration 其实就是 React 里写的回调注册、各类 Hooks，整个应用的量非常庞大）。

1.5K3 0

解密传统组件间通信与React组件间通信

在React中最小的逻辑单元是组件，组件之间如果有耦合关系就会进行通信，本文将会介绍React中的组件通信的不同方式通过归纳范，可以将任在React中最小的逻辑单元是组件，组件之间如果有耦合关系就会进行通信...，一种是回调函数，另一种是为子组件部署消息接口先来看回调函数的例子，回调函数的优点是非常简单，缺点就是必须在初始化的时候传入，并且不可撤回，并且只能传入一个函数 class Child { constructor...{ console.log('child update') }); } } Backbone.js就同时支持回调函数和消息接口方式，但React中选择了比较简单的回调函数模式...，一种是回调函数，另一种是为子组件部署消息接口先来看回调函数的例子，回调函数的优点是非常简单，缺点就是必须在初始化的时候传入，并且不可撤回，并且只能传入一个函数 class Child { constructor...{ console.log('child update') }); } } Backbone.js就同时支持回调函数和消息接口方式，但React中选择了比较简单的回调函数模式

1.5K1 0

经验 | Web开发野蛮生长的这17年

编程是一种概念、一种思想。就比如，当你在用 JavaScript 写实例的时候，可以尝试一下 Scala 函数式编程的一些东西。...网站真的需要 React、需要同构 JavaScript 吗？好吧，那我们就重构代码，但是网站真的需要 React、需要同构 JavaScript 吗？我知道，这些技术都很酷，我们也想用。...尝试一次加载，减轻代码，然后在需要的地方将它传递过去。因为回调函数的存在，所以在 Node 里事情就显得有些复杂。然后，我们说说回调函数。...创建能够处理函数返回值的函数是个好的选择，回调函数就是这样的存在。是不是有点说不通？...你创建了一个函数来读取数据库中的某些数据，然后调用回调函数，处理返回的数据库结果，这里最好创建一个能够处理不同返回值的回调，而不要一次一次的创建。

2041 0

前端几个常见考察点整理

Portals 提供了一种很好的将子节点渲染到父组件以外的 DOM 节点的方式。第一个参数（child）是任何可渲染的 React 子元素，例如一个元素，字符串或碎片。...参考：前端react面试题详细解答除了在构造函数中绑定 this，还有其它方式吗你可以使用属性初始值设定项(property initializers)来正确绑定回调，create-react-app...在回调中你可以使用箭头函数，但问题是每次组件渲染时都会创建一个新的回调。React 中 keys 的作用是什么？Keys 是 React 用于追踪哪些列表中元素被修改、被添加或者被移除的辅助标识。...当系统变得错综复杂的时候，想重现问题或者添加新功能就会变得举步维艰。如果这还不够糟糕，考虑一些来自前端开发领域的新需求，如更新调优、服务端渲染、路由跳转前请求数据等等。...16中新生命周期有哪些关于 React16 开始应用的新生命周期：可以看出，React16 自上而下地对生命周期做了另一种维度的解读：Render 阶段：用于计算一些必要的状态信息。

1.3K5 0

滴滴前端常考react面试题（附答案）

Hooks可以取代 render props 和高阶组件吗？通常，render props和高阶组件仅渲染一个子组件。React团队认为，Hooks 是服务此用例的更简单方法。...当系统变得错综复杂的时候，想重现问题或者添加新功能就会变得举步维艰。如果这还不够糟糕，考虑一些来自前端开发领域的新需求，如更新调优、服务端渲染、路由跳转前请求数据等等。...何时使用 refs 的好的示例有管理焦点/文本选择，触发命令动画，或者和第三方 DOM 库集成。你应该避免使用 String 类型的 Refs 和内联的 ref 回调。...Refs 回调是 React 所推荐的。在React中怎么使用async/await？async/await是ES7标准中的新特性。如果是使用React官方的脚手架创建的项目，就可以直接使用。...可以使用TypeScript写React应用吗？怎么操作？

2.3K1 0

useTransition真的无所不能吗？🤔

「触发状态更新通常是异步」的：我们会在各种回调函数中异步触发它，以响应用户交互。...❝“后台”是一种数据的抽象：有几点需要说明由于JavaScript是单线程的。在繁忙的“后台”任务执行过程中，React将定期检查主队列。如果队列中出现新的任务，它将优先于“后台”工作。...（这种消息通知是利用MessageChannel，关于这点可以参考我们之前的文章React 并发原理）在后台渲染的是一种叫做Fiber的数据结构（关于这点可以参考我们之前的文章React_Fiber机制...具体的解决方法吗，我们优先考虑「下放State」和「内容提升」，在最后万不得已的情况才会考虑React.memo。...回调被防抖处理，因此setValueDebounced只在我们停止在输入框中输入后的300毫秒后触发。

3801 0

react冷门小知识

目的是提高性能，减少创建不必要的对象。当调用事件回调函数之后，合成对象上的所有属性重置为null，但是合成事件对象依旧存在。...因此，写React事件回调函数的时候不能将 event 用于异步操作 —— 当异步操作真正执行的时候，SyntheticEvent对象有可能已经被重置了。...缺点：放弃了SyntheticEvent事件复用能力，不推荐缓存所需的event属性值缺点：代码略啰嗦。...（此知识点React和Vue通用）渲染列表时，大家都知道要加key值，为什么呢？为了配合diff算法做性能优化呀？那么如果是纯文字改动呢？...但是，我们仅仅更新个textContent，需要这么大动作吗？那就不要指定key好了，React（或者Vue）会复用原DOM节点，只做textContent更新而已，性能明显更好。

4602 0

【React总结（二）】使用 Render props 复用代码

，他不处理具体的业务逻辑，他就专注于计算加法的和运算，至于输出结果怎么处理，那是具体的逻辑决定的，sum 工具函数第三个参数的位置是一个 callback，把函数计算后的返回值，回调给业务逻辑，让业务逻辑使用...是指一种在 React 组件之间使用一个值为函数的 prop 在 React 组件间共享代码的简单技术。官方文档说的非常的晦涩。...其实说白了，就是在父组件有个 render 的属性，然后 render 属性你可以理解为一个回调函数，父组件通过调用 render 方法，把父组件里面的数据（一般是 state ）带出来让业务组件使用，...然后，这个回调函数返回一个 React 的 element，然后渲染在父组件里面。...这里推荐一个写得比较全面的库 react-powerplug 其实 render props 是一种设计模式，除了把写 render 以外，也可以写成任意你喜欢的名字，另外通过 props children

1.7K12 0

【JS】666- window.reqeustIdleCallback方法详解

，如果时间消耗还没超过16ms，则浏览器还有余力去处理其他的任务，我们在 reqeustIdleCallback 中传入的回调将在此时执行；相反，如果时间消耗太大，则回调不执行，任务会顺延到下个帧浏览器空闲的时候再执行...即收集两次执行回调的间隔以判断有无消耗时间较长的任务阻塞线程。...最长执行时间如果 requestIdleCallback 的执行阻塞线程太久，就可能发生卡顿了，每一帧中requestIdleCallback 回调的最长的执行时间是50ms（这是建议的，但是你也可以做坏事...），即回调中deadline.timeRemaining()的最大值小于50，这个阈值是RAIL模型定义的。...推荐的做法是创建一个documentFragment保存对dom的修改，并注册requestAnimationFrame来应用这些修改。

1.9K2 1

React数据流和组件间的通信总结

，一般情况是： * 父组件更新组件状态 -----props----->　子组件更新另一种情况是： * 子组件更新父组件状态 -----需要父组件传递回调函数-----> 子组件调用触发...父组件通过props传递一个回调函数到子组件中，这个回调函数可以更新父组件，子组件就是　　　通过触发这个回调函数，从而使父组件得到更新。...（类似于一种取巧的做法）这里贴出子组件更新父组件代码： ?...在这个例子中，refreshBox是父组件创建的一个回调函数，将其传入Son组件中，然后通过Son组件进行调用触发，进而改变state，实现子组件对父组件的更新。...这里有两种实现方式：方式一：　　按照React单向数据流方式，我们需要借助父组件进行传递，通过父组件回调函数改变兄弟组件的props。

1.7K7 0

吐槽一下 Vue3 的语法设计

因为有的属性呢，他是自定义指令，是不应该往下传的，但是有的指令呢，又需要往下传例如事件回调 Greet 这个时候我们在学习的时候... Oh no 一种是函数类型的参数，多为事件回调函数一种是数据绑定类型的，...不一致的表现让我觉得非常难受。然后另外一个让我觉得非常难受的语法设计就是对于事件回调函数的处理。例如我想要通过 @click 传递一个回调函数到子组件，但是这个时候，子组件怎么接收这个回调函数呢？...因为很多东西是不得不这么处理，否则能力上就会存在问题。所以很多人在说，React 为什么不拥抱 Signal，难道你真的认为，拥抱了 Signal，就不会做出任何牺牲吗？全是正向收益？别做梦了！...但是在语法层面，React 依然是逻辑最自恰的。

1171 0

字节前端二面react面试题（边面边更）_2023-03-13

">}子组件向父组件通信：: props+回调的方式。...它是必须的吗？...当系统变得错综复杂的时候，想重现问题或者添加新功能就会变得举步维艰。如果这还不够糟糕，考虑一些来自前端开发领域的新需求，如更新调优、服务端渲染、路由跳转前请求数据等等。...但不论是 componentWilReceiveProps 还是 componentWilUpdate，都有可能在一次更新中被调用多次，也就是说写在这里的回调函数也有可能会被调用多次，这显然是不可取的...中的回调迁移至 componentDidUpdate 就可以解决这个问题。

1.8K1 0

React事件杂记及源码分析

前提最近通过阅读React官方文档的事件模块，发现了其主要提到了以下三个点调用方法时需要手动绑定this React事件是一种合成事件SyntheticEvent，什么是合成事件？ ...React事件是一种合成事件SyntheticEvent，什么是合成事件？...最后触发事件的回调函数时，在原生的DOM会传入一个事件属性event，但是因为React将所有事件委托给document处理，那么这个event就和我们想要的不一样，如target指向的是document...，于是React就有了自己的一个合成事件，通过一个叫SyntheticEvent的基类来生成所需要的事件属性，并传入回调函数作为方法。...继续往下走，最后执行的函数是invokeGuardedCallbackDev，该函数通过注册一个自定义的元素和自定义的事件，并触发它来达到执行回调函数的功能 ?

7252 0

React 18不再依赖Concurrent Mode开启并发更新了

，所以当前市面上所有React版本一定属于如下一种情况：老架构（v15及之前版本）新架构，未开启并发更新，与情况1行为一致（v16、v17默认属于这种情况）新架构，未开启并发更新，但是启用了一些新功能...具体做法是提供三种开发模式： Legacy模式，通过ReactDOM.render(, rootNode)创建的应用遵循该模式。...count + 1); }); }; return {count}; }; 由于updateCount在startTransition的回调函数中执行...如果updateCount没有作为startTransition的回调函数执行，那么updateCount将触发默认的同步更新。...React18稳定版最快明年一月底到来，你还学的动吗？参考资料 [1]What happened to concurrent mode?

1.2K2 0

年前端react面试打怪升级之路

当系统变得错综复杂的时候，想重现问题或者添加新功能就会变得举步维艰。如果这还不够糟糕，考虑一些来自前端开发领域的新需求，如更新调优、服务端渲染、路由跳转前请求数据等。...，该状态会和当前的state合并callback，可选参数，回调函数。...setState是React事件处理函数中和请求回调函数中触发UI更新的主要方法。...但不论是 componentWilReceiveProps 还是 componentWilUpdate，都有可能在一次更新中被调用多次，也就是说写在这里的回调函数也有可能会被调用多次，这显然是不可取的...中的回调迁移至 componentDidUpdate 就可以解决这个问题。

2.2K1 0

react面试题总结一波，以备不时之需

React组件的构造函数有什么作用？它是必须的吗？..., 为了性能等考虑, 尽量在constructor中绑定事件除了在构造函数中绑定 this，还有其它方式吗你可以使用属性初始值设定项(property initializers)来正确绑定回调，create-react-app...在回调中你可以使用箭头函数，但问题是每次组件渲染时都会创建一个新的回调。什么原因会促使你脱离 create-react-app 的依赖当你想去配置 webpack 或 babel presets。...props 的⽅式，向⼦组件进⾏通讯⼦组件向⽗组件通讯: props+回调的⽅式，⽗组件向⼦组件传递props进⾏通讯，此props为作⽤域为⽗组件⾃身的函数，⼦组件调⽤该函数，将⼦组件想要传递的信息...Home // Home是一种特殊类型的当它的 to属性与当前地址匹配时，可以将其定义为"活跃的"。

6603 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云