如果子组件通过三元操作变为空，React是否会重新渲染子组件？
在React中，当父组件的状态发生变化时，React会重新渲染整个组件树。然而，React在进行组件渲染时会进行一些优化，以提高性能并避免不必要的渲染。
在这个特定的情况下，如果子组件通过三元操作变为空，React会重新渲染子组件。这是因为React会比较前后两次渲染的虚拟DOM树，发现子组件的内容发生了变化，因此会重新渲染子组件。
当子组件重新渲染时，React会执行一系列的生命周期方法，包括componentWillUnmount（组件将被卸载）和componentDidMount（组件已经被挂载）等。这些生命周期方法可以用于执行一些清理操作或者初始化操作。
对于这个问题，如果你想避免子组件重新渲染，可以通过在父组件中使用shouldComponentUpdate方法来进行控制。在shouldComponentUpdate方法中，你可以根据子组件的变化情况返回一个布尔值，告诉React是否需要重新渲染子组件。
需要注意的是，React的渲染机制是基于虚拟DOM的，它会尽量减少实际的DOM操作，以提高性能。因此，即使子组件重新渲染，React也会尽量只更新实际发生变化的部分，而不是整个子组件。
推荐的腾讯云相关产品：腾讯云函数（Serverless云函数计算服务），腾讯云容器服务（基于Kubernetes的容器管理服务），腾讯云数据库（提供多种数据库类型和存储引擎），腾讯云CDN（内容分发网络服务），腾讯云人工智能（提供多种人工智能服务和API）。
更多腾讯云产品介绍和详细信息，请访问腾讯云官方网站：https://cloud.tencent.com/
相关·内容
当可观察到的更新时，Mobx @observer组件是否会在该组件上触发render或forceUpdate？当它发生时，会触发哪些生命周期方法？render和forceUpdate有什么区别吗？
即使在render方法中，子对象如何保持不变？React或Mobx是否负责检测何时将道具传递给子对象并需要重新渲染？
谢谢!
浏览 2提问于2017-03-27得票数 3
如果一个组件因为属性更改而需要在一秒内渲染几次，那么这个组件是否应该扩展React.PureComponent？
该组件没有子组件，但是，它本身是深度嵌套的...因此，道具正在通过其他几个组件进行传递。
通常，在决定是否应该使用React.PureComponent时，需要考虑哪些关键问题。在哪些场景下使用它是不好的？
浏览 1提问于2017-02-10得票数 1
我有用户选择的选项，这些选项保存在父组件的状态中。父组件是带有"form“的整个网页。
当用户按下"Submit“时，我希望使用这些选项的子组件使用传递给它的这些新属性重新渲染。当您加载页面时，默认生成可见。
但是，我不希望它在“提交”被按下之前完成，只有在按下之后才能完成。
我所能想到的就是从节点中删除元素并重新生成它，但这不是使用React的好方法。如果需要更多的澄清/上下文，请让我知道。我是一个新的反应，我正在做这个项目，以熟悉它和它的行为。
谢谢!
浏览 0提问于2020-10-26得票数 0
2回答
我有一个React类组件，它在默认情况下呈现null，并在调用activate()函数后呈现一些子级。大致如下：
class MyComponent extends React.Component {
...
activate() {
this.setState({showComponent: true})
}
...
render() {
if (this.state.showComponent) {
return <Child />
} else {
浏览 1提问于2021-04-24得票数 0
例如，我有一个名为List的React Hook组件，它具有任意数量的子项Entry (可以添加或删除)。如果条目的数据发生变化，我如何才能在不重新渲染父条目的情况下更新它，这将重新渲染其所有兄弟项，这可能是巨大的。我希望避免使用useRef和useImperativeHandle，首先是因为我的代码变得更加复杂，而使用react-sortable-hoc使得使用它们变得不可能。
浏览 32提问于2020-03-06得票数 0
我有一个父组件，它有一个状态变量，它的一个子组件在交互时会更改该变量。然后，父级还根据状态变量中的数据包含一些更多的组件。 问题是子组件会在其父组件的状态更改时重新呈现，这是因为对setState函数的引用发生了更改。但是当我使用useCallback (按照建议的here)时，我父母的状态根本不会更新。 这是我当前的设置： function ArtistGraphContainer() {
const [artistPopUps, setArtistPopUps] = useState([])
const addArtistPopUp = useCallback(
浏览 20提问于2021-09-13得票数 0
回答已采纳
正如我在下面展示的，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
在React中，我有一个功能组件，在单击子组件按钮("GenerateButton")时，应该启动另一个子组件("UsersView")的呈现，然后显示从REST API中拉出的用户列表。 在调试时，我注意到即使"dataShouldLoad“状态切换为true，它甚至不会尝试加载"UsersView”组件中的代码，尽管"dataShouldLoad“被传递并用作属性。为什么会这样呢？我该怎么办？ 以下是我的简化代码片段： import React, {useState} from 'react';
import Gen
浏览 11提问于2020-07-09得票数 0
回答已采纳
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是在状态或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
回答已采纳
我想问的是，如果组件状态发生更改，React是否只重新呈现组件，或者它还会更新所有依赖于状态的对象。
浏览 0提问于2020-11-14得票数 0
我发现自己将状态聚合到一个组件上。通常情况下，我知道我会重新渲染节点，这样更改就可以传播，状态也不会到处都是。最近，我发现自己将这个组件的状态作为道具传递给使用的第一个子组件。为了绝对清楚，这就是我的意思：
var Child = React.createClass({
handleClick: function(){
this.props.owner.setState({
count: this.props.count + 1,
});
},
render: function(){
return <div onClick={this.ha
浏览 0提问于2015-04-22得票数 20
回答已采纳
我创建了一个React组件，它接受任何组件并将其呈现为弹出。父组件接收要呈现的组件(弹出)。呈现的组件就在这里，子组件使用react获取其大小，并将其传回父组件。父组件必须接受子组件的尺寸，因此可以调整其高度和宽度。这是代码：
class Popup extends React.Component<IPopupProps,IComponent>{
constructor(props:IPopupProps){
super(props);
this.state={
childComponent:this.props.
浏览 0提问于2018-11-26得票数 1
回答已采纳
我在互联网上发现了这一点："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回答
我想要一些帮助，请理解为什么下面的代码导致inf呈现循环。在我看来，这应该是一个循环：
渲染容器。
渲染子StrRow。
第一次运行效果并调用update()。
更改容器状态。
重新渲染容器。
重新渲染StrRow.
由于依赖项没有更改，不会再次运行。
然而，这种效果似乎是在StrRow的每次呈现之后运行的。
function Container() {
const [count, setCount] = React.useState(0);
const update = React.useCallback(() => {
浏览 3提问于2020-05-06得票数 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
这是我的情况： shortArray.map(data => (
<div className={this.state.active === data.id ? "show" : "dontShow"}>
{this.processAVeryLongArray()}
</div>
)) 我希望你能明白这一点。只是状态发生了变化，并且processAVeryLongArray是独立于它的。我唯一需要状态的就是改变元素的类名，但是子元素没有改变。顺便说一句，它会重新渲染所有的孩子。如何解决这个问题？
浏览 19提问于2019-01-17得票数 1
1回答
有没有什么办法可以强制使用ref重新渲染组件？
可能是这样的：
const CustomComp=React.memo(React.forwardRef(({...props},ref)=>{
return(<View ref={ref} style={...}></View>);
}));
export default function App() {
const Mainref=useRef();
return(<View>
<Pressable onPress={()=>{Mainref.TriggerRend
浏览 2提问于2021-10-30得票数 0
即使shouldComponentUpdate()返回false，当使用setState()调用更新组件时，react如何为组件创建新的虚拟DOM？
react是否会为所有组件重新创建虚拟DOM，甚至是没有调用setState()的组件？我的意思是，假设对子组件调用setState()，是否也会为父组件反应一个新的虚拟DOM？
浏览 0提问于2019-06-05得票数 0
1回答
首先，我使用React、Gatsby和Swiperjs。
我在向Swiper组件渲染子组件时遇到了问题。我在两个地方(博客和项目组合部分)使用了swiper，所以我创建了CardsSlider组件来重用它。我使用两种类似的组件，所以我使用高阶组件用SwiperSlide包围每个卡片组件。然后，我遍历每个数据以生成包含SwiperSlide组件的卡片，作为CardsSlider的子属性，它基本上就是Swiper。问题是:DevTools卡没有包装SwiperWrapper组件，你可以在下面的ss of devtools中看到。
博客组件：
const Blog = () => {
c
浏览 1提问于2021-04-08得票数 1
React说纯渲染可以优化性能。现在React有了PureComponent。我应该在任何地方使用React.PureComponent吗？或者什么时候使用React.PureComponent，在哪里使用React.PureComponent最合适？
浏览 3提问于2017-03-13得票数 52
回答已采纳
当我使用react钩子时，我声明我的状态是这样的：
const [entities,setEntities] = useState([])
然后，我向服务器发出api调用，返回永远不变的静态内容。I setEntities(fetchedData)并且实际发生的是我呈现组件两次-一次是在数组为空的时候，第二次是在数据到达的时候。数据是静态的，永远不会改变。想知道是否有某种方法可以防止这种不必要的渲染？我认为解决方案将是在componentWillMount上进行api调用，但没有任何与此挂钩的并行解决方案，因为此方法已不再使用。
浏览 2提问于2020-10-04得票数 2
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
我已经使用react了一段时间，并阅读了文档，我发现了一些对我来说很奇怪的东西，为什么react重新渲染组件的子元素在父组件的每个状态更改上，即使子道具是相同的?？为什么我要把我的组件包装在Memo()中以防止这种重现呢？将Memo设置为每个react组件的默认设置，或者我是否应该对所有组件都使用它，并不是更好。
浏览 4提问于2021-04-22得票数 2
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
回答已采纳
请建议如何获取没有状态的每一秒的当前时间，因为它在每次更新状态时都会渲染组件。请检查以下使用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
回答已采纳
以下两个等价的性能是否明智？第一个例子会导致Component1和Component2在每次MyComponent的道具更新时被重新渲染吗？
import React from 'react';
import { connect } from 'react-redux';
import { createStructuredSelector } from 'reselect';
import { selectShowComponent1, selectShowComponent2 } from './selectors';
@co
浏览 19提问于2017-02-13得票数 0
回答已采纳
我发现使用<React component>和<React render>在react-router-dom 6.x中可能会被弃用，所以我遵循删除了component属性，而是将组件嵌套为<Route >节点的子节点。它工作得很好，直到我到达使用动态参数的路由，它抛出了一个错误。
我从..。
<Route exact path={`/:category`} component={CategoryPage} />
为了..。
<Route exact path={`/:category`}>
<CategoryPage /&g
浏览 0提问于2020-05-20得票数 0
1回答
我正在从此Link中提到的路由发送React组件 <Route path='/StartCompaign' render={(props) => <CampaignStart {...props} isDashboard={true} /> } /> 我在另一个组件中得到了支持，比如 {props.childern.render.isDashboard ? <Header /> : "NO" } APP.JSX文件 import React from 'react';
import { Route,
浏览 11提问于2019-04-15得票数 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-native模式的子组件 我在状态改变后渲染子组件，它第一次渲染，但在第二次，它不工作。 Parent.js文件如下： import react, {Component} from 'react';
import { View, Text, TouchableOpacity} from 'react-native';
import ActionModal from './ActionModal';
export default class Parent extends Com
浏览 23提问于2019-09-22得票数 0
在下面的React App代码中，我设置了一个useState属性，该属性绑定到一个名为Header的函数组件。演示代码中没有显示的是，我从位于HomePage组件中的另一个子组件调用triggerTestProp函数。 但是，每当我设置此属性时，不仅横幅会重新呈现，而且包含标题的整个页面也会重新呈现。我使用React Router进行导航，如演示代码中所示。你知道为什么整个页面都会被重新渲染，而不是像预期的那样只呈现标题吗？ function App() {
const [testProp, setTestProp] = useState(
"defaultVal
浏览 44提问于2020-06-21得票数 0
回答已采纳
我是新的反应和来自一个背景的功能组件。
在我的反应项目中
当我有条件地呈现(从false到true )时，子组件中的数据将消失。
那我想知道这是为什么。
然后我听到了一个叫“拆卸”的概念。这意味着，当我的条件从true变为false时，组件将被卸载。在卸下的时候，里面的状态就会消失。
但那样的话，就不算了。问:每当我们重新渲染任何其他组件，就像正常情况一样，我们也会卸载组件，以便重新呈现。我们的国家价值也不会消失。
为什么会出现这个问题，特别是在有条件陈述的情况下呢？
编辑：
我强调的不是如何避免国家损失。我的问题是，为什么数据将在条件呈现中消失。以及为什么卸载会导致这样的问题，但是重新渲染不
浏览 5提问于2022-08-19得票数 0
2回答
因此，我有以下react本机元素组件：
<CheckBox
containerStyle={[styles.checkBox, {borderColor: this.getCheckBoxColor(this.state.art)}]}
textStyle={[styles.text, {color: this.getCheckBoxColor(this.state.art)}]}
title='Art'
checkedColor={this.getCheckBoxColor(this.state.art)}
uncheckedColor={
浏览 1提问于2018-08-22得票数 0
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
回答已采纳
我正在对TypeScript使用react。我在react中映射了一个JSON文件。在浏览器中渲染所有数据只需要一秒钟。我使用的是函数组件。下面是代码。请帮我在浏览器中优化渲染时间。
import users from "../data/users.json";
const Users:React.FC=() => {
const displayUsers=users.map((item){
return(
<p> {item.username} </p>
<p> {item.location} </
浏览 0提问于2021-03-14得票数 0
当使用多个useReducers时，每个组件都使用一部分状态渲染器。 import React, { useContext } from 'react'
import Store from '../store'
import { setName } from "../actions/nameActions"
const Name = () => {
const { state: { nameReducer: { name } }, dispatch } = useContext(Store)
const handleIn
浏览 15提问于2019-05-30得票数 7
如果我有一个组件树，
//App.js
const App = () => (
<React.Fragment>
<A />
<B />
<C />
</React.Fragment>
)
//A.js
const A = () => (
<React.Fragment>
<ChildA />
</React.Fragment>
)
现在，假设所有三个组件-- A、B
浏览 1提问于2020-02-14得票数 2
回答已采纳
我已经创建了一个React组件，它将其子组件呈现为网格标记。由于组件是无状态的，并且网格标记永远不会更改，因此可以从shouldComponentUpdate返回false吗
我唯一担心的是，我当然不想阻止孩子们重新渲染，而只是想要阻止网格组件。
浏览 4提问于2017-08-20得票数 2
2回答
我想用.toLocalString()修改道具接收的内容，但是控制台返回一个错误：
TypeError:用例未定义测试组件中的ligne : const = cases.toLocalString()
然而，如果我直接渲染道具没有修改，它的工作，所以道具不是未定义的。
这是父组件：
import React, { useEffect, useState } from "react";
export default function App() {
const [globalStats, setGlobalStats] = useState({})
const ge
浏览 1提问于2020-04-14得票数 1
回答已采纳
我在类型记录中编写了一个简单的treeview，使用react来呈现DOM。
每个节点都必须遵循简单的接口。
interface INode {
label: string;
children: INode[];
}
然后用以下方法描述这棵树：
var tree = {
label: "root",
children: [
{
label: "node 1",
children: [
{
labe
浏览 1提问于2016-03-14得票数 6
回答已采纳
我使用React渲染我的web应用程序所需的一些组件，我有一个带有播放和停止按钮的计时器。我从get请求中检索所有的时间记录，并且我想在组件每次更改时重新修改它，我如何做到这一点？
除了使用一个简单的setInterval来调用this.forceUpdate()函数之外，一切都可以正常工作，但这给了我一个警告：
警告:forceUpdate(.)：只能更新安装或安装组件。这通常意味着在未挂载的组件上调用forceUpdate()。这是禁止行动。请检查TimerBox组件的代码。
我的组成部分：
var TimerBox = React.createClass({
displa
浏览 3提问于2017-03-09得票数 0
回答已采纳
2回答
我想知道如何在React中管理复杂的状态，限制那些内容没有改变的组件的渲染调用的数量。
举个例子：
我有简单的连接到redux存储容器组件与“项目”道具(这是数组)。
const Component = ({ items }) => (
<>{items.map(item => <ItemComponent key={item.id} {...item} />}</>
);
const mapStateToProps = state => ({
items: $$data.select.items(state),
});
浏览 39提问于2019-06-18得票数 4
4回答
我正在使用Expo + React导航。
在我的React Native应用程序中有很多使用组件Map的屏幕。我不希望这个组件在切换屏幕时被重新渲染。有没有办法将我的组件Map保存到某种类型的存储中，这样每次我需要Map时，我的应用程序就不必重新渲染它？
浏览 2提问于2018-04-02得票数 5
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
回答已采纳
问题是我不能让它工作，时间似乎混乱了，传递给FlatList的数组总是空的。
const [expanded, setExpanded] = React.useState(false);
var searchHistory = [];
const _retrieveData = async () => {
try {
const value = await AsyncStorage.getItem('searchHistory');
if (value !== null) {
searchHistory = J
浏览 0提问于2021-04-28得票数 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回答
当我试图访问子类中父类的道具值时，我遇到了问题。
我正在尝试用父母的道具初始化子道具。
但是下面的代码显示了值的空字符串。
export default class Child extends React.Component {
constructor(props) {
super(props);
this.state = { value: props.value };
}
...
在其他班级里，我叫这个孩子如下：
const issue = this.state.issue;
...
<Child value={issue.number} />
...
在构造子类
浏览 0提问于2018-08-27得票数 3
回答已采纳
在我的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
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
