推荐答案
在 React 中，useRef 和 createRef 都用于创建引用（ref），但它们的使用场景和行为有所不同。
useRef：- 用于函数组件中。
- 在组件的整个生命周期中保持相同的引用对象。
- 适合用于存储可变值，且不会触发重新渲染。
- 语法：
const ref = useRef(initialValue)
createRef：- 用于类组件中。
- 每次渲染时都会创建一个新的引用对象。
- 适合用于类组件中的 DOM 引用。
- 语法：
const ref = createRef()
本题详细解读
useRef 的详细解读
useRef 是 React 提供的一个 Hook，专门用于函数组件中。它的主要特点包括：
- 持久性：
useRef返回的引用对象在组件的整个生命周期中保持不变，即使组件重新渲染，引用对象也不会改变。 - 可变值存储：
useRef不仅可以用于引用 DOM 元素，还可以用于存储任何可变值。这些值的改变不会触发组件的重新渲染。 - 初始化：
useRef接受一个初始值作为参数，并返回一个包含current属性的对象。current属性可以存储任何值。
// www.javascriptcn.com code example
function MyComponent() {
const inputRef = useRef(null);
useEffect(() => {
inputRef.current.focus();
}, []);
return <input ref={inputRef} />;
}createRef 的详细解读
createRef 是 React 提供的一个方法，通常用于类组件中。它的主要特点包括：
- 每次渲染创建新引用：每次组件渲染时，
createRef都会创建一个新的引用对象。这意味着在类组件中，每次渲染都会生成一个新的引用。 - 适用于类组件：
createRef主要用于类组件中引用 DOM 元素或其他组件实例。 - 初始化：
createRef不需要传递初始值，返回的引用对象的current属性初始值为null。
// www.javascriptcn.com code example
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.inputRef = createRef();
}
componentDidMount() {
this.inputRef.current.focus();
}
render() {
return <input ref={this.inputRef} />;
}
}总结对比
| 特性 | useRef |
createRef |
|---|---|---|
| 适用组件类型 | 函数组件 | 类组件 |
| 引用对象持久性 | 在组件生命周期中保持不变 | 每次渲染时创建新的引用对象 |
| 触发重新渲染 | 不会触发重新渲染 | 不会触发重新渲染 |
| 初始化 | 接受初始值 | 不需要初始值 |
通过以上对比，可以清晰地看出 useRef 和 createRef 的使用场景和区别。