开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

使用React的钩子useReducer，状态不是“单一的真理来源”吗？App或同级如何获取其他组件的状态？

使用React的钩子useReducer，状态不是“单一的真理来源”。 useReducer是React提供的一种状态管理工具，它可以帮助我们在组件中管理复杂的状态逻辑。与useState相比，useReducer更适用于处理多个相关状态的情况。

在React中，状态应该被视为组件的私有数据，每个组件应该只关心自己的状态。这种单一的真理来源的原则是为了保持组件的独立性和可维护性。因此，一个组件应该只能访问和修改自己的状态，而不能直接获取其他组件的状态。

然而，有时候我们需要在组件之间共享状态或者获取其他组件的状态。这时可以通过props将状态传递给子组件，或者使用React的上下文（Context）来实现跨组件的状态共享。另外，还可以使用全局状态管理工具，如Redux或MobX来管理应用的全局状态。

对于App或同级如何获取其他组件的状态，可以通过以下几种方式实现：

使用props传递状态：将需要共享的状态作为props传递给子组件，子组件可以通过props获取并使用该状态。
使用React的上下文（Context）：通过创建上下文对象，将需要共享的状态放在上下文中，然后在需要获取状态的组件中使用上下文提供的Consumer组件来获取状态。
使用全局状态管理工具：如Redux或MobX，将需要共享的状态存储在全局的状态管理器中，然后在任何组件中都可以通过订阅状态来获取并使用该状态。

需要注意的是，为了保持组件的独立性和可维护性，尽量避免在组件之间直接共享状态，而是通过props传递数据或使用上下文或全局状态管理工具来实现状态共享。这样可以更好地管理和控制状态的变化，减少组件之间的耦合性。

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

腾讯云官网：https://cloud.tencent.com/
云服务器（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
移动开发平台MPS：https://cloud.tencent.com/product/mps
对象存储COS：https://cloud.tencent.com/product/cos
区块链服务BCS：https://cloud.tencent.com/product/bcs
腾讯元宇宙：https://www.tencent.com/zh-cn/industries/technology/2021/metaverse.html

相关搜索:React JS:如何在自定义钩子中使用观察者获取MobX商店的状态？使用id或其他属性而不是名称的React复选框状态使用React，同级组件如何才能最好地共享状态？是否应该有一种遍历DOM树的方法...？使用自定义钩子获取数据时，无法在未装载的组件上执行React状态更新使用钩子和状态在react中的不同组件中更改时，如何重新呈现表单值和状态值如何使用react钩子在卸载时整理功能组件(在整理过程中使用状态中的值)如何在REACTJS中使用钩子从一个组件到另一个组件的不同url中获取状态？如何在使用useReducer时在react js中优化，循环传递给子组件的状态当使用React Context API的其他组件更改状态时，如何防止自动呈现？iot hub

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

React useReducer 终极使用教程

本文完整版：《React useReducer 终极使用教程》 useReducer 是在 react V 16.8 推出的钩子函数，从用法层面来说是可以代替useState。...强大的 React 团队难道就不能自己实现一个全局的状态管理的 hook 吗，这不，useReducer 为了解决这个需求应运而生。...但是呢，这两个钩子useReducer 和 useState还是有不同的，在用useReducer的时候，可以避免通过组件的不同级别传递回调。...接下来我们来看这两种钩子函数：useState 和 useReducer 是如何声明和使用的。...当你的应用需要单一的来源时当前端的应用通过接口获取数据，且这个数据源就是从这个接口获取的，这个时候使用Redux 可以更方便的管理我们的state，就像是写一个todo/undo demo，直接可以使用

3.6K1 0

用动画和实战打开 React Hooks（三）：useReducer 和 useContext

然后在 Counter 组件中，我们通过 useReducer 钩子获取到了状态和 dispatch 函数，然后把这个状态渲染出来。...简简单单一个 useState 不就搞定了吗？什么时候该用 useReducer 你也许发现，useReducer 和 useState 的使用目的几乎是一样的：定义状态和修改状态的逻辑。...useReducer 使用起来较为繁琐，但如果你的状态管理出现了至少一个以下所列举的问题：需要维护的状态本身比较复杂，多个状态之间相互依赖修改状态的过程比较复杂那么我们就强烈建议你使用 useReducer...useContext 使用浅析现在状态的获取和修改都已经通过 useReducer 搞定了，那么只差一个问题：怎么让所有组件都能获取到 dispatch 函数呢？...在类组件中，我们可以通过 Class.contextType 属性获取到最近的 Context Provider，那么在函数式组件中，我们该怎么获取呢？答案就是 useContext 钩子。

