React 16 升级到 17 的一个坑:组件销毁时 Ref 可能会被重置为Null

更新日期: 2022-06-16阅读量: 45标签: React

大家好,我是前端西瓜哥。

最近公司的项目用的 react 从 16 升到了 17 版本,选择升级的原因是想以后将项目迁移到 Nextjs 上。

结果发现因为 React 的行为不一致导致了一些看得见的和看不见的 bug,真的是一场灾难。

React 17 是一个比较特别的版本,它没有任何新特性,但它改造了 React 的底层,让 React 17 可以渐进式地升级部分的模块,为 18 版本做准备。

这些改造,有一部分是破坏性的。

问题

我这里有个弹窗,弹窗里面是一些表单项。当用户在表单项做了一些修改,然后点击弹窗的遮罩层时,里面的组件会销毁掉。

在销毁时,我们会调用一个 ref 上的 save() 方法来保存这些数据

useEffect(() => {
  return () => {
    formRef.current && formRef.current.save();
  }
}, []);

在 React 16 的时候是正常的,但到 React 17,失败了,我们无法保存表单里面的数据。

一顿排查之后,我找到了问题所在: 在 React 17 版本,组件销毁时获取的 ref.current 可能会被重置为 null 。

接着我找到了官方文档对于这种情况的说明:

https://zh-hans.reactjs.org/blog/2020/08/10/react-v17-rc.html#effect-cleanup-timing

useEffect 的清理时机

useEffect(() => {
 return () => {
    // 这里的执行清理操作
  }
})

在 React 17 中,副作用的执行时机发生了变化,一个破坏性的效果是: 如果组件卸载,副作用的清理时机是异步的,对应的回调函数执行也同样是异步的 。是的, 异步 。

卸载时的要执行的回调函数,对于状态和方法的访问,问题不大,它们是不可变的,能通过闭包的方式访问到的。

但问题是 ref,它是可变的,我们可以随意的设置 ref.current 的值,且不会触发组件的重新渲染。

这个 ref 会被 React 在组件卸载时重置为 null。因为是异步的,所以我们有很大可能会喜提一个 null 值。

这里有一个简单的在线 demo,感兴趣可以看看,当 Component 组件销毁时,elRef 变成了 null:

https://codesandbox.io/s/react-17-zhong-zu-jian-xiao-hui-shi-ref-ke-neng-bei-she-zhi-wei-null-2kl4xu。

然后是 React 16 版本的 ref,因为是同步的,所以销毁时 ref 没有重置为 null:

https://codesandbox.io/s/16-de-ref-shi-zheng-chang-de-18mqmd。

解决方案

官方的文档提供了两个解决方案。

一个是用 useLayoutEffect。

useLayoutEffect(() => {
  return () => {
    formRef.current && formRef.current.save();
  }
}, []);

useLayoutEffect 可以保证回调函数  同步 执行,这样就能确保 ref 此时还是最后的值,而不是被设置为 null。

第二种方式是用一个临时变量在 ref 每次变化时,将 ref.current 保存起来,放到副作用清理回调函数的闭包中,来保证不可变性。

useEffect(() => {
  const instance = someRef.current;
  instance.someSetupMethod();
  return () => {
    instance.someCleanupMethod();
  };
});

但这里貌似还是有一点局限性:不能提供第二个参数,也就是依赖项参数,因为我们不能保证中途 ref 没有发生改变。

目前我是用第一种方案来处理我遇到的问题。

结尾

版本升级这件事情,还是得权衡利弊。

作者:前端西瓜哥
来源:https://www.toutiao.com/article/7109449526456582695/

链接: https://www.fly63.com/article/detial/11743

如何优雅的设计 React 组件

如今的 Web 前端已被 React、Vue 和 Angular 三分天下,尽管现在的 jQuery 已不再那么流行,但 jQuery 的设计思想还是非常值得致敬和学习的,特别是 jQuery 的插件化。

React深度编程:受控组件与非受控组件

受控组件与非受控组件在官网与国内网上的资料都不多,有些人觉得它可有可不有,也不在意。这恰恰显示React的威力,满足不同规模大小的工程需求。

React框架学习_关于React两种构建应用方式选择

一般在传统模式下,我们构建前端项目很简单。就是下载各种js文件,如JQuery、Echart等,直接放置在html静态文件。Webpack则是JavaScript中比较知名的打包工具。这两个构建工具构成了React应用快速搭建的基础。

Gatsby.js_一款基于React.js静态站点生成工具

Gatsby能快速的使用 React 生态系统来生成静态网站,可以结合React Component、Markdown 和服务端渲染来完成静态网站生成让他更强大。

React创建组件的三种方式及其区别

React推出后,出于不同的原因先后出现三种定义react组件的方式,殊途同归;具体的三种方式:函数式定义的无状态组件、es5原生方式React.createClass定义的组件、es6形式的extends React.Component定义的组件

react生命周期详解_深入理解React生命周期

React主要思想是通过构建可复用组件来构建用户界面,每个组件都有自己的生命周期,它规定了组件的状态和方法需要在哪个阶段改变和执行。所谓组件就是有限状态机,,表示有限个状态以及在这些状态之间的转移和动作行为的模型。

React + Webpack 构建打包优化

React 相关的优化:使用 babel-react-optimize 对 React 代码进行优化,检查没有使用的库,去除 import 引用,按需打包所用的类库,比如 lodash 、echarts 等.Webpack 构建打包存在的问题两个方面:构建速度慢,打包后的文件体积过大

react router中页面传值的三种方法

这篇文章主要介绍React Router定义路由之后如何传值,有关React和React Router 。react router中页面传值的三种方法:props.params、query、state

react 高阶组件的 理解和应用

react 高阶组件简单的理解是:一个包装了另一个基础组件的组件。高阶组件的两种形式:属性代理(Props Proxy)、反向继承 (Inheritance Inversion)

react中的refs属性的使用方法

React 支持一种非常特殊的属性 Ref ,你可以用来绑定到 render() 输出的任何组件上。这个特殊的属性允许你引用 render() 返回的相应的支撑实例( backing instance )。这样就可以确保在任何时间总是拿到正确的实例

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!