修改组件的静态属性不会在React中重新呈现其所有实例
在React中，组件的静态属性是指在组件类中定义的属性，它们不会随着组件实例的变化而重新渲染。当组件的静态属性发生变化时，不会触发组件的重新渲染。
这种特性在React中被称为"props"，它是一种用于传递数据给组件的机制。静态属性可以在组件的构造函数中通过this.props访问到。
修改组件的静态属性不会导致组件实例的重新渲染，因为React只会在组件的状态(state)或者属性(props)发生变化时才会触发重新渲染。静态属性的变化不会影响组件的状态或者属性，因此不会引起重新渲染。
这种特性在某些情况下非常有用，例如当我们需要在组件中定义一些常量或者配置信息时，可以将它们定义为组件的静态属性，这样可以避免不必要的重新渲染。
在React中，我们可以通过使用shouldComponentUpdate()方法来控制组件的重新渲染。这个方法可以根据组件的状态或者属性的变化来决定是否重新渲染组件。如果我们不希望组件的静态属性的变化触发重新渲染，可以在shouldComponentUpdate()方法中返回false。
总结一下，修改组件的静态属性不会在React中重新呈现其所有实例。这是因为React只会在组件的状态或者属性发生变化时才会触发重新渲染，而静态属性的变化不会影响组件的状态或者属性。
相关·内容
2回答
许多人直接在this (例如this.clickCount)上使用属性，而不是this.state对象，有时还会有20个不同的属性直接附加到this上。
this.state纯粹是为了组织，还是有其他的原因？为什么这么多人/项目不使用this.state？
以下两个示例的工作方式完全相同。
状态代码示例：
class Clicker extends React.Component {
constructor() {
super()
this.state = {
clickCount: 0
}
浏览 3提问于2016-10-11得票数 4
回答已采纳
在下面代码中设置一个不应该更改的变量(例如，我需要在方法中将其从函数作用域中删除)，这是不是一种糟糕的做法？ const App = () => {
const [counter, setCounter] = React.useState(0)
const staticNum = 51;
return (
<div></div>
)
} 做一些类似的事情： const [staticNum, setStaticNum] = React.useState(51) 这似乎是一种浪费，因为我永远不会调用setStaticNum，因为sta
浏览 34提问于2021-01-11得票数 0
为了方便演示，我在中简化了我的问题。把这个计数器类想象成一个更复杂的外部Lib。
解释
我有一个类，它的属性为count，方法将增加该计数。
interface Counter {
count: number;
increment(): void;
autoIncrement(): void;
}
export class MyCounter implements Counter {
public count: number;
constructor() {
this.count = 0;
}
public increment() {
this
浏览 6提问于2022-01-13得票数 1
在火狐中，React.js组件中的select元素需要2次单击才能更新，但是在Chrome和Safari中第一次单击就可以正确地更新。
它是一个使用Redux +React的组件，select元素的值由通过mapStateToProps传递给它的存储值决定。
显示了select元素的值，但DOM本身在第一次单击时就没有更新。
显示正在传递的正确操作和正在进行的正确状态更改。
我在CodeSandbox中创建了组件树的独立更新(它在这里正确地工作，所以没有多少帮助)：
提前感谢！
浏览 1提问于2018-01-19得票数 2
回答已采纳
将动画值(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
1回答
我有GUser类，在我的项目中存储来自GitHub的数据并处理它们：
import axios from "axios";
export default class GUser {
constructor(userName) {
this.userName=userName;
this.getUserData(this,userName);
}
getUserData(that, userName) {
if(that.data===undefined)
{
axio
浏览 3提问于2019-12-07得票数 0
回答已采纳
1回答
在Jest中模拟类常量
、、、、
假设我有以下组件，它在构造函数中设置一个常量this.MAX_LENGTH。
import PropTypes from 'prop-types';
import React from 'react';
class Input extends React.Component {
static propTypes = {
value: PropTypes.string.isRequired
};
constructor(props) {
super(props);
// An example constant
th
浏览 1提问于2020-07-11得票数 0
回答已采纳
我在和ReacJS一起玩。我注意到一件事--在重新呈现类变量的过程中，类组件的更新值在屏幕中被更新，如下所示：
import React, { Component } from "react";
class Temp extends Component {
constructor(props) {
super(props);
this.count = 0;
this.state = {
foo: 0,
};
}
render() {
return (
<button
onClic
浏览 4提问于2020-04-19得票数 1
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
回答已采纳
如何在google maps Infowindow中渲染html？
我试过几种不同的方法，但似乎都不管用。
我的代码：
import React, { Component, useState } from 'react';
import ReactDOMServer from 'react-dom/server';
import { GoogleMap, LoadScript, useLoadScript, InfoWindow, Marker, } from '@react-google-maps/api'
export class Mark
浏览 30提问于2020-05-19得票数 0
3回答
仍然有关于ReactJS =的愚蠢问题)，有什么方法可以添加公共函数来响应组件吗？我试着做这样的事情：
var LoginForm = React.createClass({
getInitialState: function() {
},
render: function() {
},
MyFunc: function () {
}
})
...
var login_form = LoginForm({});
React.renderComponent(login_form, document.body);
...
login_form.M
浏览 3提问于2014-10-05得票数 6
回答已采纳
我正在尝试使用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
2回答
我试着用React和我的Express后端。目前，我使用React作为我的模板语言。
我的视图是.jsx文件。
/* Express */
const express = require('express');
const app = express();
const server = require('http').createServer(app);
const session = require('express-session');
...
/* Express application parameters */
app
.set
浏览 3提问于2017-07-23得票数 1
回答已采纳
1回答
我一直试图使用react上下文更新应用程序上几个屏幕使用的全局状态，这似乎是我找到的建议。
然而，每次在屏幕中更新上下文时，它都会再次卸载和挂载。我怎么才能防止这件事？
。如果单击该按钮，您将从我的useEffect中看到一个新的控制台日志。
代码如下：
import React, {
useContext,
useState,
useEffect,
createContext,
Dispatch,
SetStateAction
} from "react";
import { Button } from "react-native";
浏览 4提问于2022-04-03得票数 0
回答已采纳
在getInitialState中初始化组件的实例变量是否相关？
例如：
var Chat = React.createClass({
getInitialState: function() {
this.messages = []; // Instance variable initialization - EDIT: better as state variable?
this.scrollToBottom = false; // EDIT - Instance variable which is not a state
return {
浏览 0提问于2015-05-28得票数 1
import React from 'react';
import ReactDOM from 'react-dom';
import axios from 'axios';
var mode=['recent', 'alltime'];
var Button = React.createClass({
render(){
return <input type={this.props.type} onClick= {this.props.onClick} text={this.props
浏览 4提问于2016-08-23得票数 1
回答已采纳
给定以下代码，我想知道是谁呈现了实际的消息。由于流程应该从父组件(这里是ScreenOne )转到子组件( Heading )，那么是不是父组件向下发送消息到Heading，后者将html元素返回给父组件，然后父组件将实际消息呈现为最终停止？所以从本质上讲，它是从父母到孩子，再回到父母？ // Parent
export default class ScreenOne extends React.Component {
render () {
return (
<View>
<Heading message={'Custom
浏览 20提问于2020-09-08得票数 2
回答已采纳
我在互联网上发现了这一点："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框架是如何在引擎盖下工作的，可能需要一些澄清。特别是React如何优化DOM的更新过程(通过确定DOM的哪一部分实际上在呈现之间发生了更改)。
例如，实现A和B的区别是什么？
实现A:
// ParentComponent.js
function ParentComponent(props) {
const [clicks, setClicks] = useState(0);
const ChildComponent = (props) => {
return (
<div>
浏览 9提问于2022-09-12得票数 1
回答已采纳
我的组件重渲染有问题。我尝试将应用程序上下文和播放器上下文中的上下文分开，这样玩家上下文就可以改变，而无需更新下面仅使用App的Epg组件。
但我需要在我的Epg组件中为播放器上下文设置一个值。因此，我尝试在我的App.js中使用一个名为"setPlayerAsset“的回调函数，并将其发送到Epg组件。
问题是，当我更新播放器上下文时，Epg组件重新呈现，声称setPlayerAsset螺旋桨已经改变了。
有什么办法解决这个问题吗？
我有两个上下文文件：
appContext.js
import React, {
createContext, useMemo, useReduce
浏览 9提问于2022-03-04得票数 0
我用翻译问一个问题，因为在一个俄语网站上，我不希望得到帮助。对不起我的英语。
在使用Redux的必要性方面，我遇到了一个问题。我重新做了我的临时安排和布局。但是现在，当您浏览页面时，整个区域将被重新绘制。
特设：
import Router from 'next/router'
import { connect } from 'react-redux';
import React, { Component } from 'react'
import { getAccount as getAccountAction } from 'acti
浏览 1提问于2020-06-20得票数 0
回答已采纳
2回答
我在render()中使用了React props，但不想在每个render()上执行，那么存储昂贵计算结果的最佳位置是什么？
constructor(props) {
super(props)
const result = this.doExpensiveCalculation(props)
}
componentWillReceiveProps(nextProps) {
// if nextProps differ from props
const result = this.doExpensiveCalculation(nextProps)
}
doE
浏览 0提问于2017-06-08得票数 1
我有一个显示地图的铯项目样本。我添加了一个简单的onClick，它设置了一些没有在任何地方使用的状态--我只是设置了它。不过，除非我移除terrainProvider，否则会导致整个地图重新绘制和闪烁。示例(terrainProvider被注释掉)如果移动/单击鼠标，整个铯UI会闪烁并重新绘制所有内容。我用的是React 17，铯1.14.3 (铯1.86.1)。知道怎么回事吗？
import React, { useState } from "react";
import { Cartesian3, Color } from "cesium";
import
浏览 4提问于2022-06-14得票数 1
回答已采纳
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
如果父母重新呈现，反应中的孩子也会被重新呈现，不管传递的道具是否改变。
，为什么会这么做？如果当父母呈现时，如果不重新呈现子元素(没有更改的道具)，那么会有什么问题呢？
更新:我在分析器中谈到了这一点：
示例代码：
App.tsx：
import React, { useMemo, useState } from "react";
import "./App.css";
import { Item, MyList } from "./MyList";
function App() {
cons
浏览 8提问于2021-01-09得票数 15
我还有点开始使用react，现在我已经使用了我的第二个解决方案()来显示/隐藏组件。
我现在的问题是，如果我有多个子元素，并且需要打开另一个组件(首选项)(我已经管理了这个组件，然后单击外部或其他地方隐藏它)，但同时我需要将信息传递给另一个组件。我已经附上了我的小样带。我的问题是如何从Child/Child2组件(比如它是_preferences或坐标)传递给Preferences组件？
编辑：添加了jsfiddle链接。
整个代码片段：
<html>
<body>
<script src="https://cdnjs.cloudflare.c
浏览 4提问于2015-04-28得票数 0
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
回答已采纳
1回答
import React from 'react';
const App = () => {
console.log('app render');
return (
<div>
<Children />
</div>
);
};
const Children = () => {
const [update, setUpdate] = React.useState(false);
console.log('children render');
浏览 3提问于2022-06-05得票数 0
1回答
我正在创建一个简单的倒计时应用程序React，我很难理解setInterval是如何工作的，同时React重新呈现组件。例如，下面的代码让计时器继续运行，即使我使用了clearInterval onPause()。
let startTimer;
const onStart = () => {
startTimer = setInterval( ()=>{
if ( timeRemaining === 0 ) {
clearInterval(startTimer);
s
浏览 16提问于2022-10-12得票数 1
回答已采纳
我有一个表单组件，在其中我为它提供了一个验证函数。当我在FC中定义验证函数时，它可以工作。但是当我在FC之外提取这个函数时，它不会被调用。
这样做是可行的：
import { FC } from 'react';
import { Form } from 'react-final-form';
const MyComponent: FC = () => {
const validate = (values: ValidationValues) => { ... }
return (
<Form
onSubmit={
浏览 1提问于2019-11-28得票数 2
回答已采纳
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应用程序上使用上传图片：
在选择和上传图像时，我会看到图像的预览，以及删除、添加更多内容的选项：
单击“继续”按钮后，reporting (来自const [reporting, setReporting] = useState(false);)的状态设置为true，我认为这将触发DOM的重新呈现，包括UploadManager组件的消失，该组件包含上面所示的Uppy仪表板。现在，呈现一个<ReportForm>组件：
...
{reporting ? (
<ReportForm assetReferences={files}
浏览 16提问于2021-11-05得票数 0
回答已采纳
我有下面的代码从教程点在成员1.10。效果很好。
<!DOCTYPE html>
<html>
<head>
<title>Emberjs displaying list of items</title>
<!-- CDN's-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.1/handlebars.min.js"></script>
浏览 3提问于2016-03-12得票数 0
回答已采纳
1回答
我正在尝试重构从混合到HOCs，以便我可以升级到最新的反应(我目前正在使用React 13/ES5)。当我的组件加载时，mixin能够访问一个数据对象this.data，该对象具有一个带有路由的query属性。
React.createClass({
mixins: [myMixin],
data: {
query: "/api/foo"
},
componentDidUpdate(): function(){
}
...
}
在componentDidMount 中，它将查询该路由，返回数据并将其置于状态。
var myMixin = Reac
浏览 4提问于2017-04-01得票数 1
回答已采纳
我有一个有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
在我的应用程序中，我使用了reactjs、react路由器和redux。我正在使用异步操作，下面是我的action.js代码
signUser(state,user) {
return function (dispatch){
return dispatch(requestSignUp());
}
}
export default function requestSignUp(){
return {
type: Actions.REQUEST,
signUserReducer:{
action: Actions.REQUEST
浏览 4提问于2016-04-06得票数 2
1回答
在下面的程序中，当我单击任何按钮时，另一个按钮也会重新呈现，即使我已经使用了React.memo()。此外，只有其他按钮得到重新呈现，而不是其他计数。为什么？我有这样一个父组件：
import React, { useState } from 'react'
import Count from './Count'
import Button from './Button'
import Title from './Title'
function ParentComponent() {
const [age, setAge
浏览 2提问于2021-01-25得票数 1
我目前在一个涉及Firebase自定义声明的项目中工作，他们需要管理员和用户角色。我现在已经把它弄好了。 当用户以管理员身份登录时，它会显示管理员导航栏；当他们只是一个用户时，它会显示用户导航栏。 但是，在用户刷新页面之前，我的导航不会改变。 解决这个问题的最好方法是什么？ Header.js import React, { Component } from 'react';
import {Link} from 'react-router-dom';
import './Header.scss';
import PublicNavigatio
浏览 28提问于2020-10-12得票数 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 State和Javascript对象之间的区别是什么？当状态改变时，dom会自动改变，当对象改变时，dom也会改变。
浏览 15提问于2019-11-03得票数 0
React在构造函数的react中具有实例属性和状态属性。
实例属性-它不会重新呈现视图。用于存储值。State属性-它存储并重新呈现视图。
除了以上原因之外，是否有任何其他原因或差异，或者何时应该在React类组件构造函数中同时使用实例和状态？
示例：
class example extends Component{
constructor(){
this.state = {
name: 'albert'
};
this.name = 'albert';
}
}
浏览 1提问于2017-09-14得票数 2
我正在尝试让MobX与react中的功能组件一起工作。我想在不使用装饰器的情况下做到这一点。我设置了一个带有create-react-app的应用程序，添加了MobX和MobX-react作为依赖项。然而，我似乎不能让观察点在功能组件中工作。
import React from 'react';
import { extendObservable } from 'mobx';
import { observer } from 'mobx-react';
const Test = () => {
extendObservable(t
浏览 0提问于2018-02-01得票数 13
回答已采纳
2回答
关键的反应是什么？
、、、
import React from 'react'
import ReactDOM from 'react-dom'
class App extends React.Component{
constructor(props) {
super(props)
this.state = {
list: [{id: 1,val: 'aa'}, {id: 2, val: 'bb'}, {id: 3, val: 'cc'}]
}
}
click()
浏览 2提问于2017-08-31得票数 1
回答已采纳
当我无法访问反应性路由器的历史道具时，我应该如何将用户重定向到不同的url？
我想做的是，当用户单击导航菜单上的注销链接时，用户将被重定向到根路径'/‘。
handleAuthentication(event) {
this.props.toggleAuthenticationStatus(() => {
// I want to redirect an user to the root path '/' in this callback function.
});
}
当用户单击导航菜单上的登录/注销链接时，将调用handleAu
浏览 1提问于2017-06-18得票数 0
我有一个简单的React组件，每次单击按钮时都设置相同的值：
import React, { useState } from 'react';
import './style.css';
let data = { title: 'ABC' };
export default function App() {
const [foo, setFoo] = useState();
console.log('Rendered');
return (
<div>
<button on
浏览 2提问于2021-08-18得票数 3
回答已采纳
1回答
我正在构建一个React应用程序，Header组件有一个菜单按钮，它可以切换侧栏并进行注销。换句话说，它只需要在用户登录时出现。
我在后端生成一个JWT，并将其存储在localStorage中，这样auth()方法就可以得到它，并决定用户是否登录。问题是，当我登录时，标题不会出现。如果我刷新页面，它就会出现。如果我做的相反，这意味着注销，我被重定向到登录页面，但标题仍然在那里。如果我刷新页面，它就会停止显示自己。
我在auth方法中设置了一个console.log()，我意识到它对触发器没有反应。
我正在使用Ant设计，应用程序结构是
App.tsx
|
| - views
浏览 2提问于2020-07-07得票数 1
我如何修复警告'createGraphics‘函数使得useEffect钩子(在第77行)的依赖关系在每次渲染时都会发生变化。将其移动到useEffect回调中。或者，将'createGraphics‘定义包装到它自己的useCallback()钩子中。 另外，当我试图创建空的依赖数组时，我得到了这样的警告- React Hook有一个缺失的依赖：'createGraphics‘。包括它或删除依赖项数组 import React from "react";
import * as d3 from "d3";
import { Graph
浏览 20提问于2020-12-16得票数 5
回答已采纳
我刚刚开始学习ReactJS，并有一些问题。我正在阅读文档，但是我找不到我想要的答案。下面是一个示例：
var Awesome = React.createClass({
getInitialState:function() {
return {
txt : ["1","2","3","4","5"],
isTrue : true
}
},
handleClick:function() {
this.setState({
isTrue : !
浏览 2提问于2015-06-03得票数 1
回答已采纳
App.js： class App extends React.Component {
state = {
pokemons: [
{ name: 'Charmander_Managed_By_State', level: 5 }
]
}
propsLevel = 5;
levelPokemonHandler = () => {
this.setState({
pokemons: [
{ name: 'Charmander_Managed_By_State', level
浏览 21提问于2019-09-28得票数 0
3回答
对于JS，我是新手，我现在对组件生命周期方法的工作方式感到困惑；在我的例子中，这与ReactJS.org文档完全矛盾。componentDidMount()应该在呈现()之前执行，但呈现()应该在componentDidMount()之前执行。
我的源代码：
import React from 'react';
import '../main.css';
//import sam from "../images/gallery/Farmer1.jpg";
import galleries from './GalleryImages.js&
浏览 6提问于2019-09-21得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
