为什么我的组件在react.js 16.x中呈现两次？
在React.js 16.x中，组件在呈现过程中可能会出现两次的情况。这是由于React.js在进行更新时引入了一种新的调和算法——Fiber Reconciliation。
在React.js之前的版本中，组件的更新是通过递归调用组件树来实现的，这可能导致大型组件树的更新时间过长，造成用户界面卡顿。为了解决这个问题，React.js引入了Fiber Reconciliation算法，将更新过程分成多个阶段，并且可以中断和恢复更新过程，从而提升应用的性能和响应能力。
由于Fiber Reconciliation的实现方式，导致组件在更新过程中可能会被呈现两次。具体来说，React.js首先会执行组件的render方法来生成虚拟DOM树，然后通过比较新旧虚拟DOM树的差异，计算出需要更新的部分。接着，React.js会将这些需要更新的部分应用到真实DOM树上，然后调用组件的生命周期方法。
在React.js 16.x中，由于Fiber Reconciliation的引入，组件的生命周期方法的调用时机可能会有所变化。某些生命周期方法，例如componentWillReceiveProps和componentWillUpdate，在Fiber Reconciliation中可能会被多次调用。这就导致了组件在React.js 16.x中呈现两次的现象。
虽然组件在React.js 16.x中可能会呈现两次，但这不一定意味着性能有所降低。相反，由于Fiber Reconciliation的优化，React.js能够更高效地处理组件的更新，提升应用的性能和响应能力。
对于解决组件呈现两次的问题，可以考虑以下几点：
- 确保组件的shouldComponentUpdate方法正确实现，以减少不必要的组件更新。
- 尽量避免在render方法中引入副作用，例如异步请求或者订阅事件，以免造成额外的组件更新。
- 使用React.js的调试工具，例如React DevTools，来分析组件更新的过程，找出可能导致组件呈现两次的原因。
对于推荐的腾讯云相关产品，具体根据项目需求和使用场景来选择，可参考以下产品：
- 云服务器（CVM）：提供可扩展的云服务器实例，适用于各种计算需求。
- 云数据库 MySQL版（CDB）：高性能、可扩展的关系型数据库服务，适用于数据存储和管理。
- 云存储对象存储（COS）：安全、高可靠性的云端对象存储服务，适用于多媒体处理、文件存储和备份等需求。
- 人工智能平台（AI）：提供多种人工智能能力和服务，例如图像识别、自然语言处理等。
- 移动开发平台（MCP）：提供移动应用的开发、测试、分发等一站式解决方案。
- 云安全中心（SSP）：全面监控和保护云端资产安全的服务，提供防火墙、DDoS防护等功能。
具体产品介绍和链接地址可参考腾讯云官方网站。
相关·内容
我有一个React.js组件，它是这样呈现的：
<Social email={this.state.email} />;
页面上有一些更新this.state.email的事件，因此要通过render，这会向Social组件发送一个新的email属性。
在这个Social组件中，我监听的更新如下：
componentWillReceiveProps: function(nextProps) {
console.log('received props update', nextProps.email);
this.doSomeWork();
浏览 0提问于2014-12-24得票数 12
回答已采纳
我在读react.js的官方文档。这是他们的。
我对这一段感到困惑：
除非setState()返回false，否则shouldComponentUpdate()总是会导致重呈现。如果正在使用可变对象，并且不能在shouldComponentUpdate()中实现条件呈现逻辑，那么只有在新状态与前一状态不同时才调用setState()将避免不必要的重新呈现。
问:如果使用可变对象，并且条件呈现逻辑不能在setState()中实现，为什么调用shouldComponentUpdate()将避免不必要的重呈现。
浏览 1提问于2018-05-04得票数 0
当根组件的状态发生变化时，React.js假设重新呈现所有子组件(子组件)？
请看下面的示例：
在上面的示例中，只有Search子组件在Dashboard组件的状态发生变化时才重新呈现.但其他子组件-区段、图表和Widget不重新呈现.
这就是我的renderComponent的样子：
React.renderComponent(Dashboard({title: "D", children: [Section({title: "S", children: [Widget({title: "W"}), Chart()]})]}), documen
浏览 7提问于2014-05-22得票数 1
回答已采纳
这可能是一个新手问题，但我想知道为什么React.js会两次呈现组件--一次是在调用getInitialState()生命周期方法时，另一次是在componentDidMount()之后。
您可能希望在componentDidMount()之前呈现某项内容的具体情况是什么？
浏览 1提问于2015-02-25得票数 1
回答已采纳
2回答
我是reactjs的初学者，并且试图理解一些概念，比如父母和孩子在reactjs中呈现的内容和方式。
从研究中我发现，反应首先使孩子成为父母，但我却无法得到正确的答案--如何以及为什么？如果子程序不能呈现，我猜在react 16中有一个名为componentDidCatch的生命周期，如果子进程不能呈现，那么在react 16之前有什么，以及我们如何处理这些场景。
请帮帮我
浏览 1提问于2018-10-24得票数 7
回答已采纳
我最近开始学习react.js，我在理解JavaScript中的map()函数时遇到了问题。我提供了代码片段，我试图在其中迭代"person“组件，而我试图在控制台上输出结果时，我只观察到它的迭代两次，但这些组件在这里的浏览器图像描述中只显示了一次。有人能告诉我为什么它会迭代两次吗？
//这是状态
class App extends Component {
state = {
persons: [
{id:'aksjsdk',name:'ABC',age:'26'},
{id:'aksjajsd
浏览 5提问于2020-05-12得票数 0
我有一个简单的React.js应用程序，试图在回调的门户中呈现内容，有人知道为什么它没有呈现任何内容吗？
import React from 'react'
import ReactDOM from 'react-dom'
import './App.css';
function App() {
const showElement = React.useCallback(() => {
const element = document.createElement('div');
document.qu
浏览 9提问于2022-01-11得票数 2
回答已采纳
我已经开始学习react.js，在它的生命周期中，我得到了这个shouldComponentUpdate方法。作为回报，我通过了false，它仍然影响着dom。而在我的参考视频中，这并不会影响到我的感情。
上面的()
shouldComponentUpdate ( nextProps, nextState ) {
console.log( 'In shouldComponentUpdate', nextProps, nextState );
return false;
}
我正在使用这个版本："react": "^16.9
浏览 2提问于2019-09-10得票数 0
回答已采纳
2回答
我正在学习使用react.js，在使用事件处理程序时遇到了一些问题。最后一个问题是:是否可以使用服务器端呈现并自动将事件处理程序发送到客户端？
下面是我的示例:我有一个呈现服务器端并发送到客户端的index.jsx
var React = require("react");
var DefaultLayout = require("./layout/default");
var LikeButton = React.createClass({
getInitialState: function() {
return {liked: false};
浏览 1提问于2016-03-26得票数 23
回答已采纳
今天，我已经完成了ReactJS的hello world示例，
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script>
上面包含的两个CDN，只是想知道，它们之间有什么区别，为什么我们需要包含它们，目的是什么？
浏览 6提问于2016-02-01得票数 0
每次在React.js中执行渲染时，UI都会滚动到页面顶部。
JSFiddle：
有什么好的或被动的方法来阻止这种情况吗？
例如，如果用户向下滚动页面，然后按下导致呈现的按钮，则UI将停留在与以前相同的滚动位置。
// Forces a render which scrolls to top of page
this.setState({data: data});
更新:为什么某些渲染的UI会滚动到顶部，而其他渲染则不会？
浏览 46提问于2015-05-21得票数 42
回答已采纳
在reactjs内部有以下错误：
未知错误:不变冲突: getDOMNode()：组件必须挂载才能有DOM节点
什么意思？我能做些什么？
堆栈跟踪：
invariantDev react.js:14392
ReactComponentBrowserEnvironment.Mixin.getDOMNode react.js:4072
React.createClass.scrollToBottom app.js:14124
(anonymous function)
浏览 0提问于2014-06-03得票数 2
我最近才开始研究javascript和React.js。目前，我的main.html文件中有几个脚本标记，我需要能够访问React.js组件中这些标记中的一些变量。有这样的事吗？
浏览 2提问于2016-07-01得票数 5
1回答
无通量同构react.js
、、、、
我是react.js的新手。我想做一个同构的react.js组件。我想知道有没有可能使它没有通量模式？现在，我有了很少的组件，组件中有api提取方法，而且这个api调用运行了两次:(。
为了更清楚起见，我希望在服务器端呈现DOM，并希望在浏览器端处理react.js组件事件。
我的组件看起来像：
Class MyComponent extends React.Component{
// my component code
// components events
render() {}
}
if (!is_server()) {
apiFetch.my_api_cal
浏览 1提问于2016-04-24得票数 0
回答已采纳
我目前正在学习React.js，因为我知道这只是MVC的观点。我来自一个角度堆栈，我开始担心一些关于React.js的事情。
其中之一是，如果您有一个部分html文件，那么如何将该文件注入另一个文件以构建一个正常工作的html文件。
例如。如何将页眉、正文和页脚文件包含到一个文件中？
我读过关于dangourouslyinnerHTML的文章，我不想因为XSS的原因而使用它。我错过了什么不同的方式吗？或者，这是我必须要大惊小怪才能编译的东西吗？
浏览 4提问于2015-12-09得票数 0
回答已采纳
我正在尝试在我的React.js应用程序上实现React.js路由器，但是当我将路由器添加到我的程序中时，我就开始收到一个奇怪的错误。
ReactDOM.render(
<BrowserRouter>
<App />
<Route path="/" component={Headline}></Route>
<Route path="/economy" component={Economics}></Route>
</BrowserRouter&
浏览 2提问于2020-10-30得票数 0
回答已采纳
1回答
反应约束法
、、、
在React.js中，最好在构造函数中定义方法绑定，如下所示：
constructor(props){
this.poo = this.poo.bind(this);
}
在呈现方法中，它的性能比绑定更好。
那么箭头函数呢？
poo = () => {}
它也会影响渲染方法中的性能吗？
浏览 3提问于2017-09-24得票数 3
回答已采纳
我还在学习React.js。最近，我用React.js建立了一个网站。我试图向react站点添加一个演示页面(纯html和javascript)。演示页面由一个index.html、一个bundle.js和一个css样式表组成。我在react站点的根部创建了一个演示文件夹，并将演示文件放入该文件夹中。我的问题是如何通过进入来访问演示页面，我是否必须使用react路由器并将演示页面包装成react组件？提前感谢！
浏览 2提问于2017-02-22得票数 1
回答已采纳
2回答
我正在浏览React ，并看到了这个示例，在这个示例中，它们展示了什么是不纯的组件。
我无法理解的是，在第5行中，我们将guest变量递增1，但是为什么每次调用<Cup />函数时它都会增加2，因为它是在右边呈现的？
浏览 29提问于2022-07-26得票数 0
回答已采纳
3回答
我想问你关于在React.js中重定向的问题。
下面是中Home.js的修改
(这不是我的私人GitHub回购！它是开源库)
import React, { useState } from 'react'
import { Redirect } from 'react-router-dom'
const Home = () => {
console.log('Home');
const renderRedirect = () => {
return <Redirect to={{
pathnam
浏览 21提问于2019-11-18得票数 2
回答已采纳
我只是想了解一下react.js，也就是说，我刚刚在网上学完了一些教程。
我对redux完全陌生，它是我看过的一些视频教程的一部分。我越是深入研究它，它对我来说就越没有意义，因为redux取代了react.js最初的想法。在react中，组件有自己的状态，可以通过道具向下传递，以保持工作流自上而下。
使用redux，我们现在试图使整个应用程序状态成为全局的，并且我们必须定义操作(全局)状态的操作，那么除了“普通的”javascript发布/订阅或观察者模式之外，这些操作还有什么呢？或者也许我弄错了？-非常感谢你的澄清。
浏览 4提问于2016-10-11得票数 37
回答已采纳
2回答
我有点新的反应，我试着学习什么时候一个组件将重新呈现。通常我很擅长自己搞清楚这件事，但我似乎找不到其中的逻辑
表A
const Science = () => {
console.log('Rendering')
useEffect(() => console.log('Effect ran'))
console.log('Returning')
return <div></div>
}
这输出
Rendering
Returning
Rendering
Returning
浏览 2提问于2020-04-23得票数 0
回答已采纳
我正在阅读“开发”一书，目的是在没有任何react.js经验的情况下学习react.js本地开发。有些代码让我困惑了一段时间，在注释之后的一段代码是：
var App = React.createClass({
render: function() {
// why there is this line and what does 'this' in the line stand for?
var txt = this.props.txt
return (
<div>
<h1>
浏览 4提问于2016-02-25得票数 1
回答已采纳
1回答
为什么要用复古传奇？
、、、
最近，我开始学习React.js，并通过一个小项目学习。
在学习过程中，我无法清楚地弄清楚为什么我会使用“反应”或“反应”。
据说，它是异步地处理redux状态值。
但是我们不是已经有异步/等待了吗？难道我们不应该使用异步/等待从组件文件调用api，从服务器获取一个值并将其存储在redux存储中吗？
我看过很多关于为什么要使用“反应传奇”的文章，但是这个问题还没有得到回答。
为什么有一个明确的理由使用redux-saga？
浏览 2提问于2019-12-20得票数 1
回答已采纳
我已经在React.js工作了一个月了。我一直在使用Webpack开发服务器，这是一个node.js快速服务器，使我们能够在浏览器上呈现react.js。我想知道使用React.js是否会限制我们只使用node.js http服务器，还是有一种方法可以在React.js中使用简单的http服务器。
我还一直在想，在任何API操作的请求/响应过程中，使用React.js开发具有大部分内容、文本字段、数据等内容的网页是否有用。
浏览 4提问于2016-03-28得票数 0
回答已采纳
在下面的React.js示例中，我想了解从父组件传递给子组件属性的是什么(我正在学习抽搐-toe教程)：
class Square extends React.Component {
render() {
return (
<button className="square" onClick={() => this.props.onClick()}>
{this.props.value}
</button>
);
}
}
然后有一个板组件这样做来呈现每个正方形：
renderSquare(i)
浏览 6提问于2016-11-18得票数 1
回答已采纳
1回答
我试着把角和React.js结合起来。我有一个工作示例项目，我看到了几种将角和React.js结合在一起的方法。我看到的方法之一是在链接函数中创建一个指令并创建function组件。例如，在项目的第一部分中，生成我正在使用的React版本(红色)
.directive('reactElementRepeater', function() {
return {
link: function(scope, element) {
var update_react = function(oldVal, newVal){ //Called every
浏览 3提问于2014-06-25得票数 4
回答已采纳
为什么在React.Js中使用函数内的输出(没有“返回”)时会出现错误？这段代码的真正对应反应是什么？
function App() {
function f() {
document.getElementById("demo").innerHTML = "Hello"
}
f();
return (
<div>
<p id='demo'></p>
</div>
)
}
export default App;
我尝试使用console.lo
浏览 3提问于2022-11-06得票数 -1
回答已采纳
我正在尝试切换一个将其显示值设置为none的类，但它不起作用，为什么？(我正在使用react.js)： function sleep(milliseconds:any) {
return new Promise((resolve) => {
setTimeout(resolve, milliseconds);
});
}
async function setHeight(el:any) {
const size = el.current!.scrollHeight === 288;
浏览 22提问于2021-03-30得票数 0
1回答
我正在为构建在React.js上的站点编写一个chrome扩展，在那里我需要复制一个元素并将其作为元素的同级附加。但是它没有附加，甚至没有一个普通的<div></div>。我不知道react，所以，您能让任何带有reactid的父元素不接受“某些”子类吗？
当我尝试在dev工具中使用Inspect element -> copy -> paste时，它确实附加了，但这可能不一样。
<div data-reactid=".7.0.1.0" class="parent">
<div data-reacti
浏览 5提问于2014-12-17得票数 0
回答已采纳
我有一个简单的react组件，火被打印了一次，但是injectWindowInterval被调用了两次，尽管我设置了标志值，为什么会这样呢？
const Header = () => {
let flag = true;
console.log("fire");
function injectWindowInterval() {
if (flag && window.google) {
flag = false;
console.log(window.google);
}
}
con
浏览 4提问于2022-07-02得票数 -1
在火狐中，React.js组件中的select元素需要2次单击才能更新，但是在Chrome和Safari中第一次单击就可以正确地更新。
它是一个使用Redux +React的组件，select元素的值由通过mapStateToProps传递给它的存储值决定。
显示了select元素的值，但DOM本身在第一次单击时就没有更新。
显示正在传递的正确操作和正在进行的正确状态更改。
我在CodeSandbox中创建了组件树的独立更新(它在这里正确地工作，所以没有多少帮助)：
提前感谢！
浏览 1提问于2018-01-19得票数 2
回答已采纳
在正式文档React.js中，有一个新特性: 0.11版本中的命名空间组件。
参考文献：
var Form = MyFormComponent;
var App = (
<Form>
<Form.Row>
<Form.Label />
<Form.Input />
</Form.Row>
</Form>
);
var MyFormComponent = React.createClass({ ... });
MyFormComponent.Row = React.crea
浏览 2提问于2015-08-30得票数 1
1回答
我目前正在测试，我有一个我无法解决的问题。基本上，我想在单击onClick之前从div.btn中更改它的值。javascript代码在react.js和可用的中。我想要改变的部分是：
React.createElement("div", {className: "img"},
React.createElement("div", {className: "btn noShadow", onClick: this.sendVote.bind(this, this.props.d
浏览 2提问于2015-07-09得票数 1
我正在学习React.js，并且我注意到每个React.js文件似乎都只是JavaScript和HTML的混合体。但是我喜欢为我的HTML和JS拥有不同的文件。因此，我想知道我是否可以在HTML或JS文件中包含这两个独立的文件，但也包括一个链接(或其他什么)，以便它们能够相互通信。
谢谢。
浏览 11提问于2022-09-24得票数 1
1回答
如何将变量值从PHP导入到我的React.js前端。一开始就有可能。
来自赞比亚的谢谢。
来自PHP的变量
{{$category->category_name}}
和来自react.js的div
<div>{category_name}</div>
我不知道从哪里开始，所以对不起，我不能提供我所做的任何工作。
浏览 4提问于2021-07-29得票数 2
回答已采纳
React.js中的当前访问存储在js变量中的硬编码数据。相反，我希望通过向为应用程序运行的python烧瓶服务器发出GET或POST请求来获取这段数据。
React.renderComponent( <App data={dataset}/>, document.getElementById( "App" ) );
假设数据可以由python烧瓶上的url /get_dataset.json访问。怎么修改这里的代码？
浏览 5提问于2015-04-20得票数 1
回答已采纳
在我的一个使用React.js的应用程序的函数组件中，调用getElementsByClassName会返回'undefined'，但很明显，有一个带有className的部分标记。
const ExpansionView = (props) => {
const validExpansion = [
"Classic", "Naxxramas", "Goblins vs Gnomes",
];
//create a function that will filter by validExpansion and
浏览 2提问于2021-11-25得票数 0
1回答
在Backbone.js中，可以通过使用el属性或调用view.setElement()来指定视图的元素。
是否有一种将React.js组件连接到现有DOM元素的等效方法？
浏览 3提问于2014-02-06得票数 6
回答已采纳
1回答
我正试着让我的头围绕着反应，反流和JSX。我有一个简单的文件，我想试着开始工作。
<html>
<body>
<div id="counter"></div>
<script src="bower_components/react/react.js"></script>
<script src="bower_components/reflux/dist/reflux.js"></script>
浏览 2提问于2015-11-09得票数 0
回答已采纳
我是react.js钩子的新手。不知道为什么下面的代码不能工作。
import React,{useEffect,useState} from "react"
function App() {
const [fruit,setFruit] = useState("orange");
setFruit("apple")
return (
<div>
<h1>{fruit}</h1>
</div>
);
}
export default
浏览 0提问于2021-02-17得票数 0
回答已采纳
我对React.js非常陌生。我正在尝试更改一个变量recepies，它的状态是使用钩子。下面是我的代码片段： import React, { useState, useEffect } from 'react';
import './App.css';
function App() {
const [recepies, setRecepies] = useState([]);
useEffect(()=>{getRecepies()}, []);
//const example = Some valid API URL
const ge
浏览 25提问于2020-04-28得票数 0
回答已采纳
1回答
最近，我一直在使用react.js为我的项目开发web接口。我从来不理解用函数创建组件和用类创建组件之间的区别。有什么关系？
职能：
const Component = () =>{
return(
<div>
</div>
)
}
export default component
或班级：
class Component extends React.Component {
render() {
<div>
</div>
}
浏览 0提问于2022-02-25得票数 1
回答已采纳
我正在学习反应钩，我注意到一种奇怪的行为，有人能解释一下为什么吗？
组件被挂载，将状态设置为初始值，然后卸载，然后重新安装和更新！
我知道组件的每个更新都是重新呈现的，但是为什么调用componentWillUnmounted方法(在本例中是useEffect的返回)？
我在学习课堂成分和生命周期的时候也有同样的奇怪行为.
根成分
function App() {
const [visible, setVisible] = useState(true);
return (
<div className='App'>
浏览 10提问于2022-06-02得票数 0
回答已采纳
我有一个React组件：
class Control extends React.Component {
constructor(props) {
super(props);
this.handleSaveFile = this.handleSaveFile.bind(this);
this.handleExecFile = this.handleExecFile.bind(this);
}
handleSaveFile(e) {
...
}
handleExecFile(e) {
...
}
render() {
浏览 12提问于2017-06-26得票数 1
为什么反应显示重复的console.log？我发现这是为了从StrictMode中删除index.js。但是以前没有这样的问题，为什么我要删除StrictMode而不是解决这个问题。还有什么其他问题吗？
见屏幕短片：
import React, { useEffect, useState } from "react";
import Country from "../Country/Country.js";
const gridStyle = {
display: "grid",
gridTemplateColumns: "re
浏览 3提问于2022-05-13得票数 0
我想有一个创建一个侧边栏组件使用React.js链接到不同的反应应用程序。我知道如何创建一个无序的链接列表。问题是如何提供到react应用程序的链接，以及当链接被单击时，它会动态地将特定的react应用程序显示在屏幕上？
浏览 8提问于2019-03-24得票数 0
因此，从我熟悉的PayPal按钮的角度背景来看，我无法让它为React.js工作。为工作的PayPal按钮组件构建react.js的方法有哪些？有什么建议会有很大帮助吗？
浏览 3提问于2017-04-18得票数 2
我正在使用React.js进行一个项目，并且对React的组成非常困惑。
上面的链接给出了一个例子。它使用React.creatClass()创建三个组件。父组件和两个子组件。父组件在呈现方法中包含它的JSX中的其他组件。
这个例子非常清楚，但并不是很“可重用”。如果我想在另一种情况下收养另一个孩子呢？React.js似乎缺乏像主干视图那样的‘扩展’方法。
稍后，我发现您可以在React.render()中传递子组件，并使用this.props.children进行组合。
var Tom = React.createClass({
render: function(){
浏览 0提问于2015-04-23得票数 2
回答已采纳
我正在使用express.js、react.js和socket.io构建一个带有聊天功能的应用程序。。
问题是服务器的socket.on()总是发射两次，这在我看来是没有道理的。
据我所知，客户机只发送一个.emit，但是服务器的.on总是触发两次(而且我相当肯定事件处理程序不会绑定两次)，不管连接了多少客户机，或者我是如何重构代码的。
发送客户端的表单(输入+按钮)将消息附加到其本地消息列表中，然后将MESSAGE_NEW发送到还原程序。
这是第一个Socket.js文件。
import React from 'react'
import socketio from '
浏览 2提问于2021-08-30得票数 8
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
