React在属性更改后重新呈现不必要的组件
React是一个用于构建用户界面的JavaScript库。它采用了组件化的开发模式，将界面拆分成独立的可复用组件，通过组合这些组件来构建复杂的用户界面。
在React中，当组件的属性（props）发生变化时，组件会重新呈现（render）。然而，有时候组件的属性变化并不会导致组件的实际呈现内容发生变化，这时候重新呈现是不必要的，会造成性能浪费。
为了避免不必要的组件重新呈现，React提供了一些优化技巧和工具。其中最常用的是shouldComponentUpdate生命周期方法。通过在组件中实现shouldComponentUpdate方法，我们可以手动控制组件是否需要重新呈现。在该方法中，我们可以比较新旧属性的值，判断是否有必要重新呈现组件。如果不需要重新呈现，可以返回false，从而避免不必要的渲染。
另外，React还提供了React.memo和React.PureComponent这两个高阶组件，用于自动优化组件的重新呈现。React.memo可以包裹函数组件，它会对组件的属性进行浅比较，如果属性没有变化，则不会重新呈现组件。React.PureComponent则是一个基于shouldComponentUpdate的优化版本，它会对组件的属性和状态进行浅比较，如果没有变化，则不会重新呈现组件。
总结一下，为了避免React在属性更改后重新呈现不必要的组件，我们可以采用以下优化技巧：
- 在组件中实现
shouldComponentUpdate方法，手动控制组件是否需要重新呈现。 - 使用
React.memo包裹函数组件，对属性进行浅比较，避免不必要的重新呈现。 - 使用
React.PureComponent代替普通组件，对属性和状态进行浅比较，避免不必要的重新呈现。
腾讯云提供了一系列与React相关的产品和服务，例如：
- 云服务器（CVM）：提供可扩展的云服务器实例，用于部署和运行React应用。
- 云数据库MySQL版：提供高性能、可扩展的MySQL数据库服务，用于存储React应用的数据。
- 云存储（COS）：提供安全可靠的对象存储服务，用于存储React应用中的静态资源。
- 云原生容器服务（TKE）：提供弹性、高可用的容器集群管理服务，用于部署和运行React应用的容器。
- 人工智能机器翻译（AI翻译）：提供高质量的机器翻译服务，可用于多语言React应用的国际化支持。
以上是腾讯云提供的一些与React相关的产品和服务，可以根据具体需求选择适合的产品来支持React应用的开发和部署。
相关·内容
我有一个有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
如何在React.createClass()中处理自定义javascript属性？
下面是一个例子：
var RouterView = React.createClass({
mixins: [Morearty.Mixin],
isAuthorized: false, // should it be part of state ??
isVerified: false, // should it be part of state ??
bindToAuthorization: function() {
if(/* blah-blah-blah *
浏览 2提问于2015-12-17得票数 0
回答已采纳
1回答
你能告诉我如何在react js中接收更新的道具吗?我知道componentWillReceiveProps是unsafe，我试过使用getDerivedStateFromProps，但没有工作
下面是我的代码
两秒钟后，我正在更新我的状态，该状态将传递给props
Expected output after two second
abcsssss
static getDerivedStateFromProps(nextProps, prevState) {
if (nextProps.src !== "") {
return { src: nextProp
浏览 41提问于2018-12-11得票数 1
回答已采纳
1回答
我正在从getCount函数的孩子那里得到道具。把它设为州。而不是把它设置在组件中，得到无穷大的循环。我怎么才能解决呢？
有父组件的代码：
import React, { Component } from "react";
import Message from "./Message/Message";
export default class Widget extends React.Component {
constructor(props) {
super(props);
this.state = {
color: {
浏览 0提问于2018-06-26得票数 0
回答已采纳
这是我的组件。它会在第一次渲染。随后，即使render被调用，它也不会更改DOM。
Render在正确的时间被调用，因为我已经设置了redux，并且我的'mapStateToProps‘似乎工作正常，因为它检测到应用程序状态的变化，并调用render()。
控制台日志确实记录了字符串已更改的事实。
你可能希望看到更多的代码，但我希望我在这里遗漏了一个基本的概念，有人可以指出。我不知道如何把我的整个项目放在这里。谢谢。再一次，render会被调用，所以它不应该更新DOM吗？
import React from 'react';
import { Component } f
浏览 1提问于2016-08-23得票数 4
注意:这在开发和生产中都会发生，我根本不使用<StrictMode>。
它似乎工作得很好：
B.js
export default function B()
{
return <p>B</p>
}
TestApp.js
import { lazy, Suspense } from "react";
const B = lazy(()=>import("./B"));
export default function TestApp()
{
const counter = useRef(0);
co
浏览 4提问于2022-08-11得票数 6
回答已采纳
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
回答已采纳
这是我的代码：
function Headline(props) {
props.text = "I have changed.";
return (
<h1>{props.text}</h1>
);
}
let title = <Headline text="Do Not Change" />;
let app = document.getElementById("app");
ReactDOM.createRoot(app).render(title);
are网站上的
浏览 5提问于2022-06-22得票数 0
回答已采纳
1回答
反应
、、、
我有一些文本，我想简单地强调使用一个简单的反应包，称为“反应-动物”。我尝试使用useState钩子，因为我想动态更新动画的速度，如图所示。但是，持续时间并没有改变我想要的方式。但在控制台中，它确实显示为变化。知道为什么吗？
链接到React包：
import React, {useState} from 'react'
import {Mark} from 'react-animarker'
const Highlightx = () => {
const [speed, setSpeed] = useState(5)
con
浏览 8提问于2022-07-10得票数 3
回答已采纳
如果一个组件因为属性更改而需要在一秒内渲染几次，那么这个组件是否应该扩展React.PureComponent？
该组件没有子组件，但是，它本身是深度嵌套的...因此，道具正在通过其他几个组件进行传递。
通常，在决定是否应该使用React.PureComponent时，需要考虑哪些关键问题。在哪些场景下使用它是不好的？
浏览 1提问于2017-02-10得票数 1
4回答
从几个月以来，我一直在使用React，而且React并不只是简单地重新呈现一个组件，而是找到了不同之处，并进行了这些更改。角质2做这样的事吗？
而且，当检测到状态变化时，角2是否重新呈现根节点中的所有组件，还是只重新呈现那些检测到变化的特定组件及其子树？
浏览 5提问于2016-04-24得票数 5
回答已采纳
import React,{useState} from "react"
const Pagination = ()=>{
const [pageCount, setPageCount] = useState(1);
const [itemsPerPage, setItemsPerPage] = useState(10);
const [itemOffset, setItemOffset] = useState(0);
const [isLoading, setIsLoading] = useState(false);
const [data, se
浏览 6提问于2022-09-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
回答已采纳
我正在尝试创建一个本地化解决方案。
为了测试目的，我有以下结构
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
回答已采纳
我对以下虚拟组件进行了一些测试，在执行过程中(在控制台中)，我得到了以下结果：
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
回答已采纳
可能是一个简单的问题，有一个简单的答案，但我搞不懂。归咎于热度。我的模拟器打印‘这是一个测试’在屏幕上，当我希望它说‘改变’。我做错了什么？
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Template from './src/components/Template';
export default class App extends React.Component {
constructor(props)
浏览 1提问于2018-07-12得票数 1
回答已采纳
为了更新子组件中的props对象，通常使用生命周期方法ComponentWillReceiveProps。但我意识到，可以在不侦听ComponentWillReceiveProps的情况下更新子组件的props。
例如，在以下名为App的组件中，子组件Comp能够在不侦听生命周期方法ComponentWillReceiveProps的情况下接收props。
主要的App组件：
import React from 'react';
import ReactDOM from 'react-dom';
import {Comp} from "./comp
浏览 6提问于2019-07-09得票数 2
每次我的选项卡组件父重发器，我的子组件重选器也是。
我的选项卡组件父级如下
import { useState } from "react";
import "./styles.scss";
import Tab from "./tab";
export default function App() {
const [selectTab, setSelectTab] = useState("a");
console.log("parent render");
return (
<div
浏览 0提问于2021-08-23得票数 3
回答已采纳
我正在使用react-redux，并且我有一个组件连接到它。我的组件有自己的属性(变量和函数)，也有一些来自store的状态映射，使用mapStateToProps。 管理这个组件何时应该重新呈现对我们来说非常重要，为此，我们使用propsAreEqual作为React.memo的第二个参数。 ...
const mapStateToProps = (state: RootState) => ({
name: state.user.name,
});
const dispatchProps = {
editProfile: userActions.editProfile,
浏览 22提问于2020-09-14得票数 1
回答已采纳
我在玩react开发工具的铬扩展，发现我所有的组件都在重新渲染。
App.js
import React from 'react';
import './App.css';
import Header from './components/molecules/Header/Header';
// import { colorListGenerator } from './core-utils/helpers';
import ColorPalette from './components/organisms/ColorPa
浏览 3提问于2020-06-08得票数 0
回答已采纳
我正在将项目从类组件切换到功能组件，并在使用上下文时遇到问题。
我有一个父布局，其中包含一个打开和关闭的导航菜单(通过父进程中的状态变化)。此布局组件还包含我通过上下文传递的用户属性。
在切换到功能组件和钩子之前，一切都进行得很好。
我现在看到的问题是，当从布局组件(父组件)打开nav菜单时，它会导致子组件重新呈现。如果上下文发生变化，我会期待这种行为，但事实并非如此。只有在将useContext添加到子节点时才会发生这种情况。
我正在导出带有备注的子程序，并试图用备注包装一个容器，但这没有帮助(实际上，它似乎会导致更多的呈现)。
下面是代码的大纲：
AppContext.tsx
export
浏览 0提问于2021-08-05得票数 0
回答已采纳
上下文
作为对React/Flux相当陌生的一种情况，有时我发现我的React组件通过其属性从父组件接收值(例如，文本框中显示的float参数)。这在父组件的呈现调用中发生，父组件从存储中获取值，并通过其子组件的属性将其传递给子组件。
然后，当用户更改GUI中的值(在带有文本框的子组件中)时，这将导致向dispatcher发送一个Flux操作，并将更改后的值作为有效负载。然后，dispatcher通过注册的回调调用存储，后者使用新值更新其数据。然后，存储区发出更改事件，并通知子组件存储已更改。子组件从存储中获取新值，并需要通过调用setState触发重呈现，其中新状态包含新值。为了使其工作，我
浏览 0提问于2016-02-17得票数 0
我有以下代码：
var Try = React.createClass({displayName: "Try",
getInitialState: function() {
return {
int: 'x'
};
},
ck: function() {
this.setState({int: 1});
console.log(this.state.int);
},
render: function() {
return (
React.createElement("
浏览 1提问于2015-08-10得票数 1
回答已采纳
1回答
我一直试图使用react上下文更新应用程序上几个屏幕使用的全局状态，这似乎是我找到的建议。
然而，每次在屏幕中更新上下文时，它都会再次卸载和挂载。我怎么才能防止这件事？
。如果单击该按钮，您将从我的useEffect中看到一个新的控制台日志。
代码如下：
import React, {
useContext,
useState,
useEffect,
createContext,
Dispatch,
SetStateAction
} from "react";
import { Button } from "react-native";
浏览 4提问于2022-04-03得票数 0
回答已采纳
我们知道，如果我们想重新呈现一个由related连接的，那么在发送相关的操作时，我们应该在reducer中返回一个新的数组。我的问题是，为什么redux组件在redux还原器不返回新数组时可以重新呈现？当我点击按钮时，第一个应用程序名变成'aaa'，为什么？
行动：
export function setAppName(name: string) {
return {
type: 'SET_APP_NAME',
name,
}
}
减速器：
export function appInfos(state = {
appInfos: [
浏览 2提问于2021-07-26得票数 0
回答已采纳
4回答
我在导航这些概念时遇到了困难，因为我从父函数中传递了一个函数，因此一个子函数一直在重新呈现。此父函数引用编辑器的值draftjs。
function Parent() {
const [doSomethingValue, setDoSomethingValue] = React.useState("");
const [editorState, setEditorState] = React.useState(
EditorState.createEmpty()
);
const editorRef = useRef<HT
浏览 0提问于2020-05-01得票数 1
回答已采纳
请告诉我why my header render every time already use React.memo ?，当我从my apps到user header的导航时，我有两部分my app and user，为什么？
这是我的密码
import React, { useEffect, useState } from "react";
import { withRouter } from "react-router-dom";
const Header = React.memo(function() {
console.log("Head
浏览 2提问于2020-04-22得票数 3
回答已采纳
我有用户选择的选项，这些选项保存在父组件的状态中。父组件是带有"form“的整个网页。
当用户按下"Submit“时，我希望使用这些选项的子组件使用传递给它的这些新属性重新渲染。当您加载页面时，默认生成可见。
但是，我不希望它在“提交”被按下之前完成，只有在按下之后才能完成。
我所能想到的就是从节点中删除元素并重新生成它，但这不是使用React的好方法。如果需要更多的澄清/上下文，请让我知道。我是一个新的反应，我正在做这个项目，以熟悉它和它的行为。
谢谢!
浏览 0提问于2020-10-26得票数 0
将动画值(fadeAnim)保留为状态属性更好，还是可以将其变为类属性？
示例：
class ModalShade extends React.Component {
fadeAnim = new Animated.Value(0)
render() {
return (
<Animated.View
cls="bg-black absolute-fill"
style={{ opacity: this.fadeAnim }}
浏览 1提问于2016-11-05得票数 33
我正在学习如何使用React profiler api，并遇到了两个参数“实际时间”和“基本时间”。根据文档
actualDuration: number - Time spent rendering the Profiler and its descendants for the current update. This indicates how well the subtree makes use of memoization (e.g. React.memo, useMemo, shouldComponentUpdate). Ideally this value should decr
浏览 1提问于2020-12-18得票数 1
1回答
我遇到了一个奇怪的问题，我可以弄清楚为什么会发生。
这不应该发生，因为传递给History组件的道具还没有更新。
./components/History.js y.js
...
const History = ({ previousLevels }) => {
return (
<ScrollView style={styles.container}>
{previousLevels.reverse().map(({ date, stressValue, tirednessValue }) => {
retur
浏览 0提问于2018-07-28得票数 0
回答已采纳
我的react App上有一个嵌套组件。 class Home extends React.Component {
constructor() {
super();
this.state = {id : "1"};
}
render() {
return <ShowChart id={this.state.id}/>;
}
} 我从主页渲染组件ShowChart，并将this.state.id作为一个道具传递。ShowChart是一个带有redux connect()的组件。 class ShowChart extends
浏览 171提问于2021-05-02得票数 0
回答已采纳
1回答
我有两节课
一个是react组件，第二个是标准类(验证)。
在验证类中添加为处于react状态的元素。
state.formValidator = new FormValidation({id: 'install'});
this.setState(state);
作为属性的FormValidation类具有用于输入验证的类。当一些输入被更新时，FormValidation isValid属性也被更新。
在我的react组件中，我可以看到它。例如，当我在输入元素上添加事件时。更新后，我调用了显示state.formValidator的函数
isValid属性值正确。但是我
浏览 2提问于2017-04-19得票数 1
我用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
回答已采纳
我在互联网上发现了这一点："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
我正在尝试使用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
我正在尝试使用上下文API进行一些状态管理；我想要实现的是，当我到达特定的路由时，我从服务器加载数据，将其存储在上下文中，并在页面本身中显示数据。这导致了一个无限循环，其中对服务器的请求是一次又一次地完成的(并且永不停止)。
我试图为提供者和消费者逻辑使用更高级的组件：
import React, { Component, createContext } from 'react';
import RequestStatus from '../RequestStatus';
import { getData } from '../Api';
c
浏览 0提问于2019-01-16得票数 2
回答已采纳
我在编码方面是新手，在谷歌上搜索了很多次之后，我无法解决这个问题。问题是我有一个布局组件，其中包含4个不同的组件。当我在函数组件中调用一个函数时，它会影响其他函数和其他函数的重呈现。但我不会把新的道具传给他们。我只将道具传递给一个包含单击事件的组件。我希望我事先说清楚了，谢谢。下面是我的代码示例：
这是我的布局组件.
import React, { useState } from "react";
import Header from "./Header";
import MenuTitle from "./MenuTitle";
import
浏览 1提问于2021-03-03得票数 0
回答已采纳
2回答
我有两个子组件，当我在第一个孩子中onChange，然后第二个孩子重新呈现时，我不想让第二个孩子重新呈现。在线代码示例：
const EditSceneModalStore = React.createContext(undefined);
const Parent = () => {
const [saveValue, setSaveValue] = React.useState({});
const initValue = {
name: "zhang",
age: 3
};
const onSave = () => {
浏览 7提问于2022-08-23得票数 0
回答已采纳
我正在调试一个React应用程序，注意到我的一些函数被多次调用，我无法解释。
我最初认为这是某种“开发人员特性”，并试图运行一个构建，我所能看到的是不应该调用的API是否被调用一次而不是两次：
import { useCallback, useState } from "react";
function App() {
const cities = ["montreal", "london", "shanghai"];
const [city, setCity] = useState(cities[0]);
co
浏览 4提问于2022-09-13得票数 2
回答已采纳
重新呈现react组件时，该组件的状态会发生什么变化？
它是保持不受影响，还是被重置为某个“默认值”？为什么？
浏览 1提问于2020-06-27得票数 0
在React Native中更改“全局”变量时，我遇到了最困难和最沮丧的时刻。我是这个语言的新手，然而，这应该比它明显要简单得多。似乎‘全局’变量是‘只读’的，并且不能是changed...but，我觉得这是不可能的。是否与React导航的使用有关？下面是一些代码。首先，我创建一个.js文件来保存我的“全局”变量对象： //'globals.js'
module.exports = {
STATUS: 'false',
}; 现在我的主要代码是'app.js'： //'app.js'
import React, { use
浏览 39提问于2020-06-24得票数 0
回答已采纳
我创建了一个简单的react应用程序，并检查了这个应用程序为什么要重新呈现，它显示了不必要的重新呈现，以及如何防止这些重新呈现？
浏览 4提问于2016-09-28得票数 3
回答已采纳
一旦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
我试图通过props将一个对象传递给子组件。该值是在useEffect钩子中设置的，在传递给子组件时会丢失。
我曾尝试在一个单独的函数中设置useEffect钩子之外的对象的值，但该值仍然丢失。
import React, { useState, useEffect } from 'react';
function SetValue(props){
let users = {};
useEffect(() => {
users = { user: 'bob' };
})
retur
浏览 2提问于2019-05-16得票数 41
回答已采纳
3回答
当全局变量发生变化时，我想重新呈现我的组件。我的代码现在看起来像这样 window.loading = true;
setTimeout(() => {
window.loading = false;
}, 4000);
class MyComponent extends React.Component {
state = { rerender: window.loading }
render() {
return (
<h1>{`Loading: ${this.state.rerender}`}</h1>
)
浏览 39提问于2019-02-06得票数 3
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
当我用this.props.addChannel(payload);运行代码时，通道组件一直在重新渲染，就像它在无限循环中一样。
当我用console.log(payload)替换它时，它工作得很好。
const mapStateToProps = state => ({
user: state.shared.user,
});
const mapDispatchToProps = dispatch => ({
addChannel: (payload) => dispatch({type:ADD_CHANNEL, payload})
});
class
浏览 0提问于2017-10-14得票数 1
我从React学到的一件事是，如果组件的道具没有改变，那么React就不会费心重新渲染组件。对于无状态组件也是这样吗？或者它们的行为更像是“愚蠢的”函数，并且每次都会被执行？
例如，如果我有：
import StatelessComponent from '../StatelessComponent';
export default class DocumentsTable extends React.Component {
state = {
something: 'foobar',
};
render() {
return (
浏览 1提问于2017-10-14得票数 51
回答已采纳
我正在发现VueJS，但我并不完全理解updated和watchers之间的区别。
更新的挂钩
它是一个生命周期钩子。根据的说法，只要数据发生变化，它就会被触发。因此，每当更新prop或data (值，而不仅仅是指针)时，都会调用updated。
观察者
在文档中，将观察器与计算属性进行比较。但在哪些情况下，最好使用更新而不是观察器？
似乎在这两种情况下，调用回调时都不会更新DOM (如果我们想要操作DOM中的更改，则需要nextTick())。我看到的唯一区别是，只有在总是调用updated的地方更新了一个精确的属性(或数据)时，才会触发watchers。
如果我们可以更准确(watcher
浏览 1提问于2017-07-08得票数 16
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
