腾讯云

文章/答案/技术大牛

发布

社区首页 >问答首页 >使用React协调树视图

问使用React协调树视图
EN

Stack Overflow用户

提问于 2017-02-14 21:34:09

回答 1查看 143关注 0票数 2

我在React中实现了一个树形视图。树视图具有拖放功能，其中节点可以在父级之间来回移动。

考虑到这一点，当React协调我的组件树时：

<TreeNode key="item1">
    <TreeNode key="item2"/>
    <TreeNode key="item3"/>
    <TreeNode key="item4"/>
</TreeNode>

类似这样的东西：

<TreeNode key="item1">
    <TreeNode key="item2"/>
    <TreeNode key="item3"/>
</TreeNode>
<TreeNode key="item4"/>

它会保留item4 (即不卸载并重新挂载它)吗？有没有什么方法可以强制它在将组件移动到新的父级时保持该组件的完整性，或者React在协调兄弟项时只考虑keys？

reactjs

回答 1

Stack Overflow用户

发布于 2017-02-14 22:02:56

首先，只是澄清一下- React元素不应该被“保留”-它是底层的DOM元素将被“保留”。

React将在有可能的情况下尝试重用DOM。

key属性决定了如何处理DOM元素。只要键存在于随后的渲染过程中，就会重用DOM并更新内容。

引用https://facebook.github.io/react/docs/reconciliation.html#recursing-on-children

当子对象具有关键字时，React使用该关键字将原始树中的子项与后续树中的子项进行匹配。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/42236664

复制

react中的协调与调度

react unix 编程算法

其实在React执行过程中，会有数不清的任务要去执行，但是他们会有一个优先级的判定，假如两个事件的优先级一样，那么React是怎么去判定他们两谁先执行呢？

flyzz177

2022/12/02

4580

react源码分析之协调与调度

react unix 编程算法

flyzz177

2022/12/12

2140

react源码中的协调与调度

react http 编程算法

flyzz177

2022/10/19

6850

react源码中的协调和调度

react unix 编程算法

flyzz177

2023/01/02

5850

【Fiber】：[译]深入解析React的新协调算法

react node.js linux

深入研究 React 的新架构 Fiber，了解新协调算法的两个主要阶段。我们将详细了解 React 如何更新组件状态（state）、属性（props）以及如何处理子元素（children）。

WEBJ2EE

2021/02/26

6380

使用CountDownLatch协调子线程

node.js javascript java

从JDK 1.5之后，在java.util.concurrent包下引入了好多的处理多线程的工具类，本文将介绍CountDownLatch工具类，并采用这个工具类给出一个实例。

孟君

2023/02/23

2280

探索 React 内核：深入 Fiber 架构和协调算法

https 网络安全 react github javascript

深入研究 React 称为 Fiber 的新架构，了解新 reconciliation 算法的两个主要阶段。

童欧巴

2020/07/17

2.2K0

react源码中的协调与调度_2023-02-06

react unix 编程算法

flyzz177

2023/02/06

4240

react-native手势和视图

react android reactnative

react-native的手势操作，从而去看了关于View的许多文档，现在做个总结。首先，还是要知道他的解释，看了文档的都知道，react-native的View，不论在什么平台上，他都对应一个平台的原生视图，无论他是UIView、div、还是android.view.View。然后再是去看他的属性方法，这些属性方法就是今天的重头戏了。一、onLayout function 当组件挂载或者变化的时候调用，内部有nativeEvent.layout属性，包含四个参数： x（距

IT架构圈

2018/05/31

1.2K0

1.TabActivity、视图树、动画

其他

整个页面为TabActivity, 其中对TabWidget进行了一些改变，当切换页签时页签后面红色背景会以Translate动画形式移动到相对应的页签后。布局 TabHost、TabWidget、FrameLayout的id必须是系统定义的，因为可以直接get获取控件，上面的Tab标签一般不写原生的，自己写。把原生的TabWidget隐藏，用了个垂直的LinearLayout写，下面是FrameLayout，也是TabHost必须写的 <RelativeLayout xmlns:android=

六月的雨

2018/05/14

7910

【Fiber】: [转]React 为什么使用链表遍历 Fiber 树

react 云推荐引擎网站 http node.js

To educate myself and the community, I spend a lot of time reverse-engineering web technologies and writing about my findings. In the last year, I’ve focused mostly on Angular sources which resulted in the biggest Angular publication on the web — Angular-In-Depth. Now the time has come to dive deep into React. Change detection has become the main area of my expertise in Angular, and with some patience and a lot of debugging, I hope to soon achieve that level in React.

WEBJ2EE

2021/02/26

7240

react源码中的协调与调度_2023-02-21

react unix 编程算法

flyzz177

2023/02/21

4640

React数组变化之后，视图没有更新

编程算法

react数组变化之后，视图没有更新数组保存在state中，修改数组之后视图没有更新 function updateData(data) { this.setState({ data: data }) } 上面代码是修改状态值的，这样设置会导致视图没有更新，修改为如下代码即可： function updateData(data) { this.setState({ data: [...data] }) }

寻找石头鱼

2020/06/05

2.9K0

日历视图使用

linux android

CalendarView是安卓自带的一个日历控件, 可以使用其开发手机日历的相关功能.

李小白是一只喵

2020/04/24

2.6K0

jenkins 视图使用

jenkins

job建立的特别多的时候，我们可能不太容易找到自己的某个job，这时，我们就可以在Jenkins中建立视图。job的视图类似于我们电脑上的文件夹。可以通过一些过滤规则，将已经建好的job过滤到视图中，也可以在视图中直接新建我们的job。下面以过滤job为例讲讲视图如何使用。

py3study

2020/07/17

1.2K0

SQLServer中使用索引视图(物化视图)

其他

物化视图：以前用的普通的视图，普通视图就是一段逻辑语句，对性能没有任何的提升，也不能创建索引，而物化视图会把视图里查询出来的数据在数据库上建立快照，它和物理表一样，可以创建索引，主键约束等等，性能会有质的提升，但是其有缺点，会占用，可以设置它定时自动更新一次，也可以手动更新，当然也是可以设置及时更新的，但是会拉慢基表的增删改查操作，在这里我只讲思路，具体的话大家可以自己去研究。

跟着阿笨一起玩NET

2018/09/19

3.3K0

把 React 作为 UI 运行时来使用 [每日前端夜话0x22]

react

原文：https://overreacted.io/react-as-a-ui-runtime/

疯狂的技术宅

2019/03/27

2.5K0

视图切换(ViewSwitcher)使用

android

ViewSwitcher顾名思义. ViewSwitcher主要应用场景之一：比如在一个布局文件中，根据业务需求，需要在两个View间切换，在任意一个时刻，只能显示一个View.

李小白是一只喵

2020/04/23

1.7K0

ASP.NET Core 5.0 MVC中的视图分类及使用——布局视图、启动视图、导入视图、详细视图、分部视图

mvc asp core 布局数据

我们可以在这个页面，添加一些全局性的内容，比如全局变量等，然后在具体View页面使用这些变量值

明志德道

2023/10/21

4310

ASP.NET Core 5.0 MVC中的视图分类及使用——布局视图、启动视图、导入视图、详细视图、分部视图

视图的基本使用

php django http python

在进行当前路由地址分发给当前index视图函数时会携带当前请求对象也就是request 并传递给index函数所以必须有形参来接收传递过来的实参请求对象当然request名称并不是必须为request 也可以为req等但是建议为request或者缩写req

星哥玩云

2022/09/08

5010

相似问题

使用React从JSON数据生成树视图

在React中使用等效的Go JS树视图

134

使用React处理树视图中的多个单选按钮

协调视图/调度事件

使用树视图过滤

添加站长进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

社区富文本编辑器全新改版！诚邀体验～

全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验

问使用React协调树视图
EN