React新手:为什么一个数组与另一个数组被区别对待？
React中为什么一个数组与另一个数组被区别对待？
在React中，一个数组与另一个数组被区别对待是因为React使用了虚拟DOM（Virtual DOM）的概念来提高性能。虚拟DOM是一个轻量级的JavaScript对象，它是对真实DOM的一种抽象表示。
当React组件的状态发生变化时，React会生成一个新的虚拟DOM树，并将其与之前的虚拟DOM树进行比较。为了提高比较的效率，React使用了一种称为"Diffing"的算法来找出两个虚拟DOM树之间的差异。
在这个比较过程中，React会遍历新旧虚拟DOM树的节点，并且只更新有变化的部分到真实DOM中，而不是重新渲染整个组件。这样可以大大提高性能，尤其是在复杂的应用中。
然而，React的Diffing算法有一个前提，就是对于同一层级的子元素，它们应该具有稳定的标识。这样React才能准确地判断哪些节点需要更新，哪些节点可以复用。
因此，当React在进行Diffing时，如果发现两个数组的顺序不同，它会认为这是两个不同的数组，而不是简单地进行位置调整。这样可以避免出现意外的结果，同时也保证了React的性能。
总结起来，React中一个数组与另一个数组被区别对待是为了保证Diffing算法的准确性和性能优化。如果需要对数组进行操作，可以使用React提供的一些方法，如map、filter、reduce等，或者使用key属性来给数组元素添加稳定的标识。
腾讯云相关产品推荐：
相关·内容
2回答
React新手:为什么一个数组与另一个数组被区别对待？
ruby-on-rails、reactjs、redux-form
我正在开发一个React应用程序，它从Rails api获取数据。我目前正在开发一个包含嵌套关联的表单(即，在model_a中有许多model_b，您可以在同一表单中创建它们)。我遇到的问题是，Rails期望与特定命名约定的嵌套关联，并且控制参数发送到rails时如何命名的同一字段还控制当Rails API响应时React如何找到正确的数据。这在编辑页面上变得有问题，因为我想要显示models_a (Retailers)已经存在的model_b(本例中为SpendingThresholds)，并且当我更改
浏览 2提问于2017-07-28得票数 4
1回答
作为道具传入原始js数组，但jsx正在将其修改为js对象。
javascript、reactjs
将原始数组作为支柱传递，但它似乎被React / jsx修改为一个json对象，该对象的键名为"0“、"1”等，与数组元素相对应。这使得无法判断支柱实际上是数组还是单个组件。, React.PropTypes.object])实例化MyComponent并传入一个数组：
var foo = <Foo /> // my cust
浏览 3提问于2017-01-22得票数 0
回答已采纳
1回答
反应元件协变阵列
typescript
我有一个从基类派生的类，它结合了基本属性和组件的属性。： height: number;const A: React.FC<AProps> = ...然后，我想要另一个组件，它接受上述BaseFoo组件的数组。这是为了强制每个数组成员至少具有基本属性： items: BaseFoo[]
const OtherBar: React</e
浏览 5提问于2022-03-31得票数 0
回答已采纳
3回答
为什么indexOf没有在搜索的数组中找到一个数组？(需要解释而不是解决)
javascript、arrays、indexof
我正在学习Javascript，并想了解为什么indexOf没有在搜索的数组中找到数组。(解释、理论等是这一目标，不需要任何替代代码或其他解决方案)这与价值相关吗？为什么？有谁能分享为什么是这样的细节/理论/计算机科学方面？答案是：定位函数和循环，而不是indexOf方法。
浏览 3提问于2019-07-20得票数 1
回答已采纳
1回答
React不会在状态和道具更改上重新呈现。
javascript、reactjs、react-hooks、mouseevent、react-props
我试图在React.js中创建一个非常简单的绘图。实际上，我只是将我创建的Vanilla JS代码转换为React应用程序。
const addPoint = ({points, setP
浏览 3提问于2020-07-07得票数 1
回答已采纳
1回答
React Native:如何导出数据数组，以便可以在多个组件中使用？
react-native
对不起，我是新手React Native。我有一个这样的数组： '0': I18n.t('$reports_unknown'), '3': I18n.t('$reports_movem
浏览 6提问于2018-02-20得票数 0
4回答
数组真的是对象吗？
java、arrays、oop、object
printarray(Object[] array){ }上面的代码将无法编译，因为printarray方法不能接受原始数组如果是这样，那么我认为这是一个很大的限制。
浏览 4提问于2015-04-30得票数 2
2回答
为什么在将状态设置为相同值后，第二次响应呈现组件？
javascript、reactjs
我有一个简单的React组件，每次单击按钮时都设置相同的值：import '.>Set Data</button> </div>}
但是呈现有点奇怪，因为在第二个按钮上单击React尽管我设置了相同的值，<
浏览 2提问于2021-08-18得票数 3
回答已采纳
2回答
在子组件中从不调用ShouldComponentUpdate。
reactjs、redux、react-redux
一个是父组件(连接到redux的智能组件)，另一个是在数组迭代中呈现的子组件。就像在一个位置数组中一样，我希望在一个特定的位置上显示加载程序，并且数组中的对象被很好地更新，但是为什么shouldComponentUpdate在子中不可用，这样我就可以决定它是否应该呈现。父组件im
浏览 1提问于2018-05-24得票数 2
3回答
function Hooks:如何调用useState返回的函数
javascript、reactjs、react-hooks、use-state
我是一个反应新手，想问一些对你们来说很基本的问题。！！因此，atm，我正在学习如何使用State，这是我在代码学院课程中找到的一些示例代码。import React, { useState } from "react";function Toggle() { <button onClick={() => setToggle("Off")}>Off<
浏览 2提问于2021-05-17得票数 0
回答已采纳
2回答
ReactJS不会按存储的顺序打印数组？
reactjs
在reactjs代码中，呈现()函数不会按照将数组存储在对象中的顺序打印数组。下面是我的代码，非常简单： ))} ); }当您按下a
浏览 0提问于2018-08-10得票数 1
回答已采纳
1回答
关于React的JSX组件和.map()方法
javascript、reactjs、dictionary、jsx
);
return ( return Task(e, i);)
} 我注意到，映射此数组对每个元素调用Task()函数会返回另一个填充了对象的数组，每个对象都是一个JSX元素。并且该返回的数组由React自动呈现。所以问题是:考虑到数组是引用内存位置的列表，假设只要JSX元素被直接声明在变量上，如果它们是列表的一部分，Rea
浏览 24提问于2021-08-29得票数 0
3回答
为什么我不能在JavaScript中连接数组引用？
javascript、arrays、concat
我有两个数组，一个来自函数的引用(参数)，另一个作为函数的一部分创建-与这里描述的场景完全相同：
我按照上面的建议使用了push.apply()方法，但是谁能解释一下，如果数组被作为引用发送到函数中，为什么不能使用concat()来合并两个数组？
浏览 0提问于2013-05-22得票数 7
回答已采纳
1回答
如何使用useState()在二维数组中设置新值
javascript、arrays、reactjs、react-hooks
我是个新手。我正在尝试基于用户输入动态创建一个svg element。我正在拆分单个单词，计算这些单词的宽度，并将它们放入一个内容数组中。不使用useState React钩子(Codesandbox的左侧)，这一切都工作得很好。我只是声明了一个变量const content = [[]]并将单个单词推送到数组中。但是，由于某些原因，在使用useState (const [content, setContent] = useState([[]]))时，数组</e
浏览 191提问于2021-09-23得票数 0
回答已采纳
4回答
检查一个数组的每一项在另一个数组中的匹配项
javascript、arrays、match
我目前正在尝试编写一个文字游戏，玩家在文本框中输入他/她找到的单词，然后点击提交。点击submit后，该单词被存储在一个我可以在Javascript中处理的数组中，文本框被清除，以便他们可以输入另一个单词。我想我最终能弄清楚这些部分(我对HTML和JavaScript是新手)，但我不知道下一步该怎么做。我需要将玩家找到的每个单词与一组已验证的单词进行核对。我在这里找到了一些代码，这些代码将搜索单个单词是否与数组</e
浏览 1提问于2013-08-08得票数 1
1回答
有反应的打字稿中类型检查道具的最佳实践
reactjs、typescript、typechecking、react-typescript
( );变异2
prop1: string,}
const { prop1, prop2 } = props; <></>};
上述哪种变体被认为是最佳实践，为什么？
浏览 7提问于2020-07-15得票数 1
2回答
react js，为什么这是未定义的
reactjs
我有一个数组，它的类型是Technology，类型是未定义的，这使得事情变得非常困难。例如，我试图将这个数组与另一个数组进行比较，但它抱怨它可能是未定义的，等等。所以我想知道为什么这是未定义的，以及如何防止这种情况。 这个组件是我的主要组件，它从服务器获取数据，并创建两个不同的数组，保存每个集合中的所有数据。<Technology[]>([]);
const [all_courses, setAll_Courses] = Rea
浏览 26提问于2020-12-16得票数 0
2回答
在调用setState之后，React并不是重新呈现，为什么？
javascript、reactjs
export default class Data extends Component { { this.state = { } } handleClick(event){
var newpages = this.state.pages; newpages.push(event);
this.setSta
浏览 3提问于2020-10-12得票数 0
回答已采纳
3回答
useState更新状态子数组对象不能工作
javascript、reactjs、ecmascript-6
[], //depts is an array of objects});})我是这个扩展变量复制概念的新手
浏览 7提问于2019-11-08得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
