![](https://img.kancloud.cn/79/94/7994f91d53ce16f4852d7a8cb67c63d3_1724x1028.png)
**例子**
```
import React from "react";
export default class RefDemo extends React.Component{
constructor(props) {
super(props);
this.objRef = React.createRef();
}
componentDidMount() {
setTimeout(()=>{
this.refs.stringRef.textContent = 'string ref got';
this.methodRef.textContent = 'methodRef ref got';
this.objRef.current.textContent = 'objRef ref got';
})
}
render() {
return(
<>
<p ref = "stringRef"> span1 </p>
<p ref = {ele =>(this.methodRef = ele)}> span3 </p>
<p ref = { this.objRef }> span3 </p>
</>
)
}
}
```
源码
文件地址:
```
packages/react/src/ReactCreateRef.js
```
~~~
import type {RefObject} from 'shared/ReactTypes';
// an immutable object with a single mutable value
export function createRef(): RefObject {
const refObject = {
current: null,
};
return refObject;
}
~~~
- 说明
- react源码
- 问答
- 慕课网视频
- 第二章:基础知识
- 001.ReactElement
- 002.react-component
- 003.ref
- 004.forwardRef
- 005.context
- 006.concurrentMode
- 007.supense和lazy
- 008.hooks
- 009.children
- 010.memo
- 011.others
- 第三章:react的更新
- 001.react-dom-render
- 第四章:Fiber Scheduler
- 第五章:各类组件的Update
- 第六章:完成节点任务
- 第七章:commitRoot
- 第八章:功能详解:基础
- 第九章:suspense and priority
- 第十章:功能详解:Hooks
- 001.基础知识
- 002.hook
- 003.RootFiber
- 004. hydrate
- react
- 高阶组件
- react基础
- Github面试题目