如何保持状态并防止react组件在更改层次结构后重新呈现？
要保持状态并防止React组件在更改层次结构后重新呈现，可以通过以下方法实现：
- 使用key属性：在React中，key属性可以用于唯一标识组件，在组件更新时可以帮助React识别出哪些组件需要重新渲染。当组件的层次结构发生变化时，为每个子组件分配一个稳定的、唯一的key值，这样React就能正确地识别组件并保持其状态不变。
- 使用shouldComponentUpdate生命周期方法：shouldComponentUpdate方法允许我们手动控制组件是否需要重新渲染。通过在shouldComponentUpdate方法中比较当前props和state与前一个props和state的值，可以决定是否重新渲染组件。如果状态没有改变，可以返回false，从而阻止重新渲染。
- 使用React.memo高阶组件：React.memo是一个高阶组件，可以用于包装函数组件，以实现对组件的浅层比较。当组件的props没有改变时，React.memo会直接返回之前缓存的组件，从而避免重新渲染。
- 使用React Context API：React Context API可以在组件树中共享数据，而不必通过props一层层传递。通过将状态提升到更高级别的组件，并使用Context API将状态传递给需要它的组件，可以避免在组件层次结构更改时重新渲染。
总结一下，为了保持状态并防止React组件在更改层次结构后重新呈现，可以使用key属性、shouldComponentUpdate生命周期方法、React.memo高阶组件和React Context API等方法。这些方法可以帮助我们更精确地控制组件的重新渲染，提高应用程序的性能和用户体验。
关于腾讯云相关产品，由于不能提及具体品牌商，建议查阅腾讯云官方网站或咨询腾讯云客服，获取适用于保持状态和防止重新渲染的相关产品和解决方案。
相关·内容
如何在React.createClass()中处理自定义javascript属性？
下面是一个例子：
var RouterView = React.createClass({
mixins: [Morearty.Mixin],
isAuthorized: false, // should it be part of state ??
isVerified: false, // should it be part of state ??
bindToAuthorization: function() {
if(/* blah-blah-blah *
浏览 2提问于2015-12-17得票数 0
回答已采纳
我从数组列表中动态地创建了选项卡，并且在选项卡下面有选项卡。
以下是实时桑盒链接：
沙箱代码和预览：
我做了3个主标签和其他子标签在这3个主要标签下。
我想保持标签状态持久，这是在主标签下。
但我做不到。
这是我迄今为止所做的全部代码。
import "./styles.css";
import React, { useState } from "react";
const productTypesSizeAttributesList = [
[
{
product_type_id: "1",
attribut
浏览 11提问于2021-12-07得票数 0
回答已采纳
我正在React中创建一个游戏。基本描述:绵羊图像是从屏幕的中心“发射”的，它们被动画移动到边界。如果他们做到了，你就输了。如果你之前点击了它们，它们就会消失，你就可以继续了。我已经做好了所有的东西，除了计数器，它计算你点击了多少只羊。描述代码： <MainComponent // everything else inside it
renders <Component creating background/>
<Component creating sheep images
renders array of she
浏览 15提问于2019-01-28得票数 0
回答已采纳
挂载后，ReactJS组件可以接收新属性或新状态。通常可以使用不同的方法来解决相同的问题。
有效载荷用于设置新状态：
getInitialState: function() {
return {data: {}};
},
componentDidMount: function() {
requestData().then(function(payload) {
this.setState({data: payload});
});
}
// this.state.data is available for use
或者，新的有效载荷作为道具传递：
re
浏览 3提问于2015-04-21得票数 4
回答已采纳
在react admin Create表单中，是否有一种方法可以保存用户在表单中键入的任何信息，以便在用户单击Save后保留在屏幕上。
我想重复使用他们输入的相同的表单数据来创建另一个记录。
浏览 1提问于2019-06-07得票数 2
回答已采纳
我不想使用状态，因为这是我的第二个下拉列表，它连接到第一个。我发现，当我这样做，this.setstate(...);的反应是重新呈现和它的中断，我的第一个下拉列表，每一个选定的表单正在取消选择。所以我想用这个：
const data =[{
"tablename": "demo_1",
"segments": "asd"
},
{
"tablename": "demo_2",
"segments": "dsa"
}];
我想要像这样简单的东西
浏览 0提问于2018-10-22得票数 0
回答已采纳
重新呈现react组件时，该组件的状态会发生什么变化？
它是保持不受影响，还是被重置为某个“默认值”？为什么？
浏览 1提问于2020-06-27得票数 0
React是在状态或propr保持不变时呈现的。我不明白它为什么要重新更新/更新，因为结果不会改变
class A extends Component {
render() {
console.log("Hello")
return "Foo";
}
}
class App extends Component {
constructor(props) {
super(props);
this.state = { a: "ASDA" };
}
render() {
return (
浏览 4提问于2020-03-22得票数 3
回答已采纳
3回答
我有一个组件，用于在页面中的某处显示新闻。你可以给新闻打分(给它打个星)。 我在另一个显示一些新闻的地方有另一个组件。在该组件中，您还可以对新闻进行评级。我想在<SomeComponentWhereNewsAreDisplayed />投票后更新News组件(重新渲染它)。有办法做到这一点吗？ 一些伪代码： class SomeComponentWhereNewsAreDisplayed extends React.Component
{
voteAndUpdateNewsComponent() {
updateNewsComponent()
}
浏览 25提问于2020-03-29得票数 0
2回答
我正在开发几个像下面这样的反应项目。
index.js
import ReactDOM from 'react-dom';
import React from 'react';
ReactDOM.render(<App />, getElementById("root"));
App.js
import React from 'react';
const App = () => (
<div className="App">
<header>header<
浏览 0提问于2019-06-06得票数 2
回答已采纳
我有用户选择的选项，这些选项保存在父组件的状态中。父组件是带有"form“的整个网页。
当用户按下"Submit“时，我希望使用这些选项的子组件使用传递给它的这些新属性重新渲染。当您加载页面时，默认生成可见。
但是，我不希望它在“提交”被按下之前完成，只有在按下之后才能完成。
我所能想到的就是从节点中删除元素并重新生成它，但这不是使用React的好方法。如果需要更多的澄清/上下文，请让我知道。我是一个新的反应，我正在做这个项目，以熟悉它和它的行为。
谢谢!
浏览 0提问于2020-10-26得票数 0
1回答
我正在使用React和ArcGIS构建一个交互式地图，允许用户：
更新地图上显示的数据层(郊区、地方政府区域等)
更新了地图的视口(缩放和中心)
我的问题是与视口，特别是‘缩放’和‘中心’。例如，如果有人放大数据层，然后更新数据层，它将恢复到初始状态视图设置。
作为参考，这是我正在尝试实现的一个交互反应的例子：。如您所见，它允许您更新显示的数据层(建筑物、泊位等)。而不返回到原来的缩放设置。
为了达到上述效果，我尝试了两种方法：
useState并将“活动层”从“侧栏组件”传递到“Map组件”。问题是，每次用户更改显示的数据层时，它都会恢复到初始状态视口设置。
useC
浏览 1提问于2020-06-28得票数 3
import React,{useState} from "react"
const Pagination = ()=>{
const [pageCount, setPageCount] = useState(1);
const [itemsPerPage, setItemsPerPage] = useState(10);
const [itemOffset, setItemOffset] = useState(0);
const [isLoading, setIsLoading] = useState(false);
const [data, se
浏览 6提问于2022-09-03得票数 0
在这里，当用户单击按钮时，我尝试在一个名为itemList的数组中插入一个值。在插入这个值之后，我想要翻转-- isCross的值。但是，它将数组重置为其初始值。当我评论setIsCross(!isCross)
那为什么会发生这种事？App.js
import React, { useState, useEffect } from "react";
import { FaRegCircle, FaTimes } from "react-icons/fa";
import { BsDash } from "react-icons/bs";
impo
浏览 4提问于2022-06-11得票数 0
1回答
在下面的程序中，当我单击任何按钮时，另一个按钮也会重新呈现，即使我已经使用了React.memo()。此外，只有其他按钮得到重新呈现，而不是其他计数。为什么？我有这样一个父组件：
import React, { useState } from 'react'
import Count from './Count'
import Button from './Button'
import Title from './Title'
function ParentComponent() {
const [age, setAge
浏览 2提问于2021-01-25得票数 1
1回答
是否可以在不卸载子组件的情况下卸载React组件的父组件？为了达到这一结果，有什么工作要做呢？当然，一定有一些(潜在的麻烦)方法可以做到这一点。
示例
当这种情况：
<Parent>
<Child/>
</Parent>
对此的修改：
<Child/>
我希望调用Parent的生命周期方法componentWillUnmount，而不调用Child的生命周期方法componentWillUnmount。
我知道这可能是不可能的，但我想知道是否有人对这个问题有创造性的解决办法。
更新
下面是我的具体用例(希望我能很好地解释这一点)：
我有一个高
浏览 2提问于2018-05-16得票数 1
回答已采纳
2回答
import React, { useState, useEffect } from 'react';
const Test = () => {
const [ count, setCount ] = useState(0);
return (
<div>
<button onClick={() => setCount(count + 1)}>Count up!</button>
<ChildComponent />
浏览 11提问于2019-12-19得票数 0
1回答
我想防止组件重新呈现使用React。我读过一些指南，但我仍然很难让代码正常工作。CreateItem组件从json对象创建一个输入表单。当输入状态改变时，应重新呈现所有组件.我会避免这种情况，因为它会引起一些问题。
我使用过React.memo，但我的代码仍然不能工作。这是实现这段代码的好方法吗？我怎样才能纠正我的代码？谢谢
function MyComponent() {
return(
<div className="row">
{Array.from(new Map(Object.entries(js
浏览 6提问于2022-06-13得票数 0
回答已采纳
我有一个反应应用程序，带领用户通过各种步骤。我希望能够使用浏览器的“后退”按钮返回到前一步。现在我在考虑用反应路由器来做这个。
目前，我只是简单地对事件做出反应，并在顶层组件上调用setState。
我的问题是:是否所有状态都必须反映在URL中，还是保存到本地存储中？或者，我是否可以保留组件的state，只需在顶级组件上更改一些props？当我这样做时，我是否有失去组件的state的风险(例如，因为React不能识别旧的和新的组件)？
我想要简单的网址，如/step1，/step2.。这些并不能反映应用程序中所发生的一切。具体来说，我不需要或不想直接输入这样的URL。还有一些隐私问题。我很高兴
浏览 3提问于2017-09-06得票数 0
我有一些导航，这是一个react组件。然后，我在我的页面下面的内容中有一个链接。单击链接时，我想向导航组件添加一个CSS类。
它们是完全独立的组件。
在过去，我可能会使用jQuery来定位导航，然后使用addClass()函数。我正在努力在React中弄清楚这一点。
浏览 0提问于2018-01-18得票数 0
我需要在悬停时更改img的url。但是这个函数会触发渲染的所有子对象。我找不到一种方法来让函数单独触发每个子函数。我尝试创建一些新的状态来处理索引，但它不起作用……
const Team = React.createClass ({
getInitialState : function() {
return { hovered: false }
},
componentDidMount(){
this.props.fetchTeam();
document.title = "Equipe | [ Adesign&#
浏览 0提问于2016-08-20得票数 1
我正在学习反应，并试图把我的头脑围绕着语法和概念。从“反应”的教程中可以提到：
状态更新可能是异步
为了提高性能，React可以将多个setState()调用批处理到单个更新中。
因为this.props和this.state可能是异步更新的，所以不应该依赖它们的值来计算下一个状态。
我的问题是，如果this.state没有在任何时候都被更新，我们能依靠它来显示正确的信息吗？如果我的理解是正确的，出于性能原因，React将批量更新此状态，但它是否会影响应用程序的准确性？如何反应创建这些批次，以及何时应用？
浏览 0提问于2017-01-23得票数 1
回答已采纳
import React, { useReducer, useEffect ,Component} from "react";
import ReactDOM from "react-dom";
const AppContext = React.createContext();
import React from "react";
const withRandomColors = WrappedComponent => {
return class RandomColors extends React.Com
浏览 7提问于2020-05-05得票数 2
回答已采纳
我在编码方面是新手，在谷歌上搜索了很多次之后，我无法解决这个问题。问题是我有一个布局组件，其中包含4个不同的组件。当我在函数组件中调用一个函数时，它会影响其他函数和其他函数的重呈现。但我不会把新的道具传给他们。我只将道具传递给一个包含单击事件的组件。我希望我事先说清楚了，谢谢。下面是我的代码示例：
这是我的布局组件.
import React, { useState } from "react";
import Header from "./Header";
import MenuTitle from "./MenuTitle";
import
浏览 1提问于2021-03-03得票数 0
回答已采纳
所以我刚刚开始了网络开发的旅程。我使用react创建了一些基本的应用程序。只是想知道什么是Redux，
浏览 3提问于2022-09-16得票数 -1
回答已采纳
1回答
将变量设置为相同值时的无限重呈现
、、、、
我使用了一个React本机功能组件，如下所示：
export const Component1 = () => {
const [var1, setVar1] = useState(false);
setVar1(false);
return (
<View...>
)
}
这是一个无限循环，但是当我移除setVar1(false)时，它就没有了。我假设如果我继续将var1重新设置为相同的false值，组件就不会重新呈现。我该怎么防止这个重渲染？
浏览 6提问于2022-10-11得票数 3
因此，React有UseState钩子，我们应该这样使用它。
const [value, setValue] = useState(0);
如果我们想要改变一个值，它应该写成这样：
const increase = () => {
setValue(value + 1)
}
为什么不可能这样写？为什么我们需要setValue？
const increase = () => {
return value + 1;
}
我知道这是行不通的，但我找不到解释为什么会这样。
浏览 8提问于2022-11-05得票数 1
回答已采纳
1回答
我来自角度和习惯ui路由器的解决能力，这使得它很容易等待和注入结果给控制器。
目前，我希望在使用react时，不必在componentWillMount方法中编写请求(或触发操作)，就可以使用React来模拟这种情况。我觉得有更好的方法，我只是还没弄清楚是什么。
我很想得到一些建议，或者告诉我在哪里可以学会这样做。
浏览 0提问于2015-05-13得票数 11
回答已采纳
我正在尝试弄清楚为什么当我单击一个特定的组件时，它的同级组件也会呈现出来
function CountButton({increment, count, number}) {
console.log(`Render CountButton ${number}`)
return <button onClick={() => increment(count + 1)}>{count}</button>
}
function DualCounter() {
const [count1, setCount1] = React.useState(0)
c
浏览 14提问于2021-02-22得票数 0
我正在做一个复杂的项目，包括禁用浏览器中的滚动和通过一个组件模拟滚动，该组件具有一系列基于轮子/触摸移动deltaX更新的计算逻辑(在下面的react-dev-tools图像中突出显示)。最重要的是，它将此数据传递给react-motion，操作包装{ this.props.children }的“滚动托盘”元素的transform3d css。但它也连接到redux，并传递大量数据供应用程序使用。
除了“滚动托盘”包装器上的css转换之外，“ScrollOMatic”组件的背景色在滚动数据缩减程序每次递增时都会更新，并重新呈现该组件。很贵的。
有没有更好的方法来处理这一切？
我唯一
浏览 0提问于2018-01-26得票数 0
2回答
因此，我需要呈现“警报”组件，它通知用户组件内部函数中的成功操作，它将项添加到cart/localstorage中。
警报组件：
class Alarm extends React.Component{
render(){
return(
<Alert color="success">
This is a success alert — check it out!
</Alert>
)
}
}
在另一个组成部分
浏览 1提问于2019-04-25得票数 2
回答已采纳
1回答
我正在从getCount函数的孩子那里得到道具。把它设为州。而不是把它设置在组件中，得到无穷大的循环。我怎么才能解决呢？
有父组件的代码：
import React, { Component } from "react";
import Message from "./Message/Message";
export default class Widget extends React.Component {
constructor(props) {
super(props);
this.state = {
color: {
浏览 0提问于2018-06-26得票数 0
回答已采纳
我使用了react-router-redux并嵌套了connect()组件。这似乎工作得很好，除了我的嵌套组件会在状态改变时重新呈现。
Probs: Root有5个子组件:如果任何一个子组件中有任何状态变化，所有组件都会重新呈现，因为所有组件都是connect()。
如何才能仅渲染所需的子项？
(有没有办法使用connectAdvanced生命周期方法来解决这个问题？
浏览 4提问于2017-12-11得票数 0
这是我的index.js。问题是Chackout路由不能单独显示，比如我在同一页上有'/‘路由和/chackout路由。我尝试了所有方法，但都不起作用，因为我不能将状态从redux发送到checkout组件。 我已经尝试使用HashRouter实例路由器，并从历史包中将历史更改为hashHistory导入。问题仍然是一样的，我可以只在与我的主页组件相同的页面上呈现redux store，而不是在CheckoutContainer组件中。 import React from 'react'
import { render } from 'react-dom
浏览 22提问于2020-05-01得票数 0
1回答
我的同事指出了一个可能与反应背景有关的问题。他善意地在CodeSandBox中创建了两组代码来演示这个问题。
Redux版本(工作没有任何问题)
使用Chrome，请打开此链接：Open在另一个选项卡中的独立链接：In独立选项卡，打开Chrome DevTools并单击React Components选项卡。配置中的，确保textbox中的“当组件呈现时突出显示更新”是checked.Type，并注意到颜色矩形仅出现在组件1和2周围。是我们的基本案例，说明了我们希望用每个键重新呈现的内容。。
上下文版本(说明问题)
使用Chrome的Open ，请打开此链接:在另一个选项卡中打开独立链接：In
浏览 4提问于2019-11-15得票数 0
回答已采纳
我对反应场景很陌生，但我对它的结构相当熟悉，至少是如何使用它来制作简单的new应用程序，但这让我抓狂了好几个小时。
我正在做一个Tic脚趾使用的反应-本机，我目前只在Android上实验。这些是我代码中的部分，我认为这些部分解释了我的情况。
import Tile from "./Tile"
export default class Playground extends React.Component {
constructor(props) {
super(props)
this.state = {
board
浏览 1提问于2017-03-26得票数 2
回答已采纳
我一直在阅读React，并偶然发现了shouldComponentUpdate()。我的理解是，每次调用setState()时，都会更新该组件的重呈现。
我的问题是，如果要更新的值是与当前状态值相同的，这会触发重呈现事件吗？或者我必须手动检查要在shouldComponentUpdate()中更新的当前值和值。
浏览 4提问于2016-12-25得票数 38
回答已采纳
我正在做一个反应小训练应用程序使用钩子。下面是一个示例:有一个MainPage.js，它有3个类似的子组件Card.js。我在MainPage中有全局状态，每一张卡都有自己的本地状态。每张卡都有来自MainPage和clickButton func的道具"id“。
当我点击任何卡片上的按钮时，有两个操作：
局部变量“点击”变为真。
调用父组件的函数并将值设置为全局状态变量'firstCard‘。
每个文件都包含用于测试的console.log()。当我单击该按钮时，它会显示实际的全局变量"firstCard"，以及3倍的false(在Card中显
浏览 0提问于2021-01-25得票数 1
父类有几个子组件，所有子类都在呈现方法中实例化，因此，对父状态的任何更改都会导致所有子实例重新实例化，每次调用react创建子实例的新实例，在那里通过子实例的松散状态，以便重用我尝试使用parent.refs.childRef检索子实例的子实例，但这给我带来了错误。
未明错误:对象作为一个React子对象无效。
，这是我的密码
placeHolderComponent(){
let component;
let palceHolderValue=this.state.uiState.placeHolder;
let classInstan
浏览 4提问于2016-12-02得票数 2
1回答
我正在使用与mobx反应路由器v4，我遇到了一个非常恼人的错误。这是我的index.js
const history = createHashHistory();
render(
<Provider history={history} {...stores}>
<Router history={history}>
<Application />
</Router>
</Provider>, document.getEleme
浏览 0提问于2018-09-05得票数 0
回答已采纳
我想知道扩展React.Component的React在试图决定它是否需要改进型时是否对对象进行了深入的比较。
例如，给出
const Foo = ({ bar }) => {
return <div>{bar.baz}</div>
}
class App extends React.Component {
constructor() {
super()
this.state = { bar: { baz: 1} }
}
render() {
return <Foo bar={this.state.bar} /&g
浏览 1提问于2018-10-25得票数 17
回答已采纳
我在用react做计算器。每次我按数字按钮时，整个应用程序都会重新呈现，而不是<Display />。
为了防止这种情况，我尝试了两种不同的应用程序方法，但它们都不起作用。
任何帮助都将不胜感激。
将clickHandler放在useCallback()中
const App = () => {
const [screen, setScreen] = useState("0");
console.log("render");
const clickHandler = useCallback(
(val) =&g
浏览 3提问于2022-03-03得票数 0
我最近开始学习React / Redux，现在我正在尝试构建一个小的单页应用程序。
最近我遇到了一个我不明白也无法解决的问题。
让我给你看看密码：
index.js
import React from 'react'
import ReactDOM from 'react-dom'
import { createStore, combineReducers } from 'redux'
import { Provider } from 'react-redux'
import { Router, Route, IndexRoute
浏览 2提问于2016-07-08得票数 3
回答已采纳
3回答
我有一个问题，我不能解决，在反应:我想改变背景图像每3秒。代码可以做到这一点，但它只涉及一个问题:当我更新"teaserAnimCount“状态时，我可以在我的控制台中看到这个值呈指数增长。我不知道为什么，随着时间的推移，这是一个问题，因为网络兄弟崩溃。
在开始时，"console.log("this.state.teaserAnimCount")的值是1(它很好)，然后是3，7，然后是15，如果你知道为什么？
这是在renderTeaserBackground箭头函数中。
我的代码：
import React, { Component } from '
浏览 0提问于2018-03-09得票数 1
回答已采纳
我正在学习React中的状态，下面是创建待办事项列表的练习。我捕获待办事项列表中每个输入“项目”的状态，并将它们添加到“项目”数组中。然后，使用HTML呈现"items“数组中的每个元素。 我不明白为什么不能把每一项都放到一个普通的JavaScript数组中呢？提交表单后，我记录"items“数组。然而，无论我提交多少次表单，"items“数组都只有一个元素。以前的值似乎每次都在消失。 我通过使用数组的React状态解决了这个问题。但是我仍然不明白为什么我不能使用JS数组。任何解释/资源都将不胜感激！ function App() {
const items
浏览 16提问于2021-09-08得票数 0
回答已采纳
我对以下虚拟组件进行了一些测试，在执行过程中(在控制台中)，我得到了以下结果：
Rendering: 0
Triggered: 0
Rendering: 4
Triggered: 4
Rendering: 4
我很难理解为什么。
首次渲染：
将index设置为0。
运行useEffect，因为undefined不是0
useEffect请求将index设置为4
第二次渲染：
index是4
为什么useEffect身体会再次被执行？
第三次渲染：
为什么要重新渲染？
我期望的是：
Rendering: 0
Triggered: 0
浏览 1提问于2022-01-19得票数 2
回答已采纳
关于新的api，我有两个问题：
React有下面的示例。在构造函数(而不是类方法)中声明toggleTheme函数有什么具体原因吗？
import {ThemeContext, themes} from './theme-context';
import ThemeTogglerButton from './theme-toggler-button';
class App extends React.Component {
constructor(props) {
super(props);
this.toggleThem
浏览 0提问于2018-09-29得票数 2
回答已采纳
我有一个像手风琴一样的无状态部件。在单击容器div时，我会在一些子组件上切换几个css类。它可以直接更改dom中的类吗?还是应该将这个无状态组件转换为有状态组件并通过状态处理类切换？
import React, {PropTypes} from "react"
const Accordian = ({children,label,align}) => {
return(
<div class={"accordian-tab " + (align === "left" ? "accordian-
浏览 4提问于2016-10-21得票数 0
回答已采纳
现在在react中有很多方法可以做一件事。以memo为例，useMemo、memo(MyComponent)和React.PureComponent有什么不同？他们不是在做同样的事情吗？那么我们今天应该使用哪一个呢？如果我们根据更新的API的日期来判断，我们应该使用useMemo。
浏览 0提问于2021-10-31得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
