Touko
4 years ago|views:292
React-useRef
useRef使用
import { useRef } from 'react';
const ref = useRef(0);
useRef返回一个这样的对象：
{
current: 0 // 传入的初始值
}
ref更改时不会触发重新渲染。
ref可以直接更新值
ref允许您在组件重新渲染之间保留信息
ref不要在渲染过程中读取或写入。这使您的组件难以预测
ref可以操作dom
当你将 ref 放在输出浏览器元素的内置组件上时
<input />，React 会将该 ref 的current属性设置为相应的 DOM 节点（例如<input />浏览器中的实际节点）。但是，如果您尝试将 ref 放在您自己的组件上，例如
<MyInput />，默认情况下您将获得null发生这种情况是因为默认情况下 React 不允许组件访问其他组件的 DOM 节点。
要想访问其他组件需要使用forwardRef
const MyInput = forwardRef((props, ref) => {
return <input {...props} ref={ref} />;
});
限制公开的功能 useImperativeHandle
import {
forwardRef,
useRef,
useImperativeHandle
} from 'react';
forwardRef,
useRef,
useImperativeHandle
} from 'react';
const MyInput = forwardRef((props, ref) => {
const realInputRef = useRef(null);
useImperativeHandle(ref, () => ({
// 只暴露focus方法
focus() {
realInputRef.current.focus();
},
}));
return <input {...props} ref={realInputRef} />;
});
const realInputRef = useRef(null);
useImperativeHandle(ref, () => ({
// 只暴露focus方法
focus() {
realInputRef.current.focus();
},
}));
return <input {...props} ref={realInputRef} />;
});
强制 React 同步更新（“刷新”）DOM
import { flushSync } from 'react-dom';
flushSync(() => {
...
});
tags:
0
Related Reading
comments:
It's deserted here, it looks like no one's been here