为什么对Ref对象的更改会在此代码中触发重新呈现
Ref对象是React中的一个特殊对象，用于在函数组件中存储和访问DOM元素或组件实例。当对Ref对象进行更改时，React会触发重新呈现组件的过程。
在React中，组件的重新呈现是由组件的状态或属性的更改触发的。当组件的状态或属性发生变化时，React会重新计算组件的虚拟DOM，并将其与之前的虚拟DOM进行比较，找出需要更新的部分，并将更新应用到实际的DOM中。
Ref对象的更改会触发重新呈现的原因是，Ref对象的更改可能会导致组件的输出发生变化。例如，当Ref对象用于引用一个DOM元素时，当Ref对象的值发生变化时，意味着组件需要引用不同的DOM元素，因此需要重新呈现组件以更新对DOM元素的引用。
另外，Ref对象的更改也可能会影响到组件的副作用。副作用是指组件在渲染过程中执行的与界面无关的操作，例如数据获取、订阅事件等。当Ref对象的值发生变化时，可能会导致组件的副作用发生变化，因此需要重新呈现组件以应用新的副作用。
总结起来，对Ref对象的更改会在此代码中触发重新呈现，是因为Ref对象的更改可能会导致组件的输出发生变化或副作用发生变化，因此需要重新计算和应用组件的变化。这样可以确保组件的输出与最新的状态和属性保持一致，并且可以正确处理副作用。
相关·内容
4回答
为什么在直接变异状态时响应更新？
javascript、reactjs、setstate
在下面的示例中，我使用一个ES6映射作为React中的状态值：
class App extends React.Component {
constructor(props) {
super(props);
const results = new Map();
results["group1"] = [{ value: "..." }, { value: "..." }];
this.state = { results };
}
onUpdateClick(i) {
this.state.r
浏览 8提问于2020-06-19得票数 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
回答已采纳
4回答
React.js如何重新呈现组件？
reactjs
我是新来的。我在看他们的医生了解反应是如何运作的。因此，有人提到，当state/props/setState()更改/调用时，重新响应整个组件。
此外，我还看到react元素是不可变的，只有在发生更改时才会呈现它们。因此，当react试图呈现组件时，它实际上遍历所有元素，检查差异，并且只呈现数据被更改的元素。它不会简单地重新呈现整个组件。
我说得对吗？还是我的理解错了？
浏览 8提问于2020-10-23得票数 3
回答已采纳
3回答
ReactJS重呈现的规则是正确的吗?如果组件的状态发生变化，那么整个子树就会被重新呈现？
reactjs、react-state、virtual-dom
首先，这里的“重呈现”的意思是
任何类组件的render()方法都被调用，或
函数组件的函数被调用。
让我们将实际DOM中的元素称为“刷新”，以区别于“重新呈现”。
“重呈现”的规则是否简单如：
当更改组件的任何状态时，组件和该组件下的所有子树都将重新呈现。
就这样？例如：
function A() {
console.log("Component A re-render");
return <div>Component A says Hello World</div>;
}
function App() {
浏览 3提问于2020-02-18得票数 4
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
2回答
仅在刷新时响应焦点useRef
javascript、reactjs、react-hooks
我正在使用<NavLink />将导航定向到特定的组件。我认为这是问题所在，但问题是：
当完成路由和组件呈现时，我试图让一个元素聚焦。现有的方法有些工作-滚动工作(即，我想要聚焦的元素在底部附近，自动滚动工作。但是，焦点框不存在)。但是，当我刷新时，它可以按需要工作-焦点具有滚动到功能，并且在元素周围有一个突出显示的框。
我不知道问题是什么，但我认为这是一个事实，即组件从<NavLink />获得它的初始呈现。
以下是我如何使用焦点：
import React, { useEffect, useRef } from "react";
const Foc
浏览 4提问于2022-03-20得票数 0
2回答
为什么ReactClass中的function函数在表单输入更改事件上被反复调用
javascript、reactjs、react-bootstrap
我有一个function引导React，其中createList函数在任何一个表单输入(workDone或hoursAndMinutes)的每个键输入上都会被调用。我刚接触过reactjs，也许这是正常的行为，但在我看来并非如此，因此我做错了什么。
var SubjectBox = React.createClass({
getInitialState(){
return({
totalHoursAndMinute:0,
subject:'',
workDone:'',
hoursAndMinutes:
浏览 3提问于2016-03-25得票数 3
回答已采纳
1回答
虚拟DOM与真实DOM脱节
jquery、dom、reactjs
最近，我们想要在React中实现一些动画，下面是我们想要的:当发生了什么事情(接收到来自webSocket的消息)，重新排序一个react component.In my的列表时，列表中的项目的一个位置将首先更改.So，然后将项目从原始位置淡出，然后将其淡出到正确的位置。我的解决方案是使用JQuery删除和添加相应的项目DOM，因为它很容易实现动画(淡入和淡出)，同时我还正确地更新了底层数据结构(它依赖于呈现)，希望在emitChange next time.However时根据状态正确地使React正确，即使底层数据结构正确，React也不像预期的那样工作，令人感兴趣的部分仍然是当我检查Ch
浏览 2提问于2016-03-14得票数 4
10回答
ReactJS --在调用"setState“时，render会被调用吗？
javascript、reactjs
每次调用setState()时是否重新呈现所有组件和子组件？
如果是，为什么？我认为，当时的想法是，只有在状态发生变化时，才能做出尽可能少的反应。
在下面的简单示例中，两个类在单击文本时都会再次呈现，尽管在随后的单击中状态不会改变，因为onClick处理程序总是将state设置为相同的值：
this.setState({'test':'me'});
我原以为只有当state数据发生更改时，才会出现呈现。
下面是示例和嵌入式代码段的代码：
var TimeInChild = React.createClass({
render: function()
浏览 17提问于2014-07-13得票数 641
回答已采纳
4回答
什么是“更新”的反应？
javascript、reactjs
正如所说：
更新发生后立即调用componentDidUpdate()
但我注意到，即使浏览器DOM元素没有更新，也会调用componentDidUpdate()。
那么，React文档更新发生意味着什么？
浏览 1提问于2018-11-12得票数 5
回答已采纳
1回答
反应:所有的方法在课堂上运行2次。
javascript、reactjs
首先，对不起，如果我的英语不完美，我学习:x
如果在呈现函数中编写“console.log(‘test’)”，所以我在控制台中看到两次"test“.
只是为了指定，当我为组件使用函数并在类中使用所有默认方法(构造函数、呈现、componentDidMount、.)时，没有这个问题。在创建或修改组件时运行两次(不是析构，componentWillUnmount只运行一次)。
问题不是来自我的代码，我试图创建一个新的应用程序(用创建-反应-应用程序)和更改函数的类，但结果是相同的(即使在另一台计算机)。
创建项目后唯一的更改文件(我只更改了第1行、第5行和第7行)：
import Reac
浏览 1提问于2020-04-12得票数 0
回答已采纳
1回答
谁能帮我解释一下为什么我们需要在表现性组件上使用componentDidMount？
reactjs、redux
例如，对于下面的例子，为什么我们需要使用fetchPosts来获取post索引组件上componentDidMount下的所有帖子？ class PostIndex extends React.Component{
componentDidMount(){
this.props.fetchPosts();
}
render(){
const {posts, deletePost} = this.props;
return (<div>
<ul>
浏览 55提问于2019-12-31得票数 0
4回答
角2有重绘优化吗？
javascript、angular、angular2-template
从几个月以来，我一直在使用React，而且React并不只是简单地重新呈现一个组件，而是找到了不同之处，并进行了这些更改。角质2做这样的事吗？
而且，当检测到状态变化时，角2是否重新呈现根节点中的所有组件，还是只重新呈现那些检测到变化的特定组件及其子树？
浏览 5提问于2016-04-24得票数 5
回答已采纳
1回答
理解以下情况下的不可变性和虚拟DOM
javascript、reactjs、immutability、virtual-dom
在阅读了关于不变性的文章之后，我试图了解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
回答已采纳
2回答
对道具更换反应组件重新渲染
javascript、reactjs
import React from 'react';
import { render } from 'react-dom';
const x = [];
const App = props => <div style={styles}>{JSON.stringify(x)}</div>;
render(<App queries={x} />, document.getElementById('root'));
setInterval(x => x.push(Math.random()),
浏览 0提问于2018-05-18得票数 3
回答已采纳
2回答
react状态和Javascript对象之间的差异
reactjs
React State和Javascript对象之间的区别是什么？当状态改变时，dom会自动改变，当对象改变时，dom也会改变。
浏览 15提问于2019-11-03得票数 0
2回答
当使用触摸手势时，呈现调用每个setState
reactjs、hammer.js
在我的react.js应用程序中使用触摸手势有问题。问题是，对每个setState调用都调用了render()函数，而不仅仅是在结束时。只有在使用处理抽头时才会发生这种情况。如果使用常规按钮，则只调用render()函数一次。
有几件事要注意：
我也尝试过使用和，结果完全一样。
在这个示例中，我只使用了Tap“手势”，但是如果使用的话，结果是相同的。
我尝试使用MobX作为状态。但同样的结果。
下面是我尝试尽可能简单的示例(这个示例没有意义，但说明了问题)：
import React from 'react';
import ReactDOM from &#
浏览 3提问于2017-11-20得票数 0
2回答
如何响应更新DOM的部分内容？
reactjs、virtual-dom
我知道这个问题显然已经讨论了很多，但我不知道如何研究我的问题，这是相当具体的，我希望它遵循这里的规则。
我知道要决定是否更新DOM，请将虚拟DOM与重新呈现的DOM进行比较。但我只是不明白万一它决定更新它-它是更新了特定重呈现组件的所有元素，还是它知道只更新组件的更改元素？
提前谢谢你，
浏览 3提问于2018-08-30得票数 6
回答已采纳
2回答
如果一个无状态组件的属性没有改变，它会重新呈现吗？
reactjs
我从React学到的一件事是，如果组件的道具没有改变，那么React就不会费心重新渲染组件。对于无状态组件也是这样吗？或者它们的行为更像是“愚蠢的”函数，并且每次都会被执行？
例如，如果我有：
import StatelessComponent from '../StatelessComponent';
export default class DocumentsTable extends React.Component {
state = {
something: 'foobar',
};
render() {
return (
浏览 1提问于2017-10-14得票数 51
回答已采纳
4回答
react中this.name和this.state.name的区别是什么？
javascript、reactjs
React在构造函数的react中具有实例属性和状态属性。
实例属性-它不会重新呈现视图。用于存储值。State属性-它存储并重新呈现视图。
除了以上原因之外，是否有任何其他原因或差异，或者何时应该在React类组件构造函数中同时使用实例和状态？
示例：
class example extends Component{
constructor(){
this.state = {
name: 'albert'
};
this.name = 'albert';
}
}
浏览 1提问于2017-09-14得票数 2
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频活动推荐
腾讯云开发者
