Использовать состояние или refs в компонентах формы React.js?

Я начинаю с React.js, и я хочу сделать простую форму, но в документации я нашел два способа сделать это.

Первый использует Refs :

var CommentForm = React.createClass({ handleSubmit: function(e) { e.preventDefault(); var author = React.findDOMNode(this.refs.author).value.trim(); var text = React.findDOMNode(this.refs.text).value.trim(); if (!text || !author) { return; } // TODO: send request to the server React.findDOMNode(this.refs.author).value = ''; React.findDOMNode(this.refs.text).value = ''; return; }, render: function() { return (     
 ); } });

А вторая использует состояние внутри компонента React:

 var TodoTextInput = React.createClass({ getInitialState: function() { return { value: this.props.value || '' }; }, render: function() /*object*/ { return (  ); }, _save: function() { this.props.onSave(this.state.value); this.setState({value: '' }); });

Я не вижу плюсов и минусов двух альтернатив, если они существуют. Благодарю.

Краткая версия: избегать ссылок.

Они плохо справляются с ремонтопригодностью и теряют большую простоту рендеринга модели WYSIWYG.

У вас есть форма. Вам нужно добавить кнопку, которая сбрасывает форму.

рефов:
- манипулировать DOM
- рендеринг описывает, как выглядела форма 3 минуты назад
государство
- SetState
- рендер описывает, как выглядит форма

У вас есть поле номера CCV на входе и некоторые другие поля приложения, которые являются числами. Теперь вам нужно обеспечить, чтобы пользователь вводил только числа.

рефов:
- добавьте обработчик onChange (не используем ли мы refs, чтобы этого избежать?)
- манипулировать dom в onChange, если это не число
государство
- у вас уже есть обработчик onChange
- добавить инструкцию if, если она недействительна, ничего не делать
- render вызывается только в том случае, если он будет производить другой результат

Эх, неважно, премьер-министр хочет, чтобы мы просто сделали красную тень, если она недействительна.

рефов:
- сделать onChange обработчик просто вызвать forceUpdate или что-то еще?
- сделать вывод вывода на основе … ха?
- где мы получаем значение для проверки в рендеринге?
- вручную манипулировать свойством className dom элемента?
- я потерялся
- переписать без ссылок?
- читать из dom в рендеринге, если мы монтируем, иначе допустим?
государство:
- удалить оператор if
- сделать валидацию рендеринга на основе this.state

Нам нужно вернуть контроль родителям. Данные теперь находятся в реквизитах, и нам нужно реагировать на изменения.

рефов:
- реализовать componentDidMount, componentWillUpdate и componentDidUpdate
- вручную различать предыдущие реквизиты
- манипулировать dom с минимальным набором изменений
- Привет! мы внедряем реакцию в реакции …
- есть еще, но мои пальцы больно
государство:
- sed -e 's/this.state/this.props/' 's/handleChange/onChange/' -i form.js

Люди думают, что рефссы «легче», чем держать их в состоянии. Это может быть правдой в течение первых 20 минут, это не соответствует моему опыту после этого. Положите свое «я», чтобы сказать «Да, я сделаю это через 5 минут», а не «Конечно, я просто переписал несколько компонентов».

Я видел, как некоторые люди ссылаются на вышеупомянутый ответ как на причину «никогда не использовать ссылки», и я хочу отдать свое (а также несколько других представителей React, которых я говорил).

Правило «не использовать ссылки refs» является правильным, когда вы говорите об их использовании для экземпляров компонентов. Значит, вы не должны использовать refs как способ захвата экземпляров компонентов и методов вызова на них. Это неправильный способ использования refs, и когда refs быстро выходит на юг.

Правильный (и очень полезный) способ использования refs – это когда вы используете их для получения значения из DOM. Например, если у вас есть поле ввода, содержащее ссылку на этот ввод, то захват значения позже через ref просто отлично. Без этого вам нужно пройти довольно организованный процесс, чтобы обновлять ваше поле ввода либо в вашем локальном штате, либо в вашем хранилище флюсов, что кажется ненужным.

TL; DR Вообще говоря, refs противоречат декларативной философии React, поэтому вы должны использовать их в качестве крайней меры. При необходимости используйте state / props .

Чтобы понять, где вы используете refs vs state / props , давайте посмотрим на некоторые из принципов дизайна, которые следует из React.

Документация Per React о refs

Избегайте использования ссылок на все, что можно сделать декларативно.

Принципы дизайна Реакта о побегах

Если какой-либо шаблон, который полезен для создания приложений, трудно выразить декларативным образом, мы предоставим ему императивный API. (и ссылки на них здесь)

Это означает, что команда React предлагает избегать refs и использовать state / props для всего, что может быть сделано реактивно / декларативно.

@Tyler McGinnis дал очень хороший ответ , заявив также, что

Правильный (и очень полезный) способ использования ссылок – это когда вы используете их, чтобы получить некоторое значение из DOM …

Хотя вы можете это сделать, вы будете работать против философии Реакта. Если у вас есть значение на входе, это, безусловно, происходит из state / props . Чтобы код был согласованным и предсказуемым, вы должны также придерживаться state / props . Я подтверждаю, что refs иногда дает вам более быстрое решение, поэтому, если вы сделаете доказательство концепции, то быстро и грязно .

Это оставляет нам несколько конкретных вариантов использования для refs