React as a UI Runtime(四、条件)

news/2024/2/29 3:56:37
如果React在更新中只重用与元素类型相匹配的宿主实例,那按渲染条件选择的内容怎么办呢?
正如下面的代码,假如我们开始至需要一个input,但稍后需要在它之前渲染一个message
// 第一次渲染
ReactDOM.render(<dialog><input /></dialog>,domContainer
);// 第二次渲染
ReactDOM.render(<dialog><p>I was just added here!</p><input /></dialog>,domContainer
);

在这个例子中,<input>宿主实例将会被重建。React会遍历元素树,并与之前的版本比较:

  • dialog → dialog: 可以重复使用吗? 可以-type匹配。
  • input → p:可以重复使用吗?不行,type已经改变了!需要删除存在的input,并创建新的p宿主实例。
  • (nothing) → input: 需要新建一个input宿主实例。

React这样的代码是如下的:

let oldInputNode = dialogNode.firstChild;
dialogNode.removeChild(oldInputNode);let pNode = document.createElement('p');
pNode.textContent = 'I was just added here!';
dialogNode.appendChild(pNode);let newInputNode = document.createElement('input');
dialogNode.appendChild(newInputNode);

这不是一种好的更新方式,因为原则上input并没有被p替代-它仅仅是移动了。我们不想要因为重新创建Dom元素而失去它的选中状态,聚焦状态和显示内容。
幸好这个问题有一个简单的修复方式,他并不在React应用中常见。
在实践中,你很少会直接调用ReactDOM.render,实际上,React app常常会拆分成像下面这样的函数:

function Form({ showMessage }) {let message = null;if (showMessage) {message = <p>I was just added here!</p>;}return (<dialog>{message}<input /></dialog>);
}

This example doesn’t suffer from the problem we just described. It might be easier to see why if we use object notation instead of JSX. Look at the dialog child element tree:
这个例子并不会有我们之前描述的那个问题,如果我们使用对象来代替JSX描述会更加明显,下面是dialog子元素树:

function Form({ showMessage }) {let message = null;if (showMessage) {message = {type: 'p',props: { children: 'I was just added here!' }};}return {type: 'dialog',props: {children: [message,{ type: 'input', props: {} }]}};
}

function Form({ showMessage }) {
let message = null;
if (showMessage) {

message = {type: 'p',props: { children: 'I was just added here!' }
};

}
return {

type: 'dialog',
props: {children: [message,{ type: 'input', props: {} }]
}

};
}

不管showMessage 是true的还是false,<input>是第二个子元素,并且在render中不会改变它的位置。
如果showMessage 从false变为true,React会遍历元素树,并与之前的版本相比较:

  • dialog → dialog:可以重复使用吗? 可以-type匹配。
  • (null) → p:需要插入一个新的p宿主实例。
  • input → input: 可以重复使用吗? 可以-type匹配。

那么React会执行类似于下面的代码:

let inputNode = dialogNode.firstChild;
let pNode = document.createElement('p');
pNode.textContent = 'I was just added here!';
dialogNode.insertBefore(pNode, inputNode);

input的状态并不会改变


https://www.jiucaihua.cn/news/show-1039626.html

相关文章

Java --- 继承

&#xff08;一&#xff09;Java定义 官方说法&#xff1a; 继承是面向对象最显著的一个特性。继承是从已有的类中派生出新的类&#xff0c;新的类能吸收已有类的数据属性和行为&#xff0c;并能扩展新的能力。 Java继承是使用已存在的类的定义作为基础建立新类的技术&#x…

python logging 模块详解

Python 中的 logging 模块可以让你跟踪代码运行时的事件&#xff0c;当程序崩溃时可以查看日志并且发现是什么引发了错误。Log 信息有内置的层级——调试&#xff08;debugging&#xff09;、信息&#xff08;informational&#xff09;、警告&#xff08;warnings&#xff09;…

深入浅出的webpack4构建工具--webpack4+vue+vuex+mock模拟后台数据(十九)

mock的官网文档 mock官网 关于mockjs的优点&#xff0c;官网这样描述它&#xff1a;1&#xff09;可以前后端分离。2&#xff09;增加单元测试的真实性(通过随机数据&#xff0c;模拟各种场景)。3&#xff09;开发无侵入&#xff08;不需要修改既有代码&#xff0c;就可以拦截 …

【Android】RxJava的使用(三)转换——map、flatMap

前两篇Android RxJava的使用&#xff08;一&#xff09;基本用法、Android RxJava的使用&#xff08;二&#xff09;Action介绍了RxJava的基本用法&#xff0c;对Rxjava还不了解的请先看以上两篇。这篇为大家讲解RxJava中map和flatMap的使用。 参考&#xff1a;给 Android 开发…

jquery的outerHeight()等方法使用

相关方法&#xff1a; width() - 设置或返回元素的宽度height() - 设置或返回元素的高度innerWidth() - 返回元素的宽度&#xff08;包含 padding&#xff09;innerHeight() - 返回元素的高度&#xff08;包含 padding&#xff09;outerWidth() - 返回元素的宽度&#xff08;包…

Web 2.0时代RSS的.Net实现

Web2.0时是以Blog&#xff0c;Wike&#xff0c;Tag&#xff0c;RSS等技术为代表的以个性化为中心的新一代互联网模式&#xff0c;RSS比起Blog等名词似乎还不算太热。但打开网页仍是遍布了RSS,Xml等醒目的图标&#xff0c;打开页面Mathon浏览器也是一个劲的提示有新的RSS连接&am…

Pandas 基础(5) - 处理缺失的数据

首先, 读入一个 csv 文件: import pandas as pd df pd.read_csv(/Users/rachel/Sites/pandas/py/pandas/5_handling_missing_data_fillna_dropna_interpolate/weather_data.csv) df 输出: 查看一下 day 列的数据类型: type(df.day[0]) 输出: str所以目前 day 列里数据类型是字…

阿里云服务器开发环境搭建

为什么80%的码农都做不了架构师&#xff1f;>>> 设置远程连接密码&#xff1a; 安装JDK&#xff1a; 下载&#xff1a;https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html,下载1.8的解压&#xff1a;tar -zxf jdk-8u191-linux…

移动端H5页面的设计稿尺寸大小规范

当我们在做手机端H5网页设计稿时&#xff08;当然包含微信端的H5网页设计&#xff09;&#xff0c;如果没有做过类似的移动端的设计&#xff0c;UI设计师和前端工程师肯定会纠结的。如果是app设计师&#xff0c;就不会那么纠结啦。 那么多手机屏幕尺寸&#xff0c;设计稿应该按…

分层图 单调决策性DP

easy 写法。 #include<bits/stdc.h> using namespace std; #define Fopen freopen("_in.txt","r",stdin); freopen("_out.txt","w",stdout); #define LL long long #define ULL unsigned LL #define fi first #define se second…