每次父渲染时，React子渲染都会重新渲染
是由于React的组件重新渲染机制。当父组件的状态或属性发生变化时，React会重新渲染整个父组件以及其所有子组件。这是因为React采用了虚拟DOM的概念，在每次重新渲染时，React会对比前后两次的虚拟DOM树，找出差异并更新真实的DOM。
这种机制的优势在于保证了组件的一致性和可预测性。通过重新渲染子组件，React可以确保所有组件的状态是最新的，并且页面可以响应用户交互或数据变化。同时，React还通过DOM diff算法的优化，减少了真实DOM操作的次数，提高了页面的性能。
React的重新渲染机制适用于各种应用场景，特别是那些需要频繁更新UI的场景，比如实时聊天、数据监控、股票行情等。通过React的重新渲染机制，开发人员可以专注于业务逻辑的实现，而无需手动操作DOM。
对于React开发者来说，了解和掌握React的重新渲染机制是非常重要的。在开发过程中，可以通过优化组件的设计、合理使用shouldComponentUpdate生命周期方法、使用React.memo或React.PureComponent进行性能优化等方式，减少不必要的重新渲染，提高应用的性能和用户体验。
腾讯云相关产品和产品介绍链接地址：
- 云服务器（ECS）：https://cloud.tencent.com/product/cvm
- 云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
- 云数据库MySQL版（TencentDB for MySQL）：https://cloud.tencent.com/product/cdb_for_mysql
- 腾讯云CDN（Content Delivery Network）：https://cloud.tencent.com/product/cdn
- 腾讯云人工智能（AI）：https://cloud.tencent.com/solution/ai
- 物联网通信平台（IoT Hub）：https://cloud.tencent.com/product/iothub
- 腾讯云移动开发套件（MSS）：https://cloud.tencent.com/product/mss
- 腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
- 腾讯云区块链服务（Tencent Blockchain as a Service，TBaaS）：https://cloud.tencent.com/product/tbaas
- 腾讯云元宇宙解决方案：https://cloud.tencent.com/solution/universe
相关·内容
正如我在下面展示的，react子渲染每次它的父渲染时都会渲染。这是为什么，这是一个问题吗？另外，我怎样才能避免它，以致于只有当它的优点改变时，子对象才会重新渲染。 import React, {useEffect, useState} from 'react';
function App() {
return (
<div>
<Main></Main>
</div>
);
}
export default App;
function Main() {
const [count
浏览 38提问于2020-04-29得票数 1
请建议如何获取没有状态的每一秒的当前时间，因为它在每次更新状态时都会渲染组件。请检查以下使用state完成的代码
export default class Local extends React.Component {
state = {
messages: [],
currentTime: Date.now()
}
updateCurrentTime() {
setInterval(() => {
this.setState({
currentTime : new Date().getSeconds()
})
}, 1000)
}
componentDidMoun
浏览 8提问于2021-03-11得票数 0
回答已采纳
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
回答已采纳
2回答
我想要一些帮助，请理解为什么下面的代码导致inf呈现循环。在我看来，这应该是一个循环：
渲染容器。
渲染子StrRow。
第一次运行效果并调用update()。
更改容器状态。
重新渲染容器。
重新渲染StrRow.
由于依赖项没有更改，不会再次运行。
然而，这种效果似乎是在StrRow的每次呈现之后运行的。
function Container() {
const [count, setCount] = React.useState(0);
const update = React.useCallback(() => {
浏览 3提问于2020-05-06得票数 0
回答已采纳
在我的React应用程序的根组件中，我有以下内容：
class App extends Component {
...
ComponentDidMount() {
window.addEventListener('resize', this.handleResize, false);
}
handleResize{
this.parentSize = {height: window.innerWidht - this.node.offsetLeft ..., width: ...};
this.forceUpdate();
}
ren
浏览 4提问于2017-08-11得票数 0
回答已采纳
1回答
class LoggingButton extends React.Component {
handleClick() {
console.log('this is:', this);
}
render() {
// This syntax ensures `this` is bound within handleClick
return (
<button onClick={(e) => this.handleClick(e)}>
Click me
</button>
);
}
}
浏览 0提问于2018-05-19得票数 6
回答已采纳
2回答
我有个案子： const Parent = () => {
const [value, setValue] = useState('');
return <>
<Child1 value={value} />
<Child2 setValue={setValue} />
</>
} 但是每次调用Child2的setValue时，Child2都会重新渲染，尽管它的道具没有更改(Child1也会重新渲染，但这是自属性value更改后的预期行为)。 如何解决这个问题？
浏览 82提问于2021-11-12得票数 1
回答已采纳
我试着用下面的代码一次只执行urql useQuery。但由于某些原因，每次重新渲染时都会调用它。 根据文档https://formidable.com/open-source/urql/docs/basics/queries/#pausing-usequery，这个查询最初应该在渲染时暂停，并且只有在挂载时从React.useEffect调用时才会执行。 const [{ fetching, data, error }, reExecute] = useQuery({
query: INITIAL_CONFIG_QUERY,
pause: true
});
React.useEf
浏览 38提问于2020-07-22得票数 8
回答已采纳
如果我在类组件的render()方法中定义了一个功能组件，那么每次调用类组件的render()方法时，组件的状态都会被重置。但是，如果我直接调用函数组件，状态不会重置。
请看下面的示例：
import React from 'react';
import Counter from './Counter'
const MilliCounter = ({name}) => {
return <Counter name={name} initial={1e6} />
};
class App extends React.Component
浏览 0提问于2020-02-11得票数 2
我有一个父组件，它根据通过props接收到的数组来渲染子组件的集合。 import React from 'react';
import PropTypes from 'prop-types';
import shortid from 'shortid';
import { Content } from 'components-lib';
import Child from '../Child';
const Parent = props => {
const { items } = props;
浏览 70提问于2019-11-22得票数 22
回答已采纳
我使用了react-router-redux并嵌套了connect()组件。这似乎工作得很好，除了我的嵌套组件会在状态改变时重新呈现。
Probs: Root有5个子组件:如果任何一个子组件中有任何状态变化，所有组件都会重新呈现，因为所有组件都是connect()。
如何才能仅渲染所需的子项？
(有没有办法使用connectAdvanced生命周期方法来解决这个问题？
浏览 4提问于2017-12-11得票数 0
我要求在显示/隐藏导航时隐藏React应用程序上的页面内容。
为此，我们将一个道具传递给组件，并处理样式组件中的显示css，如下所示：
<PageContent isOpen={isOpen}>
const PageContent = styled.div`
display: ${props => (props.isOpen ? 'none' : 'block')};
`;
虽然这可以很好地工作，但当属性发生变化时，内部页面内容将重新呈现，这是预期的，但不是所需的。
在这种情况下，页面内容包括一些从API获取的内容，因此每次打开/关闭导航时
浏览 0提问于2020-08-07得票数 0
我正在尝试理解如何停止在函数组件中重新呈现元素(或者我可能不需要这样做?) 我对所有输入使用单个useState，并共享相同的onChange处理程序。 我在表单(100+)中有大量的输入字段，每当我在开发工具分析器中输入其中任何一个时，我都会看到它们都被重新渲染，假设这是因为在每次渲染时，我的onChange处理程序都被“重新创建”，所有输入元素也都被重新渲染。如果我尝试将其包装在useCallback中，没有任何变化，但是如果我将输入元素包装在Rect.memo组件中，那么它不会重新呈现。 const MyInput = props => {
return <in
浏览 20提问于2020-03-30得票数 2
回答已采纳
4回答
我正在使用Expo + React导航。
在我的React Native应用程序中有很多使用组件Map的屏幕。我不希望这个组件在切换屏幕时被重新渲染。有没有办法将我的组件Map保存到某种类型的存储中，这样每次我需要Map时，我的应用程序就不必重新渲染它？
浏览 2提问于2018-04-02得票数 5
每次在React.js中执行渲染时，UI都会滚动到页面顶部。
JSFiddle：
有什么好的或被动的方法来阻止这种情况吗？
例如，如果用户向下滚动页面，然后按下导致呈现的按钮，则UI将停留在与以前相同的滚动位置。
// Forces a render which scrolls to top of page
this.setState({data: data});
更新:为什么某些渲染的UI会滚动到顶部，而其他渲染则不会？
浏览 46提问于2015-05-21得票数 42
回答已采纳
我正在React中创建一个游戏。基本描述:绵羊图像是从屏幕的中心“发射”的，它们被动画移动到边界。如果他们做到了，你就输了。如果你之前点击了它们，它们就会消失，你就可以继续了。我已经做好了所有的东西，除了计数器，它计算你点击了多少只羊。描述代码： <MainComponent // everything else inside it
renders <Component creating background/>
<Component creating sheep images
renders array of she
浏览 15提问于2019-01-28得票数 0
回答已采纳
例如，我有一个名为List的React Hook组件，它具有任意数量的子项Entry (可以添加或删除)。如果条目的数据发生变化，我如何才能在不重新渲染父条目的情况下更新它，这将重新渲染其所有兄弟项，这可能是巨大的。我希望避免使用useRef和useImperativeHandle，首先是因为我的代码变得更加复杂，而使用react-sortable-hoc使得使用它们变得不可能。
浏览 32提问于2020-03-06得票数 0
父类有几个子组件，所有子类都在呈现方法中实例化，因此，对父状态的任何更改都会导致所有子实例重新实例化，每次调用react创建子实例的新实例，在那里通过子实例的松散状态，以便重用我尝试使用parent.refs.childRef检索子实例的子实例，但这给我带来了错误。
未明错误:对象作为一个React子对象无效。
，这是我的密码
placeHolderComponent(){
let component;
let palceHolderValue=this.state.uiState.placeHolder;
let classInstan
浏览 4提问于2016-12-02得票数 2
我有一个无状态的函数组件<Sidebar/>，它只是在div中返回它的子组件。这个组件是由<App/>呈现的，它维护自己的状态，并将该状态的一个元素传递到它的一个子级中。
const Sidebar = React.memo(({children}) => {
return <div className='sidebar'>{children}</div>
})
const App = (props) => {
const [counter, setCounter] = useState(0);
setI
浏览 1提问于2020-05-26得票数 3
1回答
我一直在尝试通过阻止下面示例中的容器组件在每次子组件更新时重新呈现来优化应用程序。当UsersList组件的输入发生变化时，如何预渲染EditableRow组件？谢谢。链接代码：https://stackblitz.com/edit/react-ts-llwq51?file=EditableRow.tsx
浏览 17提问于2021-10-22得票数 1
据我所知，当需要重新渲染或有任何状态更新时，整个React功能组件都会重新运行，那么如何正确管理这些函数中的状态？如果你不想在函数每次重新运行时都重新创建它，那么让它空出事件处理程序这样的成员是否很重要？
对于编写优化的功能组件，是否有某种最佳实践？
浏览 0提问于2019-08-31得票数 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
回答已采纳
我有一个使用vue-router的动态路由，
import customReportWrapper from './customReportWrapper.vue';
let router = new Router({
mode: 'history',
routes: [{
path: '/insights/custom-reports/:id',
name: 'custom-reports',
page: 'insights',
component: cu
浏览 3提问于2020-10-20得票数 0
我正在开发一个应用程序，上面有一个很大的子组件垂直列表。每个子组件都使用React.memo，我已经构建了优化，以确保当修改列表中的其他组件并更新组件树中更高位置的状态时，它们不会重新呈现。
这是工作良好，并有戏剧性的性能提高，但我想写单元测试(S)，以防止未来的回归，因为人们在项目中添加更多的功能，道具，状态等。
理想情况下，我希望渲染父组件和其中的一些子组件，并在其中一个组件上执行一个操作，该操作应该只会导致父组件和那个子组件重新渲染。然后，我想测试其他子组件是否不会重新呈现。这将是一个安全测试，以确保人们不会做出破坏React.memo的更改(匿名函数或新对象，如道具等)。
以下是对层次
浏览 3提问于2021-11-03得票数 1
2回答
我不能从子组件重新渲染父组件-我将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回答
import { useEffect, useState } from "react";
import { useSelector, useDispatch } from "react-redux";
import { fetchMovies } from "../../feautures/movies/moviesSlice";
import { BiLeftArrow, BiRightArrow } from "react-icons/bi";
import Card from "../Card/Card"
浏览 15提问于2021-06-29得票数 0
在研究上下文时，我不止一次偶然发现了一个常见的模式：
const storeContext = React.createContext()
const Provider = (children) => {
const [state, setState] = React.useState();
const ctxValue = React.useMemo(() => [state, setState], [state]);
return (
<storeContext.Provider value={ctxValue}>
{child
浏览 1提问于2021-05-27得票数 2
我在我的父组件中有以下代码：
render () {
return (
<div>
<LaunchSidebar game={this.state.game} />
{!this.state.isLaunchingGame && <Loader/>}
<div ref="game-container" id="game-container"></div>
</div>
浏览 4提问于2018-07-20得票数 0
我在互联网上发现了这一点："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回答
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
根据我的实验，如果您有一个对象作为react状态(let [state, setState] = useState({}))，并且您执行如下操作 setState(s => {
s.a = 42;
return s;
}) 它不会重新呈现依赖于s.a的组件。如果从另一方面来说你这样做了 setState(s => {...s, a: 42}); 它将重新渲染所有依赖于s的任何字段的组件，所以在我看来，它实际上只是查看闭包的返回对象引用是否与它已经具有的状态相同，并做出一个二元选择:是重新渲染所有内容还是什么都不重新呈现。 对吗？ 有没有办法更新状态，使其仅重新呈现
浏览 16提问于2020-04-30得票数 0
回答已采纳
我已经为我的一个组件实现了无限滚动。代码结构如下所示 我有一个名为的父组件，这个组件执行文章列表的抓取调用。下面是代码 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
回答已采纳
好吧，我已经知道一种方法了。然而，我问这个是为了防止我重新发明轮子，因为我是一个非常新的反应。我的印象是，如果父组件通过道具将其状态传递给子组件，而不是在更新父组件的状态时，子组件将在需要时重新渲染。但事实似乎并非如此。我举了个例子，
class Child extends Component {
constructor(props) {
super(props);
this.state = {
number: props.number,
};
}
updateNumber(n) {
this.setState({number: n})
浏览 2提问于2019-11-23得票数 5
回答已采纳
1回答
我有以下组件，它在需要时加载我的组件(在路由更改时)。 function DynamicLoader(props) {
const LazyComponent = React.lazy(() => import(`${props.component}`));
return (
<Suspense fallback={<div>Loading...</div>}>
<LazyComponent />
</Suspense>
);
} 我的路由(使用React-Router)如下所示：
浏览 27提问于2019-07-04得票数 5
回答已采纳
这个问题严重影响了我的表现。每次状态改变时，我的孩子的状态都会被重新渲染。有什么方法可以摆脱它吗？如何防止我的子组件不受这种类型的重新渲染的影响。请帮帮忙。
import React from "react";
const Content = ({children}) => {
console.log("I am rendering multiple times on each update");
return children;
};
export default function App() {
const [open, setOpe
浏览 3提问于2020-06-12得票数 1
我使用的是react 16.12.0与功能组件和类型记录3.7.2。
Problem：我的子组件B每次在组件A中更改变量时都会重新呈现，尽管这些变量没有传递给subcomponentB。我只将一个函数从componentA传递给componentB。
我有两个组成部分(构成部分A和构成部分B)。组件A是组件B的父级。组件A包含一个变量和一个函数。函数被传递给组件B，但是不值。在组件A中，还有一个计时器在运行，在X秒内更改变量"value“。
Component A:
const [value, setValue] = React.useState<number>(1);
f
浏览 4提问于2019-12-13得票数 0
回答已采纳
当我点击展开图标时，我在我的列表中面临着不必要的重新渲染。目前，我可以在Profiler中看到整个列表被重新呈现，当我试图将列表包装在React备忘录中时，它没有解决这个问题。有什么我可以做的，以防止重新呈现整个列表？
我们的目标是使用navigation变量构建一个模块化的侧边菜单。
const navigation = [
{ id: "Überschrift", type: "header" },
{ id: "Test", icon: <StarBorder />, type: &#
浏览 0提问于2020-10-29得票数 0
我的App组件定义如下：
function App() {
return (
<Router>
<Navbar/>
<Switch>
<Route path="/howitworks">
<HowItWorks/>
</Route>
<Route path="/aboutus"&g
浏览 3提问于2021-01-06得票数 0
假设我们有一个名为MyChildComponent的组件，它将用于显示数字列表，还可以通过在MyChildComponent中单击按钮将随机数字添加到列表中。单击按钮时，只有MyChildComponent会重新渲染，因为只有MyChildComponent的状态会更新。 public class MyParentComponent extends React.Component {
const numsInParent = [0,1,2];
render() {
return <MyChildComponent nums="numsInPare
浏览 27提问于2021-02-12得票数 3
回答已采纳
2回答
我开始在我的项目中使用Dynatree，我有一个问题-当我尝试懒惰阅读时，它的运行速度非常慢。我发现当我每次调用addChild时，我的整个树都会被重新渲染，我认为它的效率很低。
有人知道我能用它做什么吗？
两年前，mar10写道："enableUpdate(true)调用tree.redraw()，因此整个树都会更新。这一点将在1.0版中改变，但即便如此，组合addChild调用也会更快。“()
我现在使用1.0版本，但我找不到任何更改。
浏览 2提问于2012-10-02得票数 0
只是想知道你们多久会用这样的建筑。
class Cmp extends React.Component {
constructor(props){
super(props);
this.handler = this.handler.bind(this)
}
handler(x) {
return () => console.log(`${x}, i am not immediately called`)
}
render() {
return(
<div>
<div onClick={this.handler('h
浏览 0提问于2018-05-31得票数 0
假设以下代码都是在react钩子中编写的： export Parent = () => {
const [msgValue, setMsgValue] = useState();
....
return {
<>
...
<Child setMsgValue={setMsgValue}/>
...
</>
}
}
shouldSkipUpdate = (oldProps, newProps) => {
浏览 18提问于2020-07-27得票数 2
回答已采纳
我试图更好地理解为什么我的所有组件在Router v5中的路由更改时都会重新呈现。注意，这些组件只是重新呈现，而不是重新安装。当我在dev tools中打开react扩展并选择Highlight Updates复选框时，我可以看到所有组件在更改路由时都会被概述，甚至那些位于比路由匹配级别更高的组件：
<Router>
<MyHeader />
<ComponentWithRoutes />
</Router>
在这个简单的示例中，我希望更改路由不会重新呈现MyHeader组件，因为没有什么变化。不过，我仍然会看到开发工具的亮点。我认为这是
浏览 3提问于2018-06-05得票数 5
回答已采纳
最近，我意识到子组件总是在父组件改变时重新渲染，即使道具和子组件的状态没有改变。这使我的项目变得如此缓慢。所以，我使用shouldComponentupdate修复了这个问题。但是，我真的应该使用它吗？ 如果我用它的话。有没有办法把它应用到React-hook上？ 这是我的shouldComponentupdate中的代码 shouldComponentupdate(nextProps, nextState){
if(JSON.stringify(nextProps) !== JSON.stringify(this.props) ||
JSON.stringify(nextState) !=
浏览 20提问于2019-05-23得票数 4
当可观察到的更新时，Mobx @observer组件是否会在该组件上触发render或forceUpdate？当它发生时，会触发哪些生命周期方法？render和forceUpdate有什么区别吗？
即使在render方法中，子对象如何保持不变？React或Mobx是否负责检测何时将道具传递给子对象并需要重新渲染？
谢谢!
浏览 2提问于2017-03-27得票数 3
我对React/React-Native非常陌生。我正在构建一个小应用程序，通过使用来自API服务器的数据来渲染热图。我有一个日期选择器，它可以过滤我获取的数据集，从而控制渲染的热图。在我获取并呈现热图之后，用户可以在数据集上滑动并查看相应的结果。因此，滑块的最大值和平均值由日期选择器决定。我在每次日期选择器挑选新日期时设置状态，并使用新状态呈现HeatMap组件(这是包括滑块组件的父组件)。渲染后，我希望我的滑块移动开始位置(value=0)。但是，滑块似乎与前一个状态处于相同的位置。我如何才能达到预期的行为。
这是我的父组件，它包括日期选择器和Slider组件。
class Home
浏览 2提问于2019-07-30得票数 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
如果一个组件因为属性更改而需要在一秒内渲染几次，那么这个组件是否应该扩展React.PureComponent？
该组件没有子组件，但是，它本身是深度嵌套的...因此，道具正在通过其他几个组件进行传递。
通常，在决定是否应该使用React.PureComponent时，需要考虑哪些关键问题。在哪些场景下使用它是不好的？
浏览 1提问于2017-02-10得票数 1
我有一个简单的父-子组件结构，并想知道为什么父组件重新呈现会导致子组件再次呈现，这是默认行为吗？以及如何预防呢？
下面是我的代码片段-
import "./App.css";
import Library from "./library/Library";
import { useState } from "react";
import LibraryParent from "./library/LibraryParent";
function App() {
const [name, setname] = useState
浏览 1提问于2022-10-21得票数 0
回答已采纳
考虑一下这个小例子。在通过这本书学习的同时，我做了一些关于上下文API的实验。 const MyContext = React.createContext(0);
const D3 = () => {
console.log('render D3');
return <MyContext.Consumer>{num => `${num}`}</MyContext.Consumer>;
};
const D2 = React.memo(() => {
console.log('render D2
浏览 9提问于2021-02-09得票数 3
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
腾讯会议活动推荐
腾讯云开发者
