React状态更改不会导致重新呈现
是指在React应用中，当组件的状态发生变化时，React会智能地更新DOM，而不是重新渲染整个组件树。这种优化可以提高应用的性能和响应速度。
React使用虚拟DOM（Virtual DOM）来管理和更新DOM。当组件的状态发生变化时，React会比较新旧虚拟DOM树的差异，并只更新需要变化的部分。这样可以避免不必要的DOM操作，减少了浏览器的重绘和回流，提高了性能。
React的状态更改不会导致重新呈现的优势包括：
- 性能优化：只更新变化的部分，减少了不必要的DOM操作，提高了应用的性能和响应速度。
- 简化开发：开发者无需手动操作DOM，只需关注组件的状态变化，提高了开发效率。
- 组件复用：通过将状态提升到父组件，可以实现组件的复用，减少了重复的代码。
React状态更改不会导致重新呈现适用于各种场景，特别是在需要频繁更新的页面或组件中，如实时数据展示、表单输入、动画效果等。
腾讯云提供了一系列与React开发相关的产品和服务，包括：
- 云服务器（CVM）：提供可靠的云服务器实例，用于部署React应用。
- 云数据库MySQL版（CDB）：提供高性能、可扩展的关系型数据库服务，用于存储React应用的数据。
- 云存储（COS）：提供安全可靠的对象存储服务，用于存储React应用的静态资源。
- 云函数（SCF）：提供事件驱动的无服务器计算服务，用于处理React应用的后端逻辑。
- 云监控（Cloud Monitor）：提供全面的监控和告警服务，用于监控React应用的性能和运行状态。
更多关于腾讯云产品和服务的详细信息，请访问腾讯云官方网站：https://cloud.tencent.com/
相关·内容
1回答
你好，我正在尝试用checkbox的数据构建一个新的组件，为了做到这一点，我有以下代码：
import React from "react";
import BottomScrollListener from "react-bottom-scroll-listener";
import ThingsQuery from "./../querys/ThingsQuery";
import "./styles/Things.scss";
export default class Things extends React.Compon
浏览 2提问于2020-08-16得票数 0
我被告知，如果父母的道具发生变化，孩子不会重新呈现，而是如果父母的状态发生变化。
在下面的情况下，当我单击按钮，子重呈现，这是合理的，因为它的父母的状态是被触发的，但我不知道为什么孙女也得到重新渲染！它的父母的状态(孩子的状态)没有改变。
那么这里的规矩是什么？
会是什么情况：
1)应用程序只呈现一个子和外孙呈现？
2)应用程序呈现但独生子女不呈现孙女？
顺便说一句，我不是指如何使用或pureComponent，我只是想知道React如何呈现嵌套的子程序:)
import React, { useState } from "react";
const App = () =&g
浏览 1提问于2019-11-17得票数 2
回答已采纳
我正在尝试使用useRef viz清除react表组件的filtered状态。ref.current.setState({...})。这是我的组件中的一段代码：
const Customers = (props) => {
const customerTableRef = useRef()
useEffect(() => {
const customerTable = customerTableRef.current
if (customerTable) {
customerTable.setState({ ...customerTable.s
浏览 4提问于2020-03-17得票数 0
1回答
我创建了一个简单的redux应用程序。在工具中，我检查“高亮更新”。然后单击任意按钮，显示所有组件都已更新，但"AddButton“中的控制台消息没有显示任何内容。错误控制台，反动开发工具还是我？
// index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { Provider } from "react-redux";
import { createStore } fro
浏览 1提问于2019-02-22得票数 1
回答已采纳
父类有几个子组件，所有子类都在呈现方法中实例化，因此，对父状态的任何更改都会导致所有子实例重新实例化，每次调用react创建子实例的新实例，在那里通过子实例的松散状态，以便重用我尝试使用parent.refs.childRef检索子实例的子实例，但这给我带来了错误。
未明错误:对象作为一个React子对象无效。
，这是我的密码
placeHolderComponent(){
let component;
let palceHolderValue=this.state.uiState.placeHolder;
let classInstan
浏览 4提问于2016-12-02得票数 2
我的React组件需要一个ajax调用才能使数据呈现出来。
最初，我使用这种方法在render中启动了ajax调用。这是我的伪代码..。
export class MyView extends React.Component<any, any> {
hasAjaxData: boolean = false;
renderAndGetData() {
const data = {
};
AjaxCall(data)
.then((results) => {
浏览 5提问于2017-04-26得票数 1
所以我试着用react调用一个简单的后端服务(仅供参考，我对react或javascript不太了解)
import React from 'react';
import logo from './logo.svg';
import './App.css';
const {EchoRequest, EchoResponse} = require('./proto/api_pb.js');
const {EchoServiceClient} = require('./proto/api_grpc_web_pb.js'
浏览 0提问于2020-08-22得票数 1
基本上，我有一个非常简单的react组件。它所做的就是包装“react-intercom”，并且只有在状态发生变化时才会呈现它。为了简化这个问题，我将shouldCompoenentUpdate()方法硬连接为总是返回false。
import React from 'react';
import Intercom from 'react-intercom';
class IntercomWrapper extends React.Component {
shouldComponentUpdate(nextP
浏览 6提问于2017-09-13得票数 15
在React Native中更改“全局”变量时，我遇到了最困难和最沮丧的时刻。我是这个语言的新手，然而，这应该比它明显要简单得多。似乎‘全局’变量是‘只读’的，并且不能是changed...but，我觉得这是不可能的。是否与React导航的使用有关？下面是一些代码。首先，我创建一个.js文件来保存我的“全局”变量对象： //'globals.js'
module.exports = {
STATUS: 'false',
}; 现在我的主要代码是'app.js'： //'app.js'
import React, { use
浏览 39提问于2020-06-24得票数 0
回答已采纳
1回答
我想实现子程序的排序功能，其中道具是通过一个axios调用从父函数传入的--我应该吗？
在子useState中存储道具
从道具传入父setState来实现这一点？
假设我不需要父母重新排序，我的想法是1可能更有利-只是我不确定在setState中存储道具是一种常见的模式。
第一个案例() -在子useState中存储道具
父母jsx
import { useEffect, useRef, useState } from "react";
import "./styles.css";
import Child from "./Child&#
浏览 4提问于2022-05-22得票数 0
我有一个父组件和子组件，在我的示例中，当单击“增加”按钮时，子组件将被重新命名。
import React, {useEffect,useState} from 'react';
export const App = (props) => {
const [count, setCount] = useState(0);
const handleCount = ()=>{
setCount(count+1);
}
useEffect(()=>{console.log("Parent was rerendered")})
浏览 3提问于2022-08-01得票数 1
我正在尝试创建一个函数，当单击“下一步”按钮时，它将传递给我的api的另一个随机对象。但是我不能执行这个函数，检索其他值，并在浏览器中更新信息。 App.js import React, { Component } from 'react';
import './App.css';
class App extends Component {
state = {
data: [],
chosenPlanet: 0,
}
componentDidMount() {
const url = 'http://localho
浏览 8提问于2019-04-15得票数 0
回答已采纳
我刚开始ReactJS，我仍然有问题的理解状态和道具。
我正在尝试使用node.js、React和Socket.io构建一个聊天应用程序。在服务器端，一切都很好，但是，我很难显示数据。
我的问题是:我有一个包含三个组件的应用程序，如下所示：
聊天室-- MessageList区- MessageInput
我希望聊天组件包含由服务器和messageInput组件提供的消息列表。
因为Chat组件将保存状态，所以我有一个初始化两个变量的构造函数。但是，当我从messageInput更新这些变量时，组件将被重新呈现，导致再次调用构造函数并重新初始化状态。
class Chat extends Re
浏览 0提问于2019-10-18得票数 0
回答已采纳
这个问题我已经面临了几天，我正在制作一个功能组件。我正在通过onPress方法改变状态，控制台给了我想要的相同的数据，但是没有用更新后的数据重新渲染。这是零食
https://snack.expo.io/@dharmendrasha/scroll-view-search-here
这是一个示例代码
import React, { Componenet, useState } from 'react';
import { Text, View, StyleSheet, SafeAreaView, ScrollView } from 'react-native';
浏览 7提问于2020-05-12得票数 0
回答已采纳
我知道之前有人问过这个问题，但解决方案与我构建/编写React应用程序的方式不同，如下所示。如何基于更新的listData使用一次更新/渲染 import React, { useState } from "react";
const PageName = () => {
const [listData, setlistData] = useState([]);
function add(){
let newrow = {};
listData.push(newrow);
setlistData(listData);
}
浏览 55提问于2021-10-07得票数 0
回答已采纳
1回答
创建时钟的反应
、、、、
我有一个网站，我想把一个实时时钟在其中一个网页。我已经用钩子编写了代码，但我明白在这种情况下使用钩子会对性能造成不良影响，因为每秒钟都会有状态重发。是否有一个资源密集程度较低的解决方案？
import { useEffect, useState } from 'react'
export default function Footer() {
const [time, setTime] = useState()
useEffect(() => {
setInterval(() => {
const dateObject = new
浏览 5提问于2022-01-16得票数 0
回答已采纳
我有一个有2个子组件的组件。
React.createClass({
getInitialState: function(){
return {ch_1 : 'Child 1', ch_2: 'child_2'};
},
_onChange : function(e){
var value = e.target.value;
var id = e.target.id;
if(id == '1'){
this.setState({ch_1 : value})
浏览 0提问于2017-05-24得票数 0
我正在尝试在useEffect中使用useState。我想要访问和修改其中的一个状态( useEffect )，这里命名为isAuth，并根据新的状态呈现组件。
import React, { useState, useEffect } from 'react';
const Authentication = () => {
const [isAuth, setIsAuth] = useState(false);
useEffect(() => {
console.log(isAuth);
setIsAuth(tr
浏览 17提问于2019-08-16得票数 3
为了方便演示，我在中简化了我的问题。把这个计数器类想象成一个更复杂的外部Lib。
解释
我有一个类，它的属性为count，方法将增加该计数。
interface Counter {
count: number;
increment(): void;
autoIncrement(): void;
}
export class MyCounter implements Counter {
public count: number;
constructor() {
this.count = 0;
}
public increment() {
this
浏览 6提问于2022-01-13得票数 1
3回答
对于react，我们可以使用setState来改变状态，比如这里的setdummyData，在下面的代码父组件中，使用object header: 2017初始化dummyData，并将对象传递给子组件，并将对象更改为dummyData.header = 2018，但父组件对象正在更改。 我想知道背后的原因。 请参考以下代码片段 import React, { useState } from "react";
import Child from "./Child";
const Parent = () => {
const [dummyData,
浏览 12提问于2020-04-23得票数 0
回答已采纳
import * as React from "react";
// import "./style.css";
export default function App() {
let [width, setWidth] = React.useState(window.innerWidth);
let [height, setHeight] = React.useState(window.innerHeight);
React.useEffect(() => {
console.log("us
浏览 14提问于2022-11-17得票数 2
1回答
当我与某个状态管理器一起使用(我使用的是recoil.js)时，我尝试用react更新状态，它只在状态与原始状态不同时才调用useEffect。当我在讨论组件重登程序的堆栈溢出时，他们谈论的是类组件，以及每次调用setState时如何呈现。这只是两个组件类型之间的区别，还是我只是误解了它？
这是我对函数组件的代码测试：
import React, {useEffect} from 'react'
import ReactDOM from 'react-dom'
import {atom, useRecoilState, RecoilRoot} from '
浏览 4提问于2021-01-12得票数 1
回答已采纳
1回答
我添加了redux来创建-react，并且我一直试图让一个导航器工作。我是通过突出显示活动的“页面链接”来做到这一点的。我使用的代码是react (使用状态来记住当前页面)和npm包classNames的组合。
classNames(object‘’key‘& classes.activeItem)
因此，在激活特定项时，我有对象‘’key‘求值为true，以便项目获得activeItem类。
当我将对象‘’key‘替换为true时，它就有效了。当我单击console.log对象‘’key‘后，它的计算结果也为true。
为什么这不管用？谢谢!
import React, { useE
浏览 0提问于2019-06-07得票数 1
回答已采纳
有这样一个简单的反应应用程序：
import React, { useState, useRef, useEffect } from "react";
import ReactDOM from "react-dom";
import "./styles.css";
function App() {
console.log("App")
const [inputValue, setInputValue] = useState(0);
return (
<>
<input
浏览 5提问于2022-05-05得票数 1
我遇到了一个问题，在这个问题上，制造一个包含路由到容器的组件似乎会破坏响应路由器。如果容纳我的路线的组件是一个容器，那么单击一个链接就会更新URL，但是不会改变呈现的屏幕。如果我在URL更改后刷新页面，或者直接转到url，它就会呈现预期的视图。将容器更改为常规组件似乎解决了这个问题，但我希望将其保留为容器，以便可以使用必要的操作。
路线中断：
import React, { Component } from 'react'
import { Route } from 'react-router-dom'
import { bindActionCreators
浏览 3提问于2017-11-10得票数 0
回答已采纳
2回答
假设我实现了这样一个简单的全局加载状态：
// hooks/useLoading.js
import React, { createContext, useContext, useReducer } from 'react';
const Context = createContext();
const { Provider } = Context;
const initialState = {
isLoading: false,
};
function reducer(state, action) {
switch (action.type) {
ca
浏览 1提问于2020-01-31得票数 9
回答已采纳
我试图在鼠标悬停时添加一个css类，就像react文档中提到的那样，但我不确定为什么它不能工作。请帮帮忙 index.js： import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
function App() {
let className = "";
return (
<div className="App">
<h1
classNa
浏览 18提问于2019-03-15得票数 1
回答已采纳
对不起，reactjs初学者，下面有两个代码，我不明白为什么当我使用“第一段代码”时，我得到无限循环(在浏览器控制台中无限注销'123‘)，当我使用“第二个代码”时，我没有无限循环(在浏览器控制台中只注销两个'123’)，为什么当我用“第一个代码”获得无限循环时，为什么不使用“第二个代码”来获得无限循环呢？
(第一段代码)导致无限循环：
[Parent.js]
const randomFunc = (dataFromChildComponent) => {
setData(dataFromChildComponent);
};
[Child.js]
useEffec
浏览 2提问于2021-07-31得票数 0
回答已采纳
1回答
抽屉打不开
、、、
晚上好。我有一个我认为很容易解决的问题，但我不能解决它，因为我只是react的初学者。问题是，我放在应用程序栏中的抽屉打不开，控制台上也没有关于它的错误，所以我需要你们的帮助。附言:很抱歉我的英语不好，我是巴西人。
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from 'material-ui/styles';
import Drawer from 'material-ui/Drawer';
import
浏览 7提问于2018-01-06得票数 1
在一个简单的程序中，我想增加或减少糖果的数量，然后将其成本(* 5，因为一颗糖果的成本是5美元)打印到输入框。有人能帮上忙吗？
class App extends React.Component {
state = {
candy: 0,
candyPrice: 0
}
render() {
return (
<div>
<input type="number" value={this.state.candy} onChange={this.alpha} name="candy"
浏览 1提问于2019-01-07得票数 0
所以，我有一个用于主菜单的react组件。
它是指向不同页面react-router <Link/>的列表。每个链接都会检查window.location.path以确定它是否是活动页面，以便活动菜单项可以以不同的方式呈现。
import React, { Component } from "react";
import { Link } from "react-router-dom";
import { connect } from "react-redux";
import List from "@material-ui/
浏览 0提问于2018-09-25得票数 2
在这种情况下，我将为子组件发送相同的属性和状态，所以...为什么没有在没有React.memo()的情况下重新渲染，并且这些日志只显示了一次？
import React, { useState } from 'react';
import ReactDOM from 'react-dom';
const Child = ({ num }) => {
const [count, setCount] = useState(0);
return (
<>
{console.log('Child render
浏览 1提问于2020-11-04得票数 0
3回答
我有这样一段简单的代码：
ReactDOM.render(<Change />, document.getElementById('app'));
function Change() {
const [i, setI] = React.useState(0);
let rnd = 9;
if (i !== rnd) {
setTimeout(() => {
setI(i + 1);
}, 500);
}
React.useMemo(() => {
浏览 4提问于2020-05-17得票数 0
回答已采纳
我也看到过其他几个同样错误的问题，但它们似乎不能解决我的问题。
我有一个反应引导模式，我试图从子组件中的一个按钮打开，但我得到以下错误。
这是父组件：
OnboardPage.jsx
import React from 'react'
import { Row } from 'react-bootstrap'
import { PersonalDetails } from './personalDetails'
import { EmailVerification } from './emailVerification'
浏览 2提问于2020-09-12得票数 0
回答已采纳
在这个例子中，我使用memo来防止组件重新渲染，但是，即使项目属性没有改变，它也会在每次单击按钮时重新渲染。根据react文档，只有当道具被更改时，带有备忘录的组件才不会重新呈现。
import React, { memo, useContext } from "react";
import { BasketContext } from "./Context";
const ItemCard = React.memo(({ item }) => {
const [basket, setBasket] = useContext(BasketContex
浏览 6提问于2021-06-01得票数 0
import React from "react"
import { useState } from "react"
export default function App() {
const [count, setCount] = useState({ c: 0 })
console.log(new Date().toString())
console.log(`Object output ${count.c}`)
return (
<div>
<p>{new Date().toString()
浏览 12提问于2021-01-31得票数 0
回答已采纳
我目前正在使用reactjs和redux将谷歌地图导入到我的项目中。
但是每当我点击标记或者只是放大，整个地图就会重放，而地图会变成灰色，然后用相同的标记重新绘制相同的地图。
我尝试过使用shouldComponentUpdate，它成功地停止了render()函数的调用，但是映射仍然在重新生成！
单击标记的事件侦听器
window.google.maps.event.addListener(marker, 'click', ()=>{
this.props.dispatch(Map.showChatroom(id, title));
});
shouldCompon
浏览 0提问于2018-03-19得票数 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
回答已采纳
我从React学到的一件事是，如果组件的道具没有改变，那么React就不会费心重新渲染组件。对于无状态组件也是这样吗？或者它们的行为更像是“愚蠢的”函数，并且每次都会被执行？
例如，如果我有：
import StatelessComponent from '../StatelessComponent';
export default class DocumentsTable extends React.Component {
state = {
something: 'foobar',
};
render() {
return (
浏览 1提问于2017-10-14得票数 51
回答已采纳
1回答
寻求建议:最大更新深度超过的原因
、、、、
我是第一次接触React和GraphQL。尝试使用GraphQL订阅源更新React状态，但生成更新深度错误。
以下是简化的代码：
import { Subscription } from 'react-apollo';
...
function Comp() {
const [test, setTest] = useState([]);
const Sub = function() {
return (
<Subscription subscription={someStatement}>
{
r
浏览 0提问于2020-02-24得票数 0
2回答
import React, { useState } from "react";
function App() {
const [name, setName] = useState("");
const [headingText, setHeadingText] = useState("");
function handleChange(event) {
// console.log(event.target.value);
setName(event.target.value);
}
function
浏览 15提问于2021-05-22得票数 0
我在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
回答已采纳
一旦this.setState()被调用，React组件是否会对其state进行一些检查，以查看state是否已更改。因此，在调用componentDidMount之后，将不再有一个协调阶段，如下面的代码所示：
// in constructor
this.state = {width: 0}
...
// in componentDidMount method
this.setState(() => ({ width: 0 }))
或者我需要手动执行这些检查，例如：
const width = getViewportWidth()
if (this.state.width !== wi
浏览 1提问于2018-01-05得票数 2
1回答
我有一个简单的反应应用程序使用mqtt-反应钩和redux。每当订阅者收到新消息时，我想更新我的redux存储。
Subscriber.tsx
import React, { useEffect} from 'react';
import { useSubscription } from 'mqtt-react-hooks';
import { useAppDispatch } from '../features/item/hooks';
import { addItem } from '../features/item/item-s
浏览 3提问于2021-11-30得票数 1
回答已采纳
1回答
在阅读了关于不变性的文章之后，我试图了解react是如何工作的。我试图理解以下三个组成部分的帮助，但这是没有意义的。
const bla = {a: 1};
class Test extends React.Component {
constructor(props) {
super(props);
this.state = {
a: 1,
};
this.onClick = () => this.setState(prevState => ({
a: prevState.a + 1
}));
}
re
浏览 0提问于2019-09-05得票数 0
回答已采纳
1回答
路由器文件中的几乎所有组件都会无限运行。不知道有什么问题。由于此问题，ajax请求会发送无限的GET请求。
所有的文件看起来都像这样。
import React, { useState, useEffect } from "react";
import { connect } from "react-redux";
import { apiCall } from "../handlers/api";
import BasicTable from "../reusable/table";
import { loadFields }
浏览 45提问于2021-02-20得票数 0
回答已采纳
类组件
在React类组件中，我们被告知setState 总是会导致重呈现，而不管状态是否实际更改为新值。实际上，组件将在状态更新到之前相同的值时重新呈现。
除非setState()返回false，否则shouldComponentUpdate()总是会导致重呈现。
钩子(功能组件)
但是，使用钩子，文档指定将状态更新为与前一个状态相同的值，not将导致(子组件的)重呈现：
退出状态更新
如果您将状态挂钩更新为与当前状态相同的值，则React将在不呈现子状态或触发效果的情况下退出。(React使用Object.is比较算法。)
密切相关的问题
类组件中的this.s
浏览 0提问于2019-03-27得票数 35
回答已采纳
3回答
我有一个react-bootstrap模式，里面有两个输入。当状态中的showModal属性更改为true时，将显示Modal。当输入值发生变化时，我会更新fieldOne属性(也在状态中)。所以，每当我在输入中输入一些东西时，模式也会闪烁(重新渲染)。
如何在更新状态时防止Modal重新渲染？
浏览 17提问于2020-02-03得票数 0
回答已采纳
下面是我的代码：
function State(){
var [msg,set_msg]=React.useState("hello") //not rendered, just to force render
var [data,set_data]=React.useState({version:1})
function onClick(){
set_msg(x=>x+'x') //just to force render
data.version+=1 //changing state in place, but it still
浏览 0提问于2021-01-13得票数 2
回答已采纳
2回答
在React中，当组件的道具/状态发生更改时，组件会重新呈现。
redux是如何知道(计算)什么特定的组件(DOM)呈现/重新呈现时，一个动作被分派？
浏览 0提问于2018-09-25得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