1.5K3 0

社招前端二面必会react面试题及答案_2023-05-19

再对高阶组件进行一个小小的总结：高阶组件不是组件，是一个把某个组件转换成另一个组件的函数高阶组件的主要作用是代码复用高阶组件是装饰器模式在 React 中的实现封装组件的原则封装原则1、单一原则...中使用useState，React 会报错提示；类组件不会被替换或废弃，不需要强制改造类组件，两种方式能并存；重要钩子状态钩子 (useState): 用于定义组件的 State，其到类定义中this.state...:useContext: 获取 context 对象useReducer: 类似于 Redux 思想的实现，但其并不足以替代 Redux，可以理解成一个组件内部的 redux:并不是持久化存储，会随着组件被销毁而销毁...尽管不建议在app中使用context，但是独有组件而言，由于影响范围小于app，如果可以做到高内聚，不破坏组件树之间的依赖关系，可以考虑使用context对于组件之间的数据通信或者状态管理，有效使用props...展示专门通过 props 接受数据和回调，并且几乎不会有自身的状态，但当展示组件拥有自身的状态时，通常也只关心 UI 状态而不是数据的状态。容器组件则更关心组件是如何运作的。

1.4K1 0

React Hooks

如果有多个操作，每个操作应该写成一个单独的函数。而且，数据的状态应该与操作方法分离。根据这种理念，React 的函数组件只应该做一件事情：返回组件的 HTML 代码，而没有其他的功能。...React 团队希望，组件不要变成复杂的容器，最好只是数据流的管道。开发者根据需要，组合管道即可。组件的最佳写法应该是函数，而不是类。副作用是什么？...纯函数内部只有通过间接的手段（即通过其他函数调用），才能包含副作用。二、React Hooks Hook（钩子）是 React 函数组件的副作用解决方案，用来为函数组件引入副作用。...下面是 React 默认提供的四个最常用的钩子： useState() useContext() useReducer() useEffect() 1、useState()：状态钩子 ---- useState...3、useReducer()：action 钩子 ---- React 本身不提供状态管理功能，通常需要使用外部库。这方面最常用的库是 Redux。

2.1K1 0

React常见面试题

不过是更新的问题，在新版的APP中得以解决只要你能确保 context是可控的，合理使用，可以给react组件开发带来强大体验 # render函数中return如果没用使用()会用什么问题吗？...容器组件：拥有自己的状态，生命周期 UI组件：只负责页面UI渲染，不具备任何逻辑，功能单一，通常是无状态组件，没有自己的state,生命周期。 # react生命周期？...在无需修改组件结构的情况下复用状态逻辑；优势：简洁：react hooks解决了hoc和render props的嵌套问题，更加简洁（在不使用class的情况下，使用state及react其他特性...等生命周期钩子的功能 useContext ：共享钩子，在组件之间共享状态，可以解决react逐层通过props传递数据；额外的Hook: useReducer: action钩子，提供了状态管理，其基本原理是通过用户在页面上发起的...共享状态钩子，在组件之间共享状态，可以解决react 逐层通过props传递数据的问题使用流程（使用流程和react-redux差不多）：创建store：通过 createContext Api 包裹整个组件

4.1K2 0

react hooks api

Hooks的出现是为了解决 React 长久以来存在的一些问题： •带组件状态的逻辑很难重用：为了解决这个问题，需要引入render props或higher-order components这样的设计模式...2、函数组件 React 团队希望，组件不要变成复杂的容器，最好只是数据流的管道。开发者根据需要，组合管道即可。组件的最佳写法应该是函数，而不是类。 React 早就支持函数组件，下面就是一个例子。...React Hooks 的意思是，组件尽量写成纯函数，如果需要外部功能和副作用，就用钩子把外部代码"钩"进来。React Hooks 就是那些钩子。你需要什么功能，就使用什么钩子。... 根据react的哲学，所有的状态应该从顶层传入——使用hooks也不例外，第一步就是使用 React...()：action 钩子 React 本身不提供状态管理功能，通常需要使用外部库。

2.7K1 0

