string类型的refs
更新机制
当使用字符串refs时，React需要额外的处理步骤来关联ref字符串和相应的DOM元素。这个过程涉及在内部维护一个映射，每当组件更新时，React都需要更新这个映射。这比使用回调函数或React.createRef()创建的ref更加低效，因为后者直接提供对DOM节点的引用，无需额外的映射处理。
组件重构和代码清晰性:
字符串refs通常使得代码的重构和维护变得更加困难。因为它们是隐式的，所以很难跟踪特定的ref在组件树中的使用情况。而回调函数refs或React.createRef()提供了更清晰、更直观的方式来处理DOM引用。
已被弃用:
在React的早期版本中，字符串refs是推荐的使用方式。然而，在后续版本中，React团队鼓励开发者使用回调函数refs或React.createRef()，并且在未来的版本中可能会完全弃用字符串refs。这表明字符串refs在性能和使用上存在问题。
额外的内存开销
字符串refs需要React在内部为每个字符串创建和管理一个映射表。这不仅增加了CPU的处理负担，还可能增加了内存的使用。
总结
- 字符串refs通过内部的字符串映射来工作，这会导致额外的内部处理。
- 它们可能导致在组件的生命周期中的不一致行为，尤其是在组件的卸载和重新挂载过程中。
- 字符串refs不利于React的未来更新和优化，如React Fiber架构。
React.createRef()
返回值
React.createRef() 的返回值是一个特殊的对象，它可以用于访问 React 组件中的 DOM 节点或者其他 React 元素。这个对象有一个 current 属性，该属性指向被引用的节点。
执行操作
- 创建引用对象：createRef 函数创建一个包含 current 属性的对象。最初，current 属性的值设置为 null。
- 分配引用到实例变量：通过将 createRef 的返回值赋给 MyRef，你创建了一个可以在整个组件中访问的引用。
- 关联 DOM 节点：在组件的 JSX 部分，你可以将这个引用 (MyRef) 附加到一个特定的 DOM 节点或者 React 元素上，例如 。这样做将会在组件被挂载到 DOM 时，自动将该节点的实际 DOM 元素赋值给 MyRef.current。
- 访问和交互：一旦组件被挂载，MyRef.current 将指向与其关联的 DOM 节点，允许你直接与这个节点进行交互，例如读取其属性或者调用其方法。