为什么应用程序状态的更改不会导致在我的子组件中重新呈现？
应用程序状态的更改不会导致在子组件中重新呈现的原因是因为React使用了虚拟DOM（Virtual DOM）的概念来提高性能。虚拟DOM是React内部维护的一个轻量级的副本，它是一个JavaScript对象树，与真实的DOM结构保持同步。
当应用程序状态发生变化时，React会比较新旧两个虚拟DOM树的差异，并且只更新需要变化的部分。这个过程称为DOM Diffing。React通过比较虚拟DOM树的差异，找出需要更新的部分，并将这些变化应用到真实的DOM上，从而避免了不必要的DOM操作，提高了性能。
在React中，组件的重新渲染是由其props或state的变化触发的。当父组件的状态发生变化时，React会重新渲染父组件，并递归地重新渲染其子组件。但是，如果子组件的props或state没有发生变化，那么React会跳过子组件的重新渲染，从而节省了性能开销。
这种优化是基于React的"单向数据流"原则。在React中，数据是从父组件向子组件单向传递的，子组件不能直接修改父组件的状态。因此，当父组件的状态发生变化时，子组件的props也会发生变化，从而触发子组件的重新渲染。但是，如果子组件自身的状态没有发生变化，那么它不需要重新渲染。
总结起来，应用程序状态的更改不会导致在子组件中重新呈现是因为React使用虚拟DOM和DOM Diffing的机制来优化性能，只重新渲染发生变化的组件，避免不必要的DOM操作。这种优化是基于React的"单向数据流"原则，确保组件的重新渲染是可控且高效的。
相关·内容
1回答
为什么虚拟域不能阻止我的子组件重命名？
javascript、reactjs
我有一个父组件和子组件，在我的示例中，当单击“增加”按钮时，子组件将被重新命名。
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
1回答
没有通过道具更新ReactJs子组件
javascript、reactjs
目标:通过从父级的非状态变量发送道具来重新呈现独生子组件.
我想要重新呈现没有父组件的唯一子组件。下面是我编写的示例代码。cRoot是传递道具的父函数，CButton子组件需要在可见性变量更改时呈现。
在子组件中，我没有使用state，因为它曾经使用过，而且我不想将该值保持在状态中。另外，我不想创建作为纯组件的子组件。
在父类中，我希望使用变量(SubmitBtnVisibility)作为支持发送。
请解释为什么子组件没有更新，因为子组件的观点是道具正在更新？或者指向我哪里出错了？
提前谢谢你的帮助。
// Parent Component
class Root exten
浏览 1提问于2018-08-21得票数 3
回答已采纳
1回答
如果道具和状态没有改变，为什么响应组件更新？
javascript、reactjs、rendering
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
回答已采纳
1回答
渲染过程是如何反应的？
reactjs、higher-order-components
我刚开始对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
回答已采纳
4回答
React.js如何重新呈现组件？
reactjs
我是新来的。我在看他们的医生了解反应是如何运作的。因此，有人提到，当state/props/setState()更改/调用时，重新响应整个组件。
此外，我还看到react元素是不可变的，只有在发生更改时才会呈现它们。因此，当react试图呈现组件时，它实际上遍历所有元素，检查差异，并且只呈现数据被更改的元素。它不会简单地重新呈现整个组件。
我说得对吗？还是我的理解错了？
浏览 8提问于2020-10-23得票数 3
回答已采纳
2回答
如果数组发生变化，但是某些键保持不变，那么是否重新选择FOR循环的所有组件？
javascript、reactjs、react-redux
我正在实现无限的视频卷轴。每个组件都有一个惟一的id im作为密钥。每个组件都非常大，所以我希望每次只在DOM上保留几个项。例如，如果我有5个id为A，B，C，D，E的元素，下一个状态是B，C，D，E，F，B，C，D，E会被反应重新命名吗？
谢谢你的帮忙!
浏览 5提问于2020-06-15得票数 1
回答已采纳
2回答
从子组件更新父组件
javascript、reactjs
我不能从子组件重新渲染父组件-我将componentDidMount作为道具传递给子类，然后在那里调用它，并期望父组件重新渲染。render函数被调用，但内容保持不变。怎么了？
var Parent = React.createClass({
getInitialState: function () { return {content: 'clean'}; },
componentDidMount: function () {
this.setState({content: 'changed!'});
},
render: f
浏览 13提问于2016-08-23得票数 0
1回答
React - InfiniteScroll(react-infinite-scroller)，loadMore函数重新呈现整个列表
reactjs、redux、infinite-scroll
我已经为我的一个组件实现了无限滚动。代码结构如下所示 我有一个名为的父组件，这个组件执行文章列表的抓取调用。下面是代码 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
回答已采纳
2回答
子组件不会更改道具
javascript、reactjs
我的结构如下：
class Parent extends React.Component {
componentDidMount() {
document.addEventListener('keydown', () => {
this.value++;
})
}
this.value = 0;
render() {
return (<ChildComponent value={this.value} />)
ChildComponent只呈现以下值：
class ChildComponent ext
浏览 0提问于2018-11-24得票数 1
回答已采纳
3回答
父组件的状态更新是否确保在ReactJS中重新装入子组件？
javascript、reactjs
假设我们有一个父组件：
class ParentComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
titleState: undefined
};
}
componentWillMount() {
// import Title string from JSON in order to assign it to titleState
this.setState({ titleState: jsonRespo
浏览 0提问于2019-09-06得票数 1
回答已采纳
6回答
为什么在父级更改时会重新呈现子元素呢？
reactjs
如果父母重新呈现，反应中的孩子也会被重新呈现，不管传递的道具是否改变。
，为什么会这么做？如果当父母呈现时，如果不重新呈现子元素(没有更改的道具)，那么会有什么问题呢？
更新:我在分析器中谈到了这一点：
示例代码：
App.tsx：
import React, { useMemo, useState } from "react";
import "./App.css";
import { Item, MyList } from "./MyList";
function App() {
cons
浏览 8提问于2021-01-09得票数 15
1回答
React呈现和React呈现有什么区别--DOM呈现
reactjs
编辑是因为我原来的问题措辞不对。
我试图理解为什么使用ReactDOM来呈现某些HTML，而其他呈现则是在ReactDOM中完成的。这里有什么东西我遗漏了吗？
我最近学习的一个React课程中的一个例子，这是其中一个使用react dom的练习中的代码：
import React, {Component} from 'react'
import {render} from 'react-dom'
var Bookstore = [
{"title":"Mr. Bean", "author":"Rowa
浏览 0提问于2019-08-28得票数 2
回答已采纳
2回答
尝试理解React.js中的数据传递
javascript、reactjs
在下面的React.js示例中，我想了解从父组件传递给子组件属性的是什么(我正在学习抽搐-toe教程)：
class Square extends React.Component {
render() {
return (
<button className="square" onClick={() => this.props.onClick()}>
{this.props.value}
</button>
);
}
}
然后有一个板组件这样做来呈现每个正方形：
renderSquare(i)
浏览 6提问于2016-11-18得票数 1
回答已采纳
1回答
在React中，为什么更改非状态道具不会提示重新呈现？
reactjs、state、render、react-props
我在互联网上发现了这一点："React组件在其状态或道具发生变化时自动重新渲染“，但如果我在道具中传递了一些不同于状态的东西，即使道具在时间上发生了变化，它也不会引发渲染。
在这段代码中，我传递了一个属性，但没有使用state
父级
import React from "react";
import Child from "./child";
export default function Parent() {
let count = 0;
setInterval(() => {
count++;
console.log
浏览 1提问于2020-05-03得票数 2
2回答
当外部数据更改时更新React组件
javascript、reactjs、react-native、react-props、react-component
假设当我的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
回答已采纳
5回答
在状态更改后，如何响应更新组件及其子组件？
javascript、reactjs、dom、virtual-dom
我在看
我非常了解安装过程，但我有一天很难理解如何响应更新组件及其子程序。
调节器通过以下方法控制更新过程：
function receiveComponent(component, element) {
let prevElement = component._currentElement;
if (prevElement === element) {
return;
}
component.receiveComponent(element);
}
Component.receiveComponent
receiveComponent(nextElement) {
浏览 14提问于2022-01-07得票数 3
回答已采纳
1回答
使用道具初始设置状态
reactjs
今晚，我一直在围绕使用道具来设置组件的初始状态这一主题进行一些研究，我遇到了一些争论双方的人。因此，我的问题有两部分。
1)我所做的是反模式吗？据我所知，这并不是--根据的说法，有什么特别的问题吗？
( 2)还有别的方法可以重写这个逻辑，而不用道具来设置状态吗？
父组件：
class App extends Component {
constructor(props){
super(props);
this.state ={
todos: []
}
}
componentDidMount() {
axios.get('http
浏览 4提问于2017-10-09得票数 0
回答已采纳
1回答
通过graphQL突变函数作为支柱还是将其注入子组件？
javascript、reactjs、graphql、react-apollo
我在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
回答已采纳
1回答
根级组件更改，导致子路由组件重新呈现。
reactjs、react-router
我有一个在"/“路由上呈现的主组件(它是在index.js上设置的)。应用程序中有一个常见的搜索栏，呈现在它自己的子路径之上/外部。基本上，我希望这个搜索栏在整个应用程序中是通用的。无论何时发生更改，搜索栏都会更新App上的属性。它在所有路由中都正常工作，除了每次我在子路由中输入搜索栏时，App和当前的子路由组件都会被重新呈现。我怎样才能防止这种重新呈现，因为没有道具更改，也不需要重新呈现子组件？
// App.js
render()
...
<SearchBar
className={classes.searchbar}
value={(this
浏览 0提问于2018-09-21得票数 0
回答已采纳
2回答
反应中受控制的和不受控制的成分
javascript、reactjs
几乎在每个ReactJS教程中，甚至在中，都推荐使用onChange来处理输入更改。我们对值使用状态，并通过onChange对其进行更改。这将在每一个键笔画中触发呈现。所以,
渲染真的那么便宜吗？
输入值不是保存在DOM中吗？所以DOM和VirtualDOM之间没有什么区别，所以尽管呈现发生了什么变化？(可能是错误的假设)。
只是为了好玩和学习的目的，我尝试了这些：
使用自定义函数和变量来保存值，在每次击键时设置上次输入后的状态，传递与值相关的组件等等。
使用onBlur而不是onChange。
但是，我不喜欢他们中的任何一个，我想问这个问题。如果实时输入值的变
浏览 6提问于2017-06-10得票数 7
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频活动推荐
腾讯云开发者