「前端架构」使用React进行应用程序状态管理

将所有应用程序状态都放在一个对象中也会导致其他问题，即使您没有使用Redux。当一个反应获取一个新值，使用该值的所有组件都将更新并必须呈现，即使它是只关心部分数据的函数组件。...钩子只是让事情变得简单一点（特别是我们马上要讨论的上下文）。...如何将数据导入每个提供程序取决于这些提供程序使用的钩子以及如何在应用程序中检索数据，但您知道从何处开始查找（在提供程序中）如何工作。...当然，您可以使用自己的useState或useReducer在这里和那里使用正确的useContext来管理它。...结论同样，这是你可以用类组件来做的事情（你不必使用钩子）。钩子使这变得容易得多，但是您可以用React 15来实现这一理念。尽可能保持状态的本地性，并且只有在支柱钻井成为问题时才使用上下文。

2.9K3 0

【译】3条简单的React状态管理规则

React组件内部的状态是在渲染之间保持不变的封装数据。useState()是React钩子，负责管理功能组件内部的状态。我喜欢useState()确实使状态处理变得非常容易。...但是我经常遇到类似的问题：我应该将组件的状态划分为小状态，还是保持复合状态？如果状态管理变得复杂，我应该从组件中提取它吗？怎么做？...不必担心调用多个useState()为每个关注点创建状态变量。但是请注意，如果您过多使用useState()变量，则很有可能您的组件违反了“单一职责原则”。只需将此类组件拆分为较小的组件即可。...2.提取复杂的状态逻辑将复杂的状态逻辑提取到自定义钩子中。将复杂的状态操作保留在组件中是否有意义? 创建React Hook是为了将组件从复杂的状态管理和副作用中隔离出来。...在addNewProduct()中，使用一个Set对象来保持产品名称的唯一性。组件应该关注这个实现细节吗？不。最好将复杂的状态设置器逻辑隔离到自定义Hook中。

2.1K4 0

(译) 如何使用 React hooks 获取 api 接口数据

原文地址：robinwieruch 全文使用意译，不是重要的我就没有翻译了在本教程中，我想向你展示如何使用 state 和 effect 钩子在React中获取数据。...如果你想查看完整的如何使用 React Hooks 获取数据的项目代码，可以查看 github 的仓库如果你只是想用 React Hooks 进行数据的获取，直接 npm i use-data-api...它将引导您完成使用React类组件的数据获取，如何使用Render Prop 组件和高阶组件来复用这些数据，以及它如何处理错误以及 loading 的。...但是，如果你对错误处理、loading、如何触发从表单中获取数据或者如何实现可重用的数据获取的钩子。请继续阅读。如何自动或者手动的触发 hook？...，组件加载的时候就要触发搜索，类似的查询和搜索状态易造成混淆，为什么不把实际的 URL 设置为状态而不是搜索状态呢？

28.5K2 0

如何在 React 应用中使用 Hooks、Redux 等管理状态

目录 React 中的状态是什么如何使用 useState hook 如何使用 useEffect 读取状态更新如何传递一个回调给状态更新函数管理规模和复杂性 React context 如何使用...如何使用 useState hook 为了在我们的组件中实现状态，React 为我们提供了一个名为 useState 的钩子（hook）。让我们看看它是如何与以下示例一起工作的。...如果在我们的父组件（存储状态）和子组件（使用状态）之间还有其他组件（“中间组件”），我们也需要通过这些中间组件传递 prop，即使它们并不需要 prop。...解决这个问题的一种方法是使用 React context，简单来说，这是一种创建包装组件的方法，该组件包装我们那些想要并且可以直接传递 props 的组件组，而且无需 “drill” 通过那些不是必须使用该状态的组件...这里要提到的重要一点是，这些管理状态的工具或方法并不是相互排斥的，它们可以而且可能应该同时使用，并各自解决它们所擅长的具体问题。

8.5K2 0

美团前端一面必会react面试题4

