如果父组件和子组件对相同的数据使用useSelector钩子，react组件是否会呈现两次？
在React中，使用useSelector钩子来选择Redux store中的数据。当父组件和子组件都使用useSelector钩子选择相同的数据时，React组件不会呈现两次。
这是因为React使用了虚拟DOM的概念，它会比较前后两次渲染的虚拟DOM树的差异，并只更新需要更新的部分。当父组件和子组件都选择相同的数据时，它们实际上使用的是相同的引用，因此React会将它们视为相同的组件，不会重复渲染。
当Redux store中的数据发生变化时，useSelector钩子会触发组件重新渲染，但由于父组件和子组件使用的是相同的数据引用，它们会被一起更新，而不是分别更新两次。
总结起来，当父组件和子组件对相同的数据使用useSelector钩子时，React组件不会呈现两次，而是一起更新。这样可以提高性能，避免不必要的重复渲染。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云官网：https://cloud.tencent.com/
- 云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
- 云数据库 MySQL 版（CMYSQL）：https://cloud.tencent.com/product/cdb_mysql
- 云存储（COS）：https://cloud.tencent.com/product/cos
- 人工智能（AI）：https://cloud.tencent.com/product/ai
- 物联网（IoT）：https://cloud.tencent.com/product/iot
- 移动开发（移动推送、移动分析）：https://cloud.tencent.com/product/mps
- 区块链（BCS）：https://cloud.tencent.com/product/bcs
- 元宇宙（Metaverse）：https://cloud.tencent.com/product/metaverse
相关·内容
在，我们被警告说，useSelector“不会因为组件的父重新呈现而阻止组件重新呈现，即使组件的道具没有改变”，与connect不同。
这对我来说是个新闻。connect是否防止在正常子组件不能重新呈现的情况下重新呈现？更具体地说，当存储和道具保持不变时，父组件重新呈现时，我询问以下三种场景的重呈现行为的区别：
子组件封装在connect自组织中。
行为为1，但注入状态被重构为useSelector。
作为2.，但是useSelector和所有依赖它的东西都被删除了。
浏览 0提问于2019-09-07得票数 0
回答已采纳
1回答
我已经看过许多redux的示例代码，并发现我们使用useSelector的方式主要有两种。
nested
import React from 'react'
import { useSelector } from 'react-redux'
export const UserComponent = () => {
const name = useSelector((state) => state.user.name)
const age = useSelector((state) =>
浏览 0提问于2021-06-02得票数 1
我构建了一个Pokedex，运行良好，但是，我在React-Redux Dev工具中看到了一个“问题”： ? "getPokemonsInfo“在"getPokemonsUrls”之前被调用，但是，"getPokemonsInfo“应该只在状态的属性发生变化时调用(使用useEffect())，而这种情况发生在"getPokemonsUrls”中。 import React, { useEffect } from "react";
import { useSelector, useDispatch } from "react-r
浏览 6提问于2021-01-23得票数 1
回答已采纳
我在React Native应用程序中有一个规范化的Redux存储。 我的减速器的结构是： {
byId: {},
allIds: []
} 在我的组件中，我使用useSelector钩子获取Redux状态的切片： const categories = useSelector((state: AppState) =>
state.products.allIds.map((id) => state.categories.byId[id.toString()])
); useSelector中的逻辑只是将byId对象转换为数组。 当我将categories数组设置为依赖项
浏览 127提问于2021-10-23得票数 0
回答已采纳
我想解释一下上一个Redux商店的回忆录。
我现在拥有的，
import { useCallback, useMemo, memo } from "react";
import { useSelector, useDispatch } from "react-redux";
import { createSelector } from "reselect";
const Plus = memo(({ onIncrement }) => {
console.log("rendering <Plus>...")
浏览 6提问于2022-04-15得票数 0
2回答
假设当我的React运行时，它连接到一个MQTT代理，其中数据被发送到应用程序。然后，这些数据存储在一个看起来像这样的对象中：
var data = {
shoeColor1: 'blue',
shoeColor2: 'red'
shoeColor3: 'orange'
}
下面的React组件显示该数据。
import React, {Component} from 'react';
import { Button } from 'react-native';
export
浏览 4提问于2021-03-08得票数 0
回答已采纳
我有redux连接组件与onClick动作绑定到它。每次我点击它的重选器，尽管我使用useCallback钩子。以下是我的简化组件：
const Map = props => {
const dispatch = useDispatch(); // from react-redux
const coordinates = useSelector(state => state.track.coordinates); // from react-redux
const onClick = useCallback( // from react
data => {
浏览 3提问于2019-12-23得票数 0
回答已采纳
虽然很明显，为什么React在默认情况下不对其所有功能组件执行React.memo，并且我们应该在需要时自行包装功能组件。
在我的例子中，我有一个大型的react项目，其结构如下：
const MyBigApp = () => {
const shouldShowX = useSelector(getShouldShowX);
const shouldShowY = useSelector(getShouldShowY);
// Many more selectors
return (
<>
{shouldShowX &&
浏览 1提问于2020-08-17得票数 13
我在reactJS/graphQL-应用程序中使用react-apollo。有时我确实需要对多个部件进行相同的突变。那么，在调用突变后，使用突变和更新数据的最佳方法是什么？
我是应该将突变注入顶层组件并将其传递给所有的孩子(示例2)，还是应该在需要的地方注入突变(示例1)？
通过示例1，可以更容易地在突变调用之后更新现有数据，而传递父组件的doMutation()-function会使更新mor变得更加复杂。
示例1(多次注入)
父级
import React, { Component } from 'react'
import { graphql } from 'r
浏览 3提问于2020-01-04得票数 1
回答已采纳
我有一个钩子，它在挂载上调用一个redux动作。所以我猜应该只执行一次。但事实并非如此。
useCategories.js
const useCategories = () => {
/*
Hook to call redux methods that will fetch the categories
of the exercises. Store it in redux store.
RETURN: loading, error, data
*/
const mainCategories = useSelector(state => st
浏览 2提问于2020-01-22得票数 4
回答已采纳
1回答
我有一个redux-store，里面有初始值的对象。并且这个存储将在子组件中的几个位置进行更新。
我创建了一个无状态的功能组件作为父组件
const Parent = () => {
const store = useSelector(state => state);
const getInitState = () => {
depends on store, it will return an object as initial state for child component
}
let initState = getInitState(); /
浏览 1提问于2020-11-26得票数 0
当我点击展开图标时，我在我的列表中面临着不必要的重新渲染。目前，我可以在Profiler中看到整个列表被重新呈现，当我试图将列表包装在React备忘录中时，它没有解决这个问题。有什么我可以做的，以防止重新呈现整个列表？
我们的目标是使用navigation变量构建一个模块化的侧边菜单。
const navigation = [
{ id: "Überschrift", type: "header" },
{ id: "Test", icon: <StarBorder />, type: &#
浏览 0提问于2020-10-29得票数 0
这更多的是一个好奇的问题，我觉得知道原因会很有用，但有人能解释为什么console.log(食谱)打印两次吗？当我单击搜索按钮时，结果在控制台中打印两次。我想我必须做两次react重新渲染组件，这可以详细解释一下吗？ function Search(props) {
const recipe = useSelector(state => state.recipe)
const dispatch = useDispatch()
const [query, setQuery] = useState("")
console.log(r
浏览 93提问于2020-08-13得票数 0
回答已采纳
我有一个Manager组件，它是父级的，并且具有模式状态。
它有条件地呈现两个与其状态相关的不同成分，
我希望当用户单击子组件中的Add按钮时，父组件的状态会发生变化。
另外，对于其他同级组件，vica相反。
你能帮我解决我的问题，我的意思是，我应该如何改变父状态在子组件点击按钮。
如果你在一个孩子中帮助我，我也会对另一个孩子这样做。
这是父组件：
import {React, useState} from 'react'
import BasePage from './BasePage'
import AddRecordForm from './Add
浏览 5提问于2021-06-10得票数 0
回答已采纳
来自react redux官方
分派操作时，useSelector()将对前面的选择器结果值和当前结果值进行引用比较。如果它们不同，组件将被迫重新呈现。如果它们是相同的，组件将不会重新呈现。
如果我做了这种事
Redux状态
state = {
groupAB: {
propA: valueA,
propB: valueB
},
propC,
// ETC
}
SomeComponent.tsx
const propA = useSelector((state) => state.groupAB.propA);
如果：groupAB对象更
浏览 1提问于2020-09-14得票数 4
我是react的新手，我想私下展示一下我的管理仪表板，但是仅仅是第一线的工作和其他路由的组件没有显示出来。这是我的密码：
<Routes>
<Route path="/admin" element={<PrivateLayout />}>
<Route path="/dashboard" exact element={<Dashboard />} />
</Route>
<Route exact path='/' e
浏览 3提问于2022-04-13得票数 2
回答已采纳
我已经为我的一个组件实现了无限滚动。代码结构如下所示 我有一个名为的父组件，这个组件执行文章列表的抓取调用。下面是代码 import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import Row from 'muicss/lib/react/row'
import ReactCSSTransitionGroup from 'react-addon
浏览 141提问于2019-03-19得票数 0
回答已采纳
在本例中，componentDidUpdate是在设置状态跟踪时触发的。HelloMessage道具和状态没有改变，所以为什么要调用这个方法？如何防止这种情况发生？
class HelloMessage extends React.Component {
componentDidUpdate(prevProps, prevState) {
console.log('HelloMessage did update');
}
render() {
return <div>Hellooo</div>;
}
}
class A
浏览 0提问于2018-08-17得票数 1
回答已采纳
我试图理解在useSelector中使用_bootstrapAsync的区别在于它以这种方式失败了
import React, { useEffect,useState } from "react";
import { useSelector } from 'react-redux'
import { ActivityIndicator, StatusBar, View, Text } from "react-native";
export default function authLoading({ navigation }) {
浏览 0提问于2019-12-09得票数 0
对于我的主页，我尝试使用带有交叉点观察器的可加载组件。当我的redux存储更新时，整个页面都会被重新渲染。我怎样才能避免这种情况？
import React from "react"
import loadable from "@loadable/component"
import { useSelector } from "react-redux"
const Index = () => {
const intersectState = useSelector(state => state.intersectState)
con
浏览 2提问于2021-08-06得票数 0
因此，我创建了一个需要在页面视图上触发的自定义钩子
所以我想我可以在useEffect里面调用这个钩子，但这看起来不可能
有人知道我是怎么做到的吗？
一旦我启动它，它就会触发Google，所以它必须装载。这个是可能的吗？
好的，这里有一个例子
export const usePageView = props => {
const counter = useSelector(state => state) // useSelector coming from react redux
console.log(counter, '===')
}
impo
浏览 1提问于2020-03-12得票数 0
1回答
我有我所说的父组件。这是一种模式。我试图从一个子组件(即ShippingBlock )中更新一个变量。我正在尝试更新shippingMethod。
import React from 'react';
import "./Checkout.scss"
import AddressBlock from './AddressBlock';
import PaymentBlock from './PaymentBlock';
import ShippingBlock from './ShippingBlock';
imp
浏览 3提问于2021-10-30得票数 0
回答已采纳
这是屏幕闪光灯：
当我点击1,2，都不会导致改进机。当我单击3时，单击1不会导致重发，而只有单击2才会导致重发，原因是什么？
请注意，
const { key1, key2 } = useSelector(({ obj: { key1, key2 } }) => ({
key1,
key2
}));
如果有任何重新检查，这是故意放在那里的，因为{key1,key2}总是不同的(它是对象)。
以下是代码：
下面是tryRerender.js，注意里面的注释以获取重要信息
import React, { useEffect, useState } from &
浏览 9提问于2022-05-21得票数 1
2回答
反应文档清楚地表明了。，原因是reason使用调用钩子的顺序注入正确的值。
我理解这一点，但现在我的问题是，从带有钩子的函数组件中提前返回是否可以。
这样的事允许吗？：
import React from 'react';
import { useRouteMatch, Redirect } from 'react-router';
import { useSelector } from 'react-redux';
export default function Component() {
const { match } = useRou
浏览 1提问于2019-03-01得票数 36
回答已采纳
请告诉我why my header render every time already use React.memo ?，当我从my apps到user header的导航时，我有两部分my app and user，为什么？
这是我的密码
import React, { useEffect, useState } from "react";
import { withRouter } from "react-router-dom";
const Header = React.memo(function() {
console.log("Head
浏览 2提问于2020-04-22得票数 3
回答已采纳
1回答
一个组件显示了一个值列表，我试图隐藏关于这些值是如何得到的所有信息，基本上是将状态的关注从组件本身中分离出来，这样在将来获取API数据的任何更改、使用什么存储等等都不会影响组件。
首先，这到底是一个好主意，还是应该在组件中直接处理挂载/卸载操作？
第二，如果这是一个很好的方法，我的实现如何？我在JS感觉很舒服，但不是专家
ContentList.js：
import React from 'react'
import './ContentList.css'
import { ContentCardContainer } from '../Conten
浏览 0提问于2020-12-04得票数 1
回答已采纳
我有一个组件，它包含几个嵌套的子组件；这些子组件需要关于父组件的信息，以及来自redux存储的数据。考虑到它们的数量，与让每个子组件使用useSelector相比，在父组件中使用一次useSelector钩子并通过属性(而不是上下文)将其向下传递是否具有更好的性能？此外，通过父组件的属性传递有关父组件的信息是否比让每个子组件使用useContext更好？
编辑:在测试中，当传递属性时，速度提高了20%；我猜useSelector/useContext的声明比属性更昂贵？有人能证实这是真的吗？
浏览 0提问于2020-08-03得票数 1
在父组件中排序后，列表不会更新。
/**
* Shop List
*/
import React, { useEffect, useState } from 'react';
import { NavLink } from 'react-router-dom';
import { Helmet } from 'react-helmet';
// Redux
import { useDispatch, useSelector } from 'react-redux';
import { GetShopList } from &
浏览 3提问于2020-11-11得票数 0
回答已采纳
我编写了一个useReduxState钩子，如下所示：
import { useSelector } from 'react-redux';
const pick = (object, keys) =>
keys.reduce(
(obj, key) => (object && Object.prototype.hasOwnProperty.call(object, key) ? { ...obj, [key]: object[key] } : obj),
{},
);
export default
浏览 0提问于2021-01-27得票数 4
回答已采纳
1回答
有记忆的组件的子组件也有记忆吗？
、、、、
从useMemo返回的子组件或包装在React.memo()中的子组件也会被记忆吗？(抱歉，这可能是一个愚蠢的问题) 例如： React.memo(); 在这里，父母被记住了，孩子是不是也被记住了？
浏览 27提问于2021-02-20得票数 2
回答已采纳
2回答
我有重新渲染的问题，任何帮助都非常感谢。我试过useMemo和useCallback，它打破了复选框。我有一个组件，在这个组件中，我在我的对象中显示一些信息。我假设一个物体是这样的：
fakeObject = {
name: "rectangle"
width: 10
height: 20
visible: true
}
const fakeComponent = () => {
const [checked, setChecked] = React.useState(true);
const handleChange = (event: React.Change
浏览 7提问于2022-11-15得票数 1
回答已采纳
我需要创建一个反应应用程序，让我们列出pokemons和类型。我从PokeAPI中获取数据。从App组件获取它然后将它传递给子组件是一个好做法，还是从子组件中获取它们更好？
我在主应用程序中获取它，我可以看到提取工作，因为我console.log数据，但我的组件没有得到它，因为我得到一个props.map不是一个函数。
这是我的App.js：
import React, { useState } from "react";
import logo from "./logo.svg";
import "./App.css";
import axio
浏览 4提问于2020-09-19得票数 1
回答已采纳
我有两个代码，一个是在子程序中使用独立状态，另一个是在我的“作为道具发送”版本中，状态作为道具发送。
function App() {
const [isChanged, setIsChanged] = React.useState(false);
const [i, setI] = React.useState(0);
React.useEffect(() => {
console.log("USEEFFECT");
setTimeout(() => {
setIsChanged(true);
}, 2000);
浏览 5提问于2020-05-17得票数 1
当我在useEffect中使用useDispatch时，它会不断地重新加载整个组件 这是我的行为： export const getData = () => dispatch => {
fetch("https://jsonplaceholder.typicode.com/users")
.then((response) => response.json())
.then((json) =>
json.map((obj) => ({
...obj,
bonu
浏览 47提问于2020-04-12得票数 0
我有一个使用Material UI v5的react应用程序。我没有任何样式，正在使用默认的TextField组件来测试渲染问题。在我的页面中，我只有一个Typography、Breadcrumb、IconButton和TextField。为了复制这个问题，我放置了一个受控TextField和大约六个其他非受控TextFields。当我开始在受控的TextField上编写代码时，页面中的所有组件都开始重新呈现。如果我开始大量/更快地输入，它有时会冻结，或者需要一段时间(比如500-1000ms)才能在TextField中呈现文本。基本上，它会冻结一秒或半秒。 这是我所拥有的replicate
浏览 17提问于2021-09-23得票数 0
我使用redux在app中存储我的数据。我想知道如何将数据从状态传递给子组件的方法。我所知道的是，如果useContext创建了提供程序，并可以通过简单的方式提取数据，例如： const myData = React.useContext(MyContext); 但我不知道如何在redux中以一种有效的方式做到同样的技巧。我知道mapeStateToProps，但我希望有更简单的方法。看看我的代码： import React from 'react';
import { useDispatch, useSelector } from 'react-redux'
浏览 17提问于2020-11-06得票数 0
回答已采纳
我想知道useSelector和UseStore之间有什么区别。用一种代替另一种有什么好处？谢谢。
useSelector
const { pages } = useSelector((state: RootState) => {
return {
pages: state.pages
};
});
console.log(pages);
useStore
const pageArrayTwo = useStore();
const pageArray = pageArrayTwo.getState().pages;
console.l
浏览 4提问于2020-04-18得票数 6
回答已采纳
2回答
我现在试图使用redux存储中的数据调用API。
假设我得到了两个API调用，Api A和Api B在我已经调用了API A的父组件中，并且已经在redux中保存了数据。
现在我在另一个组件中。我要打电话给Api B。但是API B有一个params，我将从API A获得它。因此，在第二个组件中，我使用useEffect钩子调用数据。
为了从redux中获得params，我使用useSelector钩子。
在第二个组件中，UseEffect钩子是这样的：
useEffect(() => {
let splitText = cartList?.OrderDTO?.Deliver
浏览 3提问于2021-04-26得票数 0
回答已采纳
好吧，我想我还是在这里补充一下，我知道代码看起来不太好，但是我认为它可以完成这个工作，所以我很高兴你能解释为什么它如果工作的话，不仅不是一个很好的实践，而且它为什么不能工作。我也很高兴听到你对这个问题的解决办法！
我很难理解为什么下面的代码块似乎不像我想要的那样工作，我指的是回溯<First />和<Second />函数组件的返回值，而不是在每个<App />呈现时调用它们的函数。我认为，由于<SomeComponent />表达式返回一个对象，因此可以简单地对其进行回忆录并与其一起使用。似乎不起作用，我也不知道为什么。
另外，如果您能够解释为
浏览 6提问于2021-04-09得票数 0
回答已采纳
我有一个留言列表。父组件负责显示消息。我想滚动到第一次未读消息时，所有的消息组件已被挂载。消息由v-for呈现。
<div v-for="msg in messages" :key="msg.id">
<message :text="msg.text"></message>
</div>
messages是父组件的支柱，是一个数组。我的应用程序有多个房间。用户可以在房间之间移动。更改房间和安装新邮件后，家长应滚动到第一条未读消息。
我尝试更改watch房间并使用this.$nextTick，但是
浏览 4提问于2021-05-27得票数 1
我将react与redux一起使用，我遇到了这个问题，导致了登录和配置文件之间的无限循环。当我删除配置文件中用于调试的if(!cuurentUser)条件时，它会说curentUser是未定义的。 那请帮帮我。 提前谢谢你。 import React from "react";
import { Redirect } from 'react-router-dom';
import { useSelector } from "react-redux";
const Profile = () => {
const { current
浏览 113提问于2020-11-28得票数 0
回答已采纳
从链接中引用。
我理解useSelector钩子的好处是避免包装器地狱。包装器地狱是由于使用connect HOC而发生的。如果由于性能原因，我们必须使用React.memo HOC和useSelector，那么简单地使用connect HOC会更好吗？因为在任何情况下，我们都必须在、wrappers、中。如果不是connect的话，那么它就是React.memo的了。
任何一个人都请解释React.memo相对于connect的好处。
浏览 0提问于2019-06-11得票数 13
回答已采纳
我有以下代码，我希望返回用于React路由器上的私有路由的状态(当isAuthenticated()返回true时允许访问)。
import React from 'react'
import { useSelector } from 'react-redux'
export const isAuthenticated = () => {
const auth = useSelector(state => state)
return auth
}
但是我得到了这个错误：
Line 6: React Hook "useS
浏览 34提问于2019-10-23得票数 0
我正在钻研Redux工具包，并做了一个简单的项目来更好地理解它的概念。
function App() {
//..
return(
<UserList /> // uses submittedUserSelector
<UserInformation /> // uses selectedUserSelector
);
}
基本思想是，您可以向UserList中添加一个用户，也可以从列表中选择一个用户，该列表将在UserInformation中显示。提交的用户和选定的用户都由同一存储中的不同还原器管理。
export const rootReducer =
浏览 5提问于2021-09-20得票数 0
回答已采纳
2回答
根据单据 useSelector(selector: Function, equalityFn?: Function) useSelector接受两个参数，第二个参数是可选的，因为在默认情况下，它比较严格的===引用相等检查，而不是浅等检查。 const state = useSelector(state => {
console.log("useSelector rerendering");
return state.counter
}, shallowEqual) 另一个是 const state = useSelec
浏览 40提问于2021-05-04得票数 1
回答已采纳
我不明白为什么它会给我上面的错误。我在props.match.params.languagename中使用了道具的方式，它工作得很好。
我没有在下面的代码中包含所有的导入。
import { useParams } from 'react-router';
const App = () => {
const topicsState = useSelector(state => state.topics);
const dispatch = useDispatch();
const { languagename } = useParams();
浏览 1提问于2019-12-03得票数 12
回答已采纳
1回答
我让两个用户都加入了同一个Socket.io房间，这是基于从发送方和接收方ids创建的房间，这两个用户都有一条私有消息。每次我创建一条消息时，由于Socket.io发出的事件由于状态更改而重新呈现，客户机会重新加入这个房间，并且roomId会被记录下来。因此，当聊天已加入同一房间时，该消息不会通过多个聊天实例进行传输。
const ChatApp = () => {
const [messages, setMessages] = React.useState([]);
const userId = useSelector(state => state.profile.pro
浏览 1提问于2020-07-21得票数 0
回答已采纳
1回答
我刚开始对React中的渲染过程感到困惑。
假设我有一个高阶组件，如下所示：
const withHOC = () => WrapperComponent => {
return class WithHOC extends React.Component {
render() {
//someProps => what will change...
//...rest => won't change
const { someProps, ...rest } = th
浏览 0提问于2018-08-28得票数 0
回答已采纳
import React, { Component } from 'react'
import { createStore } from 'redux'
import { Provider, connect, useSelector } from 'react-redux'
function rootReducer(state = { name: 'store' }, action) {
return state
}
const store = createStore(rootReducer)
function
浏览 3提问于2021-08-26得票数 0
2回答
意外早退报表
、、
我已经尝试使用Material制作一个响应型导航条，但是当窗口小于900 in时，这段代码会崩溃，从而导致错误错误:呈现的钩子比预期的少。这可能是由于意外的早期返回语句引起的。错误在useEffect钩子中。但我不明白为什么这会让我出错。我猜是因为违反了钩子规则。但是我已经试过了所有的东西，但是我仍然无法修复它。
import React,{useEffect,useState} from 'react'
import {AppBar ,Toolbar, Container ,makeStyles,Button, IconButton ,Drawer} from '@m
浏览 9提问于2021-02-07得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
