String refs считаются устаревшими и были удалены в React v16. Они используют синтаксис ref={'textInput'} для доступа к DOM-узлам через this.refs.textInput. Современные React-приложения должны использовать callback refs или хуки useRef вместо этого.
String refs заставляют React отслеживать текущий выполняемый компонент, делая React-модуль stateful. Это вызывает неожиданные ошибки, когда в бандле существует несколько экземпляров React.
String refs не компонуемы. Если библиотека присоединяет ref к дочернему компоненту, пользователи не могут присоединить свой ref к тому же элементу. Callback refs полностью устраняют это ограничение.
String refs не работают с инструментами статического анализа вроде Flow или TypeScript. Эти инструменты не могут определить:
this.refsCallback refs поддаются статическому анализу и обеспечивают лучшую типобезопасность.
String refs не работают с render callbacks. Этот пример демонстрирует проблему:
class MyComponent extends Component {
renderRow = (index) => {
// ❌ Ref присоединяется к DataTable, а не к input
return <input ref={'input-' + index} />;
}
render() {
return <DataTable data={this.props.data} renderRow={this.renderRow} />;
}
}
Используй callback refs вместо этого:
<input ref={input => this['input-' + index] = input} />
Или используй современный хук useRef в функциональных компонентах:
const inputRef = useRef(null);
<input ref={inputRef} />
String refs делают React модуль stateful, заставляя React отслеживать текущий выполняемый компонент, что может вызвать ошибки, когда несколько экземпляров React существуют в одном bundle.
Новый — ещё не проверен сообществом
Вы