而不是为每个状态更新编写一个事件处理程序。React官方的解释：要编写一个非受控组件，而不是为每个状态更新都编写数据处理函数，你可以使用 ref来从 DOM 节点中获取表单数据。...如何避免重复发起ajax获取数据？数据放在redux里面在使用 React Router时，如何获取当前页面的路由或浏览器中地址栏中的地址？...尽管不建议在app中使用context，但是独有组件而言，由于影响范围小于app，如果可以做到高内聚，不破坏组件树之间的依赖关系，可以考虑使用context对于组件之间的数据通信或者状态管理，有效使用props...中使用useState，React 会报错提示；类组件不会被替换或废弃，不需要强制改造类组件，两种方式能并存；重要钩子状态钩子 (useState): 用于定义组件的 State，其到类定义中this.state...:useContext: 获取 context 对象useReducer: 类似于 Redux 思想的实现，但其并不足以替代 Redux，可以理解成一个组件内部的 redux:并不是持久化存储，会随着组件被销毁而销毁

3K3 0

腾讯前端经典react面试题汇总

中使用useState，React 会报错提示；类组件不会被替换或废弃，不需要强制改造类组件，两种方式能并存；重要钩子状态钩子 (useState): 用于定义组件的 State，其到类定义中this.state...:useContext: 获取 context 对象useReducer: 类似于 Redux 思想的实现，但其并不足以替代 Redux，可以理解成一个组件内部的 redux:并不是持久化存储，会随着组件被销毁而销毁...在 React中组件是一个函数或一个类，它可以接受输入并返回一个元素。注意：工作中，为了提高开发效率，通常使用JSX语法表示 React元素（虚拟DOM）。...react旧版生命周期函数初始化阶段getDefaultProps:获取实例的默认属性getInitialState:获取每个实例的初始化状态componentWillMount：组件即将被装载、渲染到页面上...它是一个回调函数，当 setState方法执行结束并重新渲染该组件时调用它。在工作中，更好的方式是使用 React组件生命周期之——“存在期”的生命周期方法，而不是依赖这个回调函数。

2.1K2 0

useTypescript-React Hooks和TypeScript完全指南

引言 React v16.8 引入了 Hooks，它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。...const MyComponent: React.FC = ... 无状态组件也称为傻瓜组件，如果一个组件内部没有自身的 state，那么组件就可以称为无状态组件。...React 一直都提倡使用函数组件，但是有时候需要使用 state 或者其他一些功能时，只能使用类组件，因为函数组件没有实例，没有生命周期函数，只有类组件才有。...Hooks 是 React 16.8 新增的特性，它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。默认情况下，React 包含 10 个钩子。...当你需要从元素中提取值或获取与 DOM 相关的元素信息（例如其滚动位置）时，可以使用此方法。

8.5K3 0

React Hook技术实战篇

Hook在中文的意思是钩子, 而在react也是充当这个角色, Hook是服务于函数组件的方法, Hook提供了各种API, 如State Hook提供类型setState的功能, Effect Hook...); App组件是一个表格展示组件, 状态和状态的更新通过Hook中的useState....应该如何避免, 并且做到在组件安装时获取数据. import React, { useState, useEffect } from 'react'; import { Form, Input, Table...而使用自定义Hook的好处, 就说组件本身不需要对于Hook有太多的了解, 只需要获取一个组件所需要的变量就可以....Reducer Hook 到目前为止，我们已经使用各种状态挂钩来管理数据，加载状态的数据获取状态。然而，所有这些状态，由他们自己的状态钩子管理，属于一起，因为他们关心相同的数据。

4.3K8 0

3 个 React 状态管理的规则

React 组件内部的状态是在渲染过程之间保持不变的封装数据。useState() 是 React hook，负责管理功能组件内部的状态。...我喜欢 useState() ，它确实使状态处理变得非常容易。但是我经常遇到类似的问题：我应该将组件的状态划分为小状态，还是保持复合状态？如果状态管理变得复杂，我应该从组件中提取它吗？该怎么做？...不必担心调用多个 useState() 为每个关注点创建状态变量。但是请注意，如果你使用过多的 useState() 变量，则你的组件很有可能就违反了“单一职责原则”。...创建 React hook 是为了将组件与复杂状态管理和副作用隔离开。因此，由于组件只应关注要渲染的元素和要附加的某些事件侦听器，所以应该把复杂的状态逻辑提取到自定义 hook 中。...同样，如果状态需要多个操作，请用 reducer 合并这些操作。无论你使用什么规则，状态都应该尽可能地简单和分离。组件不应被状态更新的细节所困扰：它们应该是自定义 hook 或化简器的一部分。

1.7K0 0

面试官最喜欢问的几个react相关问题

除了在构造函数中绑定 this，还有其它方式吗你可以使用属性初始值设定项(property initializers)来正确绑定回调，create-react-app 也是默认支持的。...它具有以下特点:异步与同步: setState并不是单纯的异步或同步，这其实与调用时的环境相关:在合成事件和生命周期钩子 (除 componentDidUpdate) 中，setState是"异步...中使用useState，React 会报错提示；类组件不会被替换或废弃，不需要强制改造类组件，两种方式能并存；重要钩子状态钩子 (useState): 用于定义组件的 State，其到类定义中this.state...:useContext: 获取 context 对象useReducer: 类似于 Redux 思想的实现，但其并不足以替代 Redux，可以理解成一个组件内部的 redux:并不是持久化存储，会随着组件被销毁而销毁...表单如何呈现由表单元素自身决定。如下所示，表单的值并没有存储在组件的状态中，而是存储在表单元素中，当要修改表单数据时，直接输入表单即可。有时也可以获取元素，再手动修改它的值。

4K2 0

React Hooks

一、新增钩子函数 1. useState() 状态钩子 2. useContext() 共享状态钩子 const AppContext = React.createContext({}) <AppContext.Provider...state, count: state.count + 1 } default: return state } } const App... class组件中的 componentDidMount、componentUpdate和componentWillUnmount生命周期 5. useLayoutEffect() 同步的useEffect..., 优先于useEffect执行 6. useMome()、useCallback() 优化组件渲染问题，或监听子组件状态变化来处理事件 useMome(() => fn, deps) useCallback...name]) return ( {changedName} ) } 7. useRef() 获取元素

5934 0

React-hooks面试考察知识点汇总

Hook 简介Hook出世之前React存在的问题在组件之间复用状态逻辑很难 React 没有提供将可复用性行为“附加”到组件的途径（例如，把组件连接到 store）。...Hook 将组件中相互关联的部分拆分成更小的函数（比如设置订阅或请求数据），而并非强制按照生命周期划分。你还可以使用 reducer 来管理组件的内部状态，使其更加可预测。...useEffect我们写的有状态组件，通常会产生很多的副作用（side effect），比如发起ajax请求获取数据，添加一些监听的注册和取消注册，手动修改dom等等。...并且，使用 useReducer 还能给那些会触发深更新的组件做性能优化，因为你可以向子组件传递 dispatch 而不是回调函数。...如果想要在 React 绑定或解绑 DOM 节点的 ref 时运行某些代码，则需要使用回调 ref 来实现。

1.2K4 0

React-hooks面试考察知识点汇总

Hook 简介Hook出世之前React存在的问题在组件之间复用状态逻辑很难 React 没有提供将可复用性行为“附加”到组件的途径（例如，把组件连接到 store）。...Hook 将组件中相互关联的部分拆分成更小的函数（比如设置订阅或请求数据），而并非强制按照生命周期划分。你还可以使用 reducer 来管理组件的内部状态，使其更加可预测。...useEffect我们写的有状态组件，通常会产生很多的副作用（side effect），比如发起ajax请求获取数据，添加一些监听的注册和取消注册，手动修改dom等等。...并且，使用 useReducer 还能给那些会触发深更新的组件做性能优化，因为你可以向子组件传递 dispatch 而不是回调函数。...如果想要在 React 绑定或解绑 DOM 节点的 ref 时运行某些代码，则需要使用回调 ref 来实现。

2.1K2 0

前端面试之React

react整体是函数式的思想，把组件设计成纯组件，状态和逻辑通过参数传入，所以在react中，是单向数据流，推崇结合immutable来实现数据不可变。 hooks用过吗？...聊聊react中class组件和函数组件的区别类组件是使用ES6 的 class 来定义的组件。函数组件是接收一个单一的 props 对象并返回一个React元素。...关于React的两套API（类（class）API 和基于函数的钩子（hooks） API）。官方推荐使用钩子（函数），而不是类。因为钩子更简洁，代码量少，用起来比较"轻"，而类比较"重"。...3.因为调用方式不同，在函数组件使用中会出现问题在操作中改变状态值，类组件可以获取最新的状态值，而函数组件则会按照顺序返回状态值 React Hooks（钩子的作用） Hook 是 React 16.8...React Hooks的几个常用钩子: useState() //状态钩子 useContext() //共享状态钩子 useReducer() //action 钩子 useEffect() //副作用钩子

2.5K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