英文:
Why not use own object with current property rather than createRef in ReactJs
问题
在ReactJs文档中提到：
> 使用 React.createRef() 创建并通过ref属性附加到React元素的引用
记录ref会得到一个具有current属性设置为null的对象。出于好奇，我创建了一个具有current属性的普通对象，并尝试将其用作ref。以下是测试用例，它居然可以工作：
class CustomTextInput extends React.Component {
constructor(props) {
super(props);
this.myRef = {}; //可以工作!!!
//console.log(React.createRef());
//绑定
this.RefFocus = this.Myfocus.bind(this);
}
componentDidMount() {
console.log(this.myRef.current);
}
Myfocus() {
this.myRef.current.focus();
}
render() {
return (
<div>
<input
type="text"
ref={this.myRef} />
<input
type="button"
value="Focus the text input"
onClick={this.RefFocus}
/>
</div>
);
}
}
//const app = ReactDOM.createRoot(document.getElementById("app"));
ReactDOM.render(<CustomTextInput />, document.getElementById("app"));
因此，问题是，我们为什么需要createRef API？React是否对createRef有特殊处理，例如更好的性能、内存优化等，或者是否存在需要ref转发的情况，普通的{current: null}不能工作？
请用简单的语言解释一下，我是React和JavaScript的新手。
英文:
In ReactJs documentation, it is said
> Refs are created using React.createRef() and attached to React elements via the ref attribute
Logging the ref gives an object which has a current property set to null. Just out of curiosity, I created a normal object with current property and tried to use it as a ref. Following is the test case and it somehow works:
<!-- begin snippet: js hide: false console: true babel: true -->
<!-- language: lang-js -->
class CustomTextInput extends React.Component {
constructor(props) {
super(props);
this.myRef = {}; //Works!!!
//console.log(React.createRef());
//bind
this.RefFocus = this.Myfocus.bind(this);
}
componentDidMount() {
console.log(this.myRef.current);
}
Myfocus() {
this.myRef.current.focus();
}
render() {
return (
<div>
<input
type="text"
ref={this.myRef} />
<input
type = "button"
value = "Focus the text input"
onClick = {this.RefFocus}
/>
</div>
);
}
}
//const app = ReactDOM.createRoot(document.getElementById("app"));
ReactDOM.render(<CustomTextInput />, document.getElementById("app"));
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>
<!-- end snippet -->
So the question is, why do we need the createRef api at all? Is there something special that React does with createRef, e.g. better performance, memory optimization etc or are there cases like ref forwarding where a custom {current: null} wouldn't work?
Please explain in easy language, I am new to React and JavaScript.
答案1
得分: 0
CreateRef 只是一个包装器，用于简化编写和阅读代码。
createRef 的实现如下（React 源代码）：
export function createRef() {
const refObject = {
current: null,
};
return refObject;
}
英文:
CreateRef is just a wrapper to simplify writing and reading code
The createRef implementation looks like this (source code react):
export function createRef() {
const refObject = {
current: null,
};
return refObject;
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论