`React.createRef()`是React中创建Ref对象的标准API，用于访问DOM节点或组件实例。尽管一个简单的`{ current: null }`对象在基本场景下也能工作，因为`createRef`的底层实现正是返回这样一个对象，但使用`createRef`是推荐的做法。它不仅提升了代码的可读性和意图明确性，还确保了与React生态系统和未来潜在更新的兼容性，是符合React最佳实践的声明式方法。
React Refs概述
在React应用中，我们通常采用声明式的方式来操作UI。然而，在某些特定场景下，我们需要直接访问底层的DOM元素或React组件实例。例如，管理焦点、播放媒体、触发动画或与第三方DOM库集成。React提供了Refs（引用）机制来处理这些情况。
Refs通过ref属性附加到React元素上，允许我们在组件内部获取对该元素或组件实例的引用。当ref属性被赋给一个React元素时，React会将相应的DOM节点或组件实例赋值给Ref对象的current属性。
createRef的工作原理
React官方文档推荐使用React.createRef()来创建Refs。然而，一个常见的疑问是，为什么不直接创建一个普通的JavaScript对象，例如this.myRef = {}，并将其作为Ref使用呢？毕竟，在某些测试场景下，这种方式似乎也能正常工作。
为了解答这个疑问，我们可以查看createRef的React源码实现。实际上，createRef的实现非常简洁：
export function createRef() {
const refObject = {
current: null,
};
return refObject;
}从源码中可以看出，React.createRef()函数仅仅是创建并返回了一个包含current: null属性的普通JavaScript对象。这意味着，从最基础的功能层面来看，你手动创建的{ current: null }对象与createRef()返回的对象是等效的。React内部在处理ref属性时，只需要一个具有current属性的对象，以便在适当的时候将DOM节点或组件实例赋值给它。
为什么推荐使用createRef？
既然createRef的底层实现如此简单，为什么React仍然推荐并提供了这个API呢？原因主要体现在以下几个方面：
明确意图与可读性： 使用React.createRef()清晰地向其他开发者（包括未来的你）表明，这个对象是专门用于作为React Ref使用的。它是一种约定，使得代码的意图更加明确，提高了可读性。而一个普通的{}对象则没有这种语义上的提示。
保持一致性与最佳实践： 遵循React提供的API是保持代码库一致性和符合社区最佳实践的关键。当所有开发者都使用相同的方式创建Ref时，代码更容易理解和维护。
未来兼容性与扩展性： 尽管目前createRef的实现很简单，但React团队可能会在未来的版本中扩展其功能，例如添加额外的属性、方法或进行内部优化。如果你的代码直接依赖于{ current: null }的简单结构，那么当createRef的功能被增强时，你的自定义Ref可能无法享受到这些新特性，甚至可能导致兼容性问题。使用createRef可以确保你的代码与React的未来发展保持同步。
工具链支持： 现代的开发工具、ESLint插件和IDE可能会对React.createRef()有特定的识别和支持，提供更好的代码提示、错误检查或重构功能。自定义的普通对象则可能无法获得这些便利。
Ref Forwarding等高级场景： 在Ref Forwarding（Ref转发）等高级React模式中，React.forwardRef HOC（高阶组件）期望接收一个Ref对象。虽然一个普通对象在某些简单情况下可能勉强工作，但使用createRef可以确保与这些高级API的无缝集成和正确行为。
示例代码分析
让我们回顾并分析您提供的示例代码：
class CustomTextInput extends React.Component {
constructor(props) {
super(props);
this.myRef = {}; // 在这里，你创建了一个普通的JS对象
// bind
this.RefFocus = this.Myfocus.bind(this);
}
componentDidMount() {
// 当组件挂载后，React会将input的DOM实例赋值给this.myRef.current
console.log(this.myRef.current);
}
Myfocus() {
this.myRef.current.focus(); // 正常调用DOM元素的focus方法
}
render() {
return (
<div>
<input
type="text"
ref={this.myRef} // 将自定义对象作为ref属性传递
/>
<input
type = "button"
value = "Focus the text input"
onClick = {this.RefFocus}
/>
</div>
);
}
}
ReactDOM.render(<CustomTextInput />, document.getElementById("app"));在这个例子中，当React渲染<input type="text" ref={this.myRef} />时，它会检查this.myRef是否是一个具有current属性的对象。由于this.myRef = {}创建的对象确实可以动态添加属性，React成功地将input的DOM实例赋值给了this.myRef.current。因此，后续在Myfocus方法中通过this.myRef.current.focus()调用DOM方法能够正常工作。
注意事项与最佳实践
- Ref的初始化位置： 在类组件中，Refs通常在构造函数中创建，例如this.myRef = React.createRef();。
- 函数组件中的Refs： 在函数组件中，应使用useRef Hook来创建Refs，例如const myRef = useRef(null);。useRef在函数组件的整个生命周期中保持Ref对象的引用不变。
- 不要过度使用Refs： Refs是逃生舱，应尽可能使用声明式的数据流和状态管理来解决问题。只有在必要时才使用Refs。
- 性能和内存： 针对性能和内存优化，createRef与一个简单的{ current: null }对象在当前实现下几乎没有显著差异。它们的开销都非常小。
总结
尽管一个普通的JavaScript对象（如{}）在某些基本场景下可以作为React Ref使用，因为它能够满足React内部对Ref对象的基本结构要求，但强烈建议始终使用React.createRef()（在类组件中）或useRef()（在函数组件中）来创建Refs。这种做法不仅符合React的最佳实践，提高了代码的可读性和维护性，更重要的是，它确保了与React生态系统和未来潜在更新的兼容性，避免了不必要的风险。选择官方提供的API，是构建健壮、可维护React应用的关键。
