React报错之Function components cannot have string refs
2023-02-18 16:40:34 时间
总览
当我们在一个函数组件中使用一个字符串作为ref
时,会产生"Function components cannot have string refs"错误。为了解决该错误,使用useRef()
钩子来得到一个可变的ref
对象,这样你就可以在组件中作为ref
使用。
这里有个示例用来展示错误是如何发生的。
// App.js
export default function App() {
// A string ref has been found within a strict mode tree.
// ⛔️ Function components cannot have string refs.
// We recommend using useRef() instead.
return (
<div>
<input type="text" id="message" ref="msg" />
</div>
);
}
上述代码片段的问题在于,我们使用了字符串作为ref
。
useRef
为了解决该错误,使用useRef
钩子来获取可变的ref
对象。
// App.js
import {useEffect, useRef} from 'react';
export default function App() {
const refContainer = useRef(null);
useEffect(() => {
// ?️ this is reference to input element
console.log(refContainer.current);
refContainer.current.focus();
}, []);
return (
<div>
<input type="text" id="message" ref={refContainer} />
</div>
);
}
useRef()
钩子可以被传递一个初始值作为参数。该钩子返回一个可变的ref
对象,其.current
属性被初始化为传递的参数。
需要注意的是,我们必须访问
ref
对象上的current
属性,以获得对我们设置了ref
属性的input
元素的访问。
当我们传递ref
属性到元素上时,比如说,<input ref={myRef} />
。React将ref
对象上的.current
属性设置为相应的DOM节点。
useRef
钩子创建了一个普通的JavaScript对象,但在每次渲染时都给你相同的ref
对象。换句话说,它几乎是一个带有.current
属性的记忆化对象值。
不会重新渲染
应该注意的是,当你改变ref
的current
属性的值时,不会引起重新渲染。
例如,一个ref
不需要包含在useEffect
钩子的依赖数组中,因为改变它的current
属性不会引起重新渲染。
// App.js
import {useEffect, useRef} from 'react';
export default function App() {
const refContainer = useRef(null);
const refCounter = useRef(0);
useEffect(() => {
// ?️ this is reference to input element
console.log(refContainer.current);
refContainer.current.focus();
// ?️ incrementing ref value does not cause re-render
refCounter.current += 1;
console.log(refCounter.current);
}, []);
return (
<div>
<input type="text" id="message" ref={refContainer} />
</div>
);
}
例子中的useEffect
钩子只运行了2次,因为useRef
在其内容发生变化时并没有通知我们。
改变对象的current
属性并不会导致重新渲染。
相关文章
- 记一次 .NET 某供应链WEB网站 CPU 爆高事故分析
- 记一次 .NET 某智能交通后台服务 CPU爆高分析
- 记一次 .NET 某药品仓储管理系统 卡死分析
- 记一次 .NET 某消防物联网 后台服务 内存泄漏分析
- 记一次 WinDbg 分析 .NET 某工厂MES系统 内存泄漏分析
- 记一次 .NET 某市附属医院 Web程序 偶发性CPU爆高分析
- 记一次 .NET 某妇产医院 WPF内存溢出分析
- 记一次 .NET 某化妆品 webapi 卡死分析
- 记一次 .NET 某智能服装智造系统 内存泄漏分析
- 记一次 .NET 某电商无货源后端服务 死锁分析
- 记一次 .NET 某公交卡扣费系统 程序卡死分析
- 记一次 .NET 某风控管理系统 内存泄漏分析
- 记一次 .NET 某资讯论坛 CPU爆高分析
- 记一次 .NET 某招聘网后端服务 内存暴涨分析
- 记一次 .NET 某电商定向爬虫 内存碎片化分析
- 记一次 .NET 某纺织工厂 MES系统 API 挂死分析
- 记一次 .NET 某上市工业智造 CPU+内存+挂死 三高分析
- 记一次 .NET 某新能源汽车锂电池检测程序 UI挂死分析
- ArrayPool 源码解读之 byte[] 也能池化?
- 记一次 .NET 某流媒体独角兽 API 句柄泄漏分析