Почему бы нам не использовать ref?
В документации Facebook на refs:
Don’t Overuse
RefsYour first inclination may be to use refs to “make things happen” in your app. If this is the case, take a moment and think more critically about wherestateshould be owned in the component hierarchy. Often, it becomes clear that the proper place to “own” that state is at a higher level in the hierarchy. See theLifting State Upguide for examples of this.
В моем текущем приложении React у меня есть несколько узлов div, которые я хочу изменить при условии. Эти узлы div были созданы глубоко внутри цепочки render()returns. Я определенно не могу использовать Document.queryselector (). И я не могу думать ни о чем другом.
Документация также пыталась объяснить статьей «поднятие состояния вверх», но я не понял. Может кто-нибудь пролить свет на это? (ELI5, если бы вы могли.)
Именно это я и пытался сделать (условный рендеринг, условные модификации). И я не мог придумать, как отреагировал бы на это иначе. Я копну немного глубже (с ответом ниже). Возможности всего фреймворка React намного шире, чем я думал.
В частности, использование состояния для управления тем, что видит пользователь, является шаблоном React.
Есть ли подробное руководство по состоянию помимо документации React? Я в основном учусь, собирая кусочки и кусочки тут и там. Я чувствую, что мне нужно сделать это правильно для этого.
Извините, я не знаю действительно хороших. Но я думаю, что здесь важно понять, что, когда вышел React, он стал пионером в приложениях управляемый государством по сравнению с приложениями, управляемыми событиями, которые многие привыкли писать, то есть делать что-то, когда пользователь щелкает мышью. Приложения с управлением состоянием означают, что каждый компонент имеет состояние; он имеет разные состояния (подумайте о разных представлениях пользовательского интерфейса), и мы можем изменить это состояние, чтобы изменить внешний вид пользовательского интерфейса, не обязательно только тогда, когда происходит событие. Вы можете поискать в Google, но я не могу придумать ничего, извините!
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Состояние отмены означает, что дочерние компоненты вызывают события, а не сами обрабатывают изменения состояния. В React docs они начинаются с того, что каждый компонент управляет своим собственным состоянием (handleChangeEvent). Далее они поднимают состояние, добавляя опору onTemperatureChange. Теперь дети делегируют изменение состояния своему ближайшему общему родителю, Calculator. Calculator изменяет состояние и передает новые значения вниз через свойства.
Я использую ссылки только тогда, когда мне нужно вызвать определенные функции для элементов DOM, причем focus() является наиболее распространенным использованием в моих приложениях. У этого ТАК ответ есть хороший пример, скопированный сюда, потому что ссылки плохие:
class App extends React.Component{
componentDidMount(){
this.nameInput.focus();
}
render() {
return(
<div>
<input
defaultValue = "Won't focus"
/>
<input
ref = {(input) => { this.nameInput = input; }}
defaultValue = "will focus"
/>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('app'));
Также не забудьте прочитать ответ под связанным ответом, autoFocus - правильный ответ для фокусировки при монтировании, но наверняка есть моменты, когда вы хотите динамически фокусировать элементы.
Я получаю следующее: ref похож на оператор перехода, тогда как этот шаблон будет выдавать events, которые затем обрабатываются states?
ref просто означает, что вы хотите сохранить ссылку на Элемент DOM. Похоже, вы все еще начинаете. Выясните реквизит и состояние, затем вернитесь к реферам
Вся суть консервативного использования refs заключается в том, чтобы убедиться, что вы не используете refs для того, что React уже предоставляет API (или в некоторой степени облегчает), например, условные классы CSS, условный рендеринг и т. д. Этого не следует выполнять используя собственные элементы DOM или jQuery, но полностью в React API. Но некоторые вещи, которые вы не можете делать только в React (например, программная фокусировка ввода), именно здесь и появляются ссылки.