React 17 发布候选版本, 没有添加新功能
React 17 发布候选版本, 没有添加新功能
React v17.0 Release Candidate: No New Features
https://reactjs.org/blog/2020/08/10/react-v17-rc.html
React 17 版本不寻常,因为它没有添加任何面向开发人员的新功能。
取而代之的是,该发行版主要致力于简化 React 自身的升级。
React v16.0
https://reactjs.org/blog/2017/09/26/react-v16.0.html
# To install React 17 RC with npm, run:
$ npm i react@17.0.0-rc.0 react-dom@17.0.0-rc.0
# To install React 17 RC with Yarn, run:
$ yarn add react@17.0.0-rc.0 react-dom@17.0.0-rc.0
逐步升级策略
在过去的七年中,React 升级一直是“全有或全无”。
您可以使用旧版本,也可以将整个应用程序升级到新版本。没有中间的选择。
React 17支持逐步的 React升级。
这意味着当 React 18和下一个未来版本问世时,您现在将有更多选择。
https://reactjs.org/docs/legacy-context.html
1. 更改事件委托
在 React 17中,React将不再在文档
级别附加事件处理程序。
取而代之的是,它将它们附加到渲染您的 React 树的根DOM
容器中:
const rootNode = document.getElementById('root');
ReactDOM.render(<App />, rootNode);
微前端
in React 16 and earlier, React would do document.addEventListener()
for most events.
React 17 will call rootNode.addEventListener()
under the hood instead.
由于此更改,现在将由一个版本管理的React树嵌入到由其他React版本管理的树中更加安全。
这一变化还使将React嵌入到使用其他技术构建的应用程序中变得更加容易
捕获阶段
https://javascript.info/bubbling-and-capturing#capturing
document.addEventListener('click', function() {
// Now this event handler uses the capture phase,
// so it receives *all* click events below!
}, { capture: true });
其他重大变化
- 与浏览器对齐
https://codesandbox.io/s/strange-albattani-7tqr7?file=/src/App.js
- 没有事件池
React 17 从 React移除了“事件池”优化。
它不会提高现代浏览器的性能,甚至会使经验丰富的React用户感到困惑:
function handleChange(e) {
setData(data => ({
...data,
// This crashes in React 16 and earlier:
text: e.target.value
}));
}
这是因为React在旧浏览器中重用了不同事件之间的事件对象以提高性能,并将它们之间的所有事件字段都设置为null。
- Effect Cleanup Timing
useEffect(() => {
// This is the effect itself.
return () => {
// This is its cleanup.
};
});
潜在问题
useEffect(() => {
someRef.current.someSetupMethod();
return () => {
someRef.current.someCleanupMethod();
};
});
问题在于someRef.current是可变的,因此在运行清除功能时,它可能已设置为null。
// solution
useEffect(() => {
const instance = someRef.current;
instance.someSetupMethod();
return () => {
instance.someCleanupMethod();
};
});
https://github.com/facebook/react/tree/master/packages/eslint-plugin-react-hooks
- 返回未定义的一致错误
在React 16及更早版本中,返回undefined始终是一个错误:
function Button() {
return; // Error: Nothing was returned from render
}
function Button() {
// We forgot to write return, so this component returns undefined.
// React surfaces this as an error instead of ignoring it.
<button />;
}
在React 17中,forwardRef和 memo组件的行为与常规函数和类组件一致。从它们返回undefined是一个错误。
let Button = forwardRef(() => {
// We forgot to write return, so this component returns undefined.
// React 17 surfaces this as an error instead of ignoring it.
<button />;
});
let Button = memo(() => {
// We forgot to write return, so this component returns undefined.
// React 17 surfaces this as an error instead of ignoring it.
<button />;
});
对于您要故意不渲染任何内容的情况,请返回null。
- Native Component Stacks
在React 17中,使用不同的机制生成组件堆栈,该机制将它们与常规的本机JavaScript堆栈缝合在一起。这使您可以在生产环境中获得完全符号化的React组件堆栈跟踪。
- Removing Private Exports
https://github.com/necolas/react-native-web
在React 17中,这些私有导出已被删除。据我们所知,React Native for Web是唯一使用它们的项目,他们已经完成了向不依赖于私人出口的其他方法的迁移
refs
https://reactjs.org/blog/2020/08/10/react-v17-rc.html#changelog
Portals
https://reactjs.org/docs/portals.html
xgqfrms 2012-2020
www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!
React 17 发布候选版本, 没有添加新功能的更多相关文章
- phpcms如何给已有的模块添加新功能?
phpcms如何给已有的模块添加新功能? 方法一:直接在模块里的控制器文件中添加功能. 不建议使用此方法,因为一旦phpcms升级,有可能会覆盖模块中的文件, 导致你添加的功能丢失. 方法二:新建一个 ...
- Sentinel 发布里程碑版本,添加集群流控功能
自去年10月底发布GA版本后,Sentinel在近期发布了另一个里程碑版本v1.4(最新的版本号是v1.4.1),加入了开发者关注的集群流控功能. 集群流控简介 为什么要使用集群流控呢?假设我们希望给 ...
- PyCharm 2019.3发布,增加了哪些新功能呢?
Python的IDE(Integrated Development Environment 集成开发环境)非常多,如:VS Code.Sublime.NotePad.Python自带编辑器IDLE.J ...
- 一个新人如何学习在大型系统中添加新功能和Debug
文章背景: 今年七月份正式入职,公司主营ERP软件,楼主所在的组主要负责二次开发,使用的语言是Java. 什么叫二次开发呢?ERP软件的客户都是企业.而这些企业之间的情况都有所不同,一套标准版本的企业 ...
- Ecshop:后台添加新功能栏目以及管理权限设置
一.添加菜单项 打开 /admin/includes/inc_menu.php文件(后台框架左边菜单),在最后添加一行如下: $modules['17_other_menu']['sns_list'] ...
- Git -- 新增分支添加新功能
软件开发中,总有无穷无尽的新的功能要不断添加进来. 添加一个新功能时,你肯定不希望因为一些实验性质的代码,把主分支搞乱了,所以,每添加一个新功能,最好新建一个feature分支,在上面开发,完成后,合 ...
- Spring总结 4.AOP之为对象添加新功能
Spring除了提供增强原有功能的方法外,还提供了为一个对象引入新功能的方法.如下: package cn.powerfully.service; public interface IService ...
- Ecshop :后台添加新功能 菜单及 管理权限 配置
需求:在<商品管理>下增加一项[商品推广管理]功能 一. 添加菜单项 打开 /admin/includes/inc_menu.php 文件(后台框架左边菜单),在最后添加一行如下: $mo ...
- ios app 实现热更新(无需发新版本实现app添加新功能)
目前能够实现热更新的方法,总结起来有以下三种 1. 使用FaceBook 的开源框架 reactive native,使用js写原生的iOS应用 ios app可以在运行时从服务器拉取最新的js文件到 ...
随机推荐
- error Unexpected use of comma operator no-sequences解决过程
error Unexpected use of comma operator no-sequences解决过程 报错内容: ERROR in ./pages/course/_id.vue friend ...
- Centos 7 安装 erlang
https://www.cnblogs.com/swyy/p/11582309.html https://blog.csdn.net/qq_20492999/article/details/81254 ...
- 20201115gryz模拟赛解题报告
写在前面 T1:期望100pts,实际0pts(7:50 ~ 8:50 T2:期望0pts,实际0pts(10:00 ~ 10:35 T3:期望20pts,实际40pts( 9:10 ~ 10:00, ...
- RocketMQ 常用消息类型
文章首发于公众号<程序员果果> 地址 : https://mp.weixin.qq.com/s/dYqGd9zi2mNelsNNLIribg 消息发送示例 导入依赖: <depend ...
- nginx常用功能和配置
nginx常用功能和配置 1.nginx常用功能和配置 1.1 限流 1.2 压力测试工具--Ab 1.2.1安装 1.2.2 测试 1.2.3 返回值 1.3 limit_conn_zone 1.4 ...
- ubuntu虚拟机重启后进入initramfs的解决办法
问题:windows下使用VMware或者自己安装的ubuntu系统出现,不能正常进入系统,而是进入一个以initramfs开头的命令行界面! 原因:不正常的关闭系统,导致系统文件损坏,/dev/sd ...
- 2.二层常用技术-Portfast和BPDU Guard、BPDU Filter
PortFast (生成树端口加速) 1.在交换机上使用portfast命令,可以防止出现由于STP的收敛时间太长,导致主机的DHCP请求超时,从而使主机不能接收到DHCP地址的问题. 确保有一台服务 ...
- 织梦dedecms自由列表的"不使用目录默认主页"错误修正
站长用织梦做站时常常发现织梦自由列表有个致命的问题: 即修改"不使用目录默认主页"就永远不会自己勾选啦 打开这个文件 makehtml_freelist_action.php 搜索 ...
- 从NMEA0183到GNSS定位数据获取(一)原理篇
作者:良知犹存 转载授权以及围观:欢迎添加微信公众号:Conscience_Remains 总述 GPS我们都知道,一种用来全球定位的系统,后来俄罗斯推出了格洛纳斯定位系统,中国推出了北斗定位,欧盟有 ...
- File类以及IO流
1.File类 package LESSON12; import java.io.File; import java.io.IOException; import java.text.SimpleDa ...