为什么状态更新时react组件不会重现？
在React中，组件的状态更新不会导致组件重新渲染的原因是React采用了虚拟DOM（Virtual DOM）的机制。
虚拟DOM是React的核心概念之一，它是一个轻量级的JavaScript对象，用于描述真实DOM的层次结构和属性。当组件的状态发生变化时，React会通过比较前后两个虚拟DOM的差异，然后只更新需要变化的部分，而不是重新渲染整个组件。
这种优化机制带来了以下几个优势：
- 性能优化：由于只更新变化的部分，减少了不必要的DOM操作，提高了渲染效率，使应用更加流畅。
- 减少重复渲染：React会自动比较前后两个虚拟DOM的差异，只更新需要变化的部分，避免了重复渲染相同的内容。
- 组件状态的保留：组件的状态是保存在内存中的，而不是在DOM中。因此，即使组件重新渲染，状态也会得到保留，不会丢失。
- 简化开发：开发者无需手动操作DOM，只需关注组件的状态和数据变化，让React自动处理DOM更新。
在React中，组件的状态更新通常是通过调用setState方法来触发的。当调用setState时，React会将新的状态与当前状态进行比较，然后生成新的虚拟DOM，并更新到真实DOM中。
对于状态更新不引起组件重新渲染的情况，可能是因为以下几个原因：
- 状态没有发生变化：如果新的状态与当前状态相同，React会认为没有变化，不会触发重新渲染。
- shouldComponentUpdate方法返回false：在React组件中，可以通过重写
shouldComponentUpdate方法来控制组件是否重新渲染。如果shouldComponentUpdate方法返回false，React会认为组件不需要重新渲染。
需要注意的是，虽然React的虚拟DOM机制可以提高性能，但在某些情况下，可能会出现不必要的重新渲染。为了进一步优化性能，可以使用React的性能优化工具，如React.memo、React.PureComponent等，或者手动进行性能优化，例如使用shouldComponentUpdate方法进行组件的自定义比较逻辑。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云官网：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 Explorer）：https://cloud.tencent.com/product/iotexplorer
- 移动推送服务（信鸽）：https://cloud.tencent.com/product/tpns
- 云存储（COS）：https://cloud.tencent.com/product/cos
- 区块链服务（BCS）：https://cloud.tencent.com/product/bcs
- 腾讯云元宇宙：https://cloud.tencent.com/solution/virtual-universe
相关·内容
1回答
每次单击increment按钮时：
期望:当前count已记录
实际：count的初始值，即记录为3
import React, { useState, useEffect } from "react";
function SomeLibrary(props) {
const [mapState, setMapState] = useState(undefined);
useEffect(() => {
console.log("setting map");
// Run exactly once at mount of com
浏览 1提问于2020-07-22得票数 1
在我的React-Native应用程序中，我有一个通过跟随"“呈现每一行的ListView。在我的行中，我有两个自定义的TouchableHighlight组件。当我在我的行中按下"Delete“按钮时，我希望它替换整行或该行中的所有按钮组件，并显示一个文本组件，显示"This item has Delete”。
有谁知道如何做到这一点吗？我不确定如何将子组件的onPress方法(删除按钮)链接到父组件(行)，并让行将其内容替换为文本组件。
浏览 5提问于2017-07-25得票数 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
回答已采纳
我对以下虚拟组件进行了一些测试，在执行过程中(在控制台中)，我得到了以下结果：
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
回答已采纳
1回答
我搞不懂为什么useState不从它的参数props中设置变量。 该片段为： import React, { useState } from 'react';
const FormContainer = (props) => {
console.log('[FormContainer props]', props); // line 7
const [prevState, setPrevState] = useState(props);
console.log('[FormContainer]', prevState);
浏览 21提问于2019-03-24得票数 1
回答已采纳
1回答
componentDidMount()只调用了一次，但其中的分派和订阅函数被调用了多次...此函数的第一行只执行第一次，但每次重新呈现我的组件时都会调用订阅函数。react如何在不遇到console.log(“已挂载”)的情况下到达订阅函数，即函数的第一行？
componentDidMount() {
console.log("mounted"); //executed just once
const {store}=this.props;
store.subscribe(()=>{
console.log("S
浏览 4提问于2021-07-19得票数 1
对不起，reactjs初学者，下面有两个代码，我不明白为什么当我使用“第一段代码”时，我得到无限循环(在浏览器控制台中无限注销'123‘)，当我使用“第二个代码”时，我没有无限循环(在浏览器控制台中只注销两个'123’)，为什么当我用“第一个代码”获得无限循环时，为什么不使用“第二个代码”来获得无限循环呢？
(第一段代码)导致无限循环：
[Parent.js]
const randomFunc = (dataFromChildComponent) => {
setData(dataFromChildComponent);
};
[Child.js]
useEffec
浏览 2提问于2021-07-31得票数 0
回答已采纳
2回答
我对react & TypeScript还是个新手。
我正在尝试修改一些功能，但做起来很困难。
目前，我们在同一页上显示所有订阅和所有事务，而我想要做的是，基于订阅选择，显示所有事务(当前订阅和事务都是兄弟)。
我已经在订阅上创建了一个单击事件，它调用handleViewTransaction
问题是我不能从handleViewTransaction重新渲染TransactionsTable。
我需要让它成为父子吗?或者有一种方法可以在不进行太多代码重构的情况下实现它？
import * as React from 'react'
import {RouteCompon
浏览 14提问于2020-02-18得票数 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
回答已采纳
1回答
语义UI侧边栏不会显示-反应
、、、、
我目前正在使用React中的语义UI在我的AppBar上实现一个侧边栏。到目前为止，我已经记下了：
import React, { Component } from 'react'
import { Menu, Segment, Dropdown, Icon, Button, Sidebar, Dimmer } from 'semantic-ui-react'
import { LogInButtonEX } from './LogInButton.jsx'
import { IndicateursEX } from './Indicat
浏览 2提问于2017-07-24得票数 0
回答已采纳
在下面的示例中，子组件上的display状态的值从不更新，即使show参数在true和false之间切换也是如此。
我希望它接收到值并进行相应的更新。有人能详细解释一下为什么这不起作用吗？
(我知道我可以在其中使用useEffect回调和setDisplay(显示)，但我想知道为什么像这样更简单的方法不起作用)
function Child({ show }) {
const [display] = React.useState(show);
console.log({ show, display });
return display ? "Message!" :
浏览 0提问于2020-07-25得票数 0
据我所知，FlatList extraData属性用于在组件发生更改时重新呈现组件。
所以，想象一下这个例子：
import React from 'react';
import { View, TouchableOpacity, Text, FlatList } from 'react-native';
export default function App() {
const [selectedId, setSelectedId] = React.useState(null);
const items = [
{
id: &#
浏览 3提问于2021-11-11得票数 1
当我单击导航栏组件时，无论我当前在哪条路线上，都会重新渲染。我不确定为什么会发生这种事。没有传递给正在更改的路线的道具。简化的代码如下。如果需要，我可以提供更多。
const App = () => {
const [drawerOpen, setDrawerOpen] = React.useState(false);
const handleDrawerToggle = () => { setDrawerOpen(!drawerOpen) };
return (
<Router>
<NavBar
浏览 3提问于2021-03-18得票数 0
2回答
我有一个带有子图表组件的主组件。在连接到websocket时，主组件更新子图表组件的状态。但是，这不会重绘。但是，当我单击图表时，标签会出现，当我再次单击时，值会与标签一起出现。
Main.js：
import IO from 'socket.io-client';
import React from "react";
import { Switch, Route } from 'react-router-dom';
import { Chart } from "./Chart";
let ftse100Tickers = r
浏览 0提问于2018-03-19得票数 2
我在react中使用gsap制作了一个自定义光标。我不能理解为什么当光标移动时会发生渲染，尽管我没有改变状态？
谢谢。
浏览 32提问于2020-02-08得票数 0
1回答
我有两个React功能组件：C1和C2。C2嵌套在C1中 const C2 = () => {
console.log("C2 Render");
return (
<div>I am Component 2</div>
);
};
const C1 = () => {
const [text, setText] = useState("Hello");
const MC2 = React.memo(C2, () => true);
return (
<div cl
浏览 9提问于2021-09-23得票数 0
回答已采纳
我正在学习react.js
工作示例如下所示：
代码如下
<!DOCTYPE HTML>
<html>
<head>
<title>React Template</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<style type="text/css">
.my
浏览 0提问于2017-09-11得票数 0
我用react chartjs做了一个折线图。图表工作得很好，但是当我尝试更新图表时，它没有更新。虽然我可以更改图表的数据。请帮帮忙。我尝试在单击图例时更新图表。我看了一些教程，发现like更新功能会对我有帮助。但是，当我在我的代码行中尝试更新函数时，它显示了一个错误：“未定义的更新函数”。 import React from 'react';
import {Line} from 'react-chartjs-2';
const checkinsData={
labels:['4 P.M','5 P.M',
浏览 58提问于2020-04-01得票数 1
回答已采纳
当您按下键：()时，此组件总是警告0。
const Hello = () => {
const [counter, setCounter] = React.useState(0)
let canvas = React.useRef()
let add = () => {
setCounter(counter + 3)
alert(counter)
}
React.useEffect(() => {
window.onkeydown = add
}, [])
return <div><h1>{count
浏览 3提问于2020-07-29得票数 1
回答已采纳
每次调用setState()时是否重新呈现所有组件和子组件？
如果是，为什么？我认为，当时的想法是，只有在状态发生变化时，才能做出尽可能少的反应。
在下面的简单示例中，两个类在单击文本时都会再次呈现，尽管在随后的单击中状态不会改变，因为onClick处理程序总是将state设置为相同的值：
this.setState({'test':'me'});
我原以为只有当state数据发生更改时，才会出现呈现。
下面是示例和嵌入式代码段的代码：
var TimeInChild = React.createClass({
render: function()
浏览 17提问于2014-07-13得票数 641
回答已采纳
重新呈现react组件时，该组件的状态会发生什么变化？
它是保持不受影响，还是被重置为某个“默认值”？为什么？
浏览 1提问于2020-06-27得票数 0
4回答
我在学反应。我正在构建计数器应用程序。我认为下面的代码和react中的状态是相同的。console.log打印正确，但在html中它不会更改值。你能解释一下为什么密码不起作用吗？
import React, {useState} from "react";
let count = 0;
const Counter = (props) => {
const setCount = ()=> {
count = count + 1;
};
return (
<div>
<b
浏览 2提问于2020-03-12得票数 0
回答已采纳
嗨，我有两个react组件parent和child，它们都连接到redux store到同一个对象，对象从服务器asynchronously获取数据。
问题：在接收新道具时，父母的componentWillReceiveProps会被执行，但是孩子的componentWillReceiveProps没有执行任何想法？？
子组件
import React, {Component} from 'react';
import {bindActionCreators} from 'redux';
import {connect} from 'react-redu
浏览 2提问于2017-08-14得票数 1
1回答
我想在我的react应用程序中加载所有脚本时触发一个函数。我的应用使用热加载器(react- hot -loader)。当页面上的所有脚本都加载并执行时，如何触发一些事件。谢谢!
我像这样加载模块/组件：
export const Root = hot(RootUnwrapped);
浏览 4提问于2019-04-10得票数 1
我正在导出在项目根组件中使用的钩子的返回。然后，其他组件很容易导入globalState和setGlobalState ()。
我在这里做了几次测试，效果很好。问题是，我从来没有见过社区中有人以同样的方式使用它。
import React, { useState } from "react";
import Level2 from "./components/Level2";
export let setGlobalState = () => {};
export let globalState = {};
const initalState = {
浏览 0提问于2019-03-25得票数 1
回答已采纳
为什么“初始结果”和“最终结果”在控制台中是相同的，尽管html中的state.result是不同的和正确的？我搞错了吗？我希望有一个文本输入，以更新结果时，您键入。另外，当你删除一封带有退格的信件时，它不会更新。
我在控制台中打印了值，但这是因为值是过去的，而不是当前的。
import React from 'react';
export default class TQValueCalculator extends React.Component {
constructor(props) {
super(props);
this.state = ({re
浏览 0提问于2019-01-23得票数 1
回答已采纳
我正在了解React中的ErrorBoundaries，并想知道为什么以及如何在getDerivedStateFromError方法中设置状态？
// REACT
import React from 'react';
export class ErrorBoundary extends React.Component {
state = {
isThereError: false
}
static getDerivedStateFromError(error) {
return {
isThereError: true
}
浏览 3提问于2021-10-05得票数 1
回答已采纳
我正在查看中的一个示例
...
export const TextFieldControlledExample: React.FunctionComponent = () => {
const [firstTextFieldValue, setFirstTextFieldValue] = React.useState('');
...
const onChangeFirstTextFieldValue = React.useCallback(
(event: React.FormEvent<HTMLInputElement | HTMLTextA
浏览 11提问于2021-03-02得票数 1
我使用React来呈现输入的type=“文本”。我知道，如果使用value属性，React将呈现只读文本框。因此，我自己编写了一个小组件(见下文)。
React.createClass({
getInitialState: function() {
var self = this;
return {value: self.renderDefault(self.props.value, '')};
},
handleOnChange: function(event) {
this.setState({valu
浏览 4提问于2015-05-08得票数 3
回答已采纳
我有一个父组件和子组件，在我的示例中，当单击“增加”按钮时，子组件将被重新命名。
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
import React, { Component } from "react";
import LogIn from "./LogIn.js"
import User from "./components/User.js"
class App extends Component {
constructor(props) {
super(props);
this.state = {
projectList: [],
myProjects: [],
浏览 21提问于2020-05-31得票数 0
回答已采纳
当用户发表评论时，我正在尝试触发重新渲染。所以我使用了setState。似乎不会重新渲染。我想在每次处理提交时重新渲染。
我只是对它进行了编辑，所以它不是一个承诺；这是我的错误。但是它似乎不能重新渲染。
这是this.state.comments所在的容器。它只是预先写好的。这样我就不用在构造函数中做了。
import React from 'react';
class CreateForm extends React.Component {
constructor(props) {
super(props);
this.state
浏览 1提问于2020-01-18得票数 0
如果我从主屏幕转到产品详细信息屏幕，然后转到购物车屏幕，则状态更新工作正常，但如果从购物车屏幕添加或删除项目，然后导航回产品详细信息或主屏幕，则状态未更新，为什么？查看下面的vudeo链接：
我正在使用redux，但是即使redux存储状态被更新，它仍然不能呈现更新状态的组件，为什么呢？
我正在考虑使用react导航事件，但是我得到了错误，为什么？如何解决这个问题？这是redux问题还是react导航问题？当导航回到上一个屏幕时，组件是否会重新呈现？
如果我刷新模拟器屏幕，那么状态被正确地更新和显示，为什么会发生这种情况？
我想要重新渲染Home component时，聚焦回来，但得到错误。为
浏览 0提问于2020-02-23得票数 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
我有一个简单的组件示例，它使用useRef()来计算我的组件已经呈现的次数，使用useState()来维护一些状态：
const {useState, useRef} = React;
const App = () => {
const [counter, setCounter] = useState(0);
const renderCount = useRef(0);
const onClick = () => {
setCounter(1);
}
renderCount.current++;
alert("rendering");
浏览 4提问于2021-08-05得票数 3
下面是我的content.jsx
var React = require('react');
var Reflux = require('reflux');
var ApplyInfo = require('./applyInfo');
var Actions = require('../actions/actions');
var DataStore = require('../stores/data-store');
module.exports = React.createClass({
mixi
浏览 2提问于2016-01-26得票数 2
回答已采纳
当我单击运行函数update的按钮时，我不知道为什么组件不自动重新呈现。我看到后点击按钮，状态更新，但列表不会自动重新呈现。当调用setFoobar时，组件不是应该重新呈现吗？
import React, { useEffect, useState } from "react";
const SomeList = () => {
const [foobar, setFoobar] = useState([
{
description: "description1",
date: "date1",
浏览 3提问于2022-02-13得票数 1
回答已采纳
我正在处理一个带有交互式输入的表单。他们必须用信息实现自己进入父级状态。 我使用Axios来显示数据，从外部API获取它们。我尝试设置默认值，但它们从未使用较新的值实现。 class Form extends React.Component {
getData() {
axios.get('http://xxx/getform/').then(
res => this.setState(res.data)
);
}
componentDidMount() {
this.ge
浏览 22提问于2019-01-29得票数 1
回答已采纳
因此，React有UseState钩子，我们应该这样使用它。
const [value, setValue] = useState(0);
如果我们想要改变一个值，它应该写成这样：
const increase = () => {
setValue(value + 1)
}
为什么不可能这样写？为什么我们需要setValue？
const increase = () => {
return value + 1;
}
我知道这是行不通的，但我找不到解释为什么会这样。
浏览 8提问于2022-11-05得票数 1
回答已采纳
5回答
理解异步反应呈现
、、
我刚开始学习React，我想知道为什么下面的代码不能像预期的那样工作。我以为它会显示The numbers: 0123，但它只显示0。对于基于类的组件，我也使用了相同的方法，使用钩子和我仍然得到了相同的结果。我对使用异步代码的react呈现有什么不理解的？
import React from "react";
import ReactDOM from "react-dom";
function App() {
let numbers = [0];
fetch("some.url")
.then(res => res.js
浏览 0提问于2019-03-13得票数 5
回答已采纳
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
回答已采纳
我有一个具有布尔状态的简单函数组件。和按钮来改变状态。
它最初被设置为true，所以当我按下true-按钮时，它不会呈现。
但是如果我按下false按钮，它就会重新呈现，如果我再次按false按钮，即使状态已经设置为false，它也会重新呈现。
有人能解释一下，当状态改变到完全相同的状态时，组件为什么会重新呈现？如何防止它重新呈现？
import React, {useState} from 'react';
const TestHooks = () => {
const [state, setState] = useState(true);
conso
浏览 3提问于2019-09-09得票数 9
回答已采纳
1回答
我正在尝试为我的Meteor应用程序实现分页，使用React和mongo。为此，我向我的订阅函数传递了一个极限支持，如下所示：
export default class BookListTable extends TrackerReact(React.Component) {
constructor(props) {
super(props);
var limit = this.props.LimitProp
limit = parseInt(limit) || 5;
this.state = {
subscription: {
booksData: Meteor.subscribe(&
浏览 0提问于2016-09-13得票数 0
回答已采纳
4回答
我正在用react和react-leaflet制作地图。React Leaflet有一个名为FeatureGroup的类，我希望在第一次呈现时使用React中的useRef钩子访问它，然后访问useEffect函数中的值。但是，在初始渲染时，引用是未定义的(markerRef.current返回null)。只有在我对代码进行任何类型的更改后，保存并重新加载React应用程序，它才会获得值
你能告诉我我做错了什么吗?我怎样才能使markerRef.current在初始渲染时不为空？
请在下面找到组件的缩写代码：
import {useRef} from 'react';
im
浏览 3提问于2021-01-29得票数 2
我编写了以下简单的代码
import React, { useState, useEffect } from "react";
export default function App() {
const [count, setCount] = useState(1);
useEffect(() => {
setCount(2);
}, [count]);
console.info("render: ", count);
return <div>{count}</div>;
}
控制台输出为
rend
浏览 3提问于2022-03-21得票数 2
回答已采纳
以下是代码：
import React, { useState } from 'react'
function App() {
const [a, setA] = useState(1)
setA(2)
return (
<div>
<h1>{a}</h1>
</div>
);
}
误差太多的重新渲染。React限制呈现的数量，以防止无限循环。
为什么它会导致无限循环？
我认为原因是函数组件就像呈现函数一样，所以当setState在render函数中时会导致无限循环。
有官方解释吗？
浏览 10提问于2020-02-20得票数 5
回答已采纳
1回答
我无法在react中更新状态。
state = {
products : []
};
handleProductUpVote = (productId) => {
const nextProducts = this.state.products.map((product)
=> {
if (product.id === productId) {
return Object.assign({}, product, {
votes: product.votes + 1,
});
浏览 1提问于2018-07-18得票数 1
我正在尝试创建一个本地化解决方案。
为了测试目的，我有以下结构
index.js
import { Provider } from 'react-redux';
import store from './store'; //This is a redux store
import LocalizedComponent from './components/containers/HomeContainer';
function App() {
return (
<Provider store={store}>
浏览 2提问于2017-03-27得票数 0
回答已采纳
当根组件的状态发生变化时，React.js假设重新呈现所有子组件(子组件)？
请看下面的示例：
在上面的示例中，只有Search子组件在Dashboard组件的状态发生变化时才重新呈现.但其他子组件-区段、图表和Widget不重新呈现.
这就是我的renderComponent的样子：
React.renderComponent(Dashboard({title: "D", children: [Section({title: "S", children: [Widget({title: "W"}), Chart()]})]}), documen
浏览 7提问于2014-05-22得票数 1
回答已采纳
import React, { useState } from "react";
function HookCounter() {
const [count, setCount] = useState(0);
return (
<div>
<button onClick={() => setCount(count + 1)}>Count {count}</button>
</div>
);
}
export default HookCounter;
每次需要重新渲染时，React
浏览 1提问于2019-11-08得票数 9
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
