Я занимаюсь разработкой библиотеки пользовательского интерфейса, и некоторые из моих компонентов меняют свое «состояние» на основе некоторого взаимодействия с пользователем.
Например, пользователь нажимает на заголовок аккордеонной панели, что приводит к тому, что аккордеонная панельоткрыть и стать видимым.Это состояние достигается добавлением модификатора visible на панель аккордеона, например, так ::1004*
<div class="accordion">
<div class="accordion_panel-visible">
<div class="accordion_title">foo</div>
<div class="accordion_content">bar</div>
</div>
<div class="accordion_panel">
<div class="accordion_title">fizz</div>
<div class="accordion_content">buzz</div>
</div>
</div>
Мое предыдущее предположение состояло в том, что React State следует использовать для повторного рендеринга компонента, основанного на некотором обратномконечные данные.Однако, основываясь на взгляде на исходный код из других библиотек пользовательского интерфейса и т. Д., Кажется, что они также обрабатывают состояния пользовательского интерфейса с помощью React State.
Таким образом, используя React, я могу достичь того, что хочу, с помощью необработанного DOM API (как видно из приведенных здесь примеров - https://reactjs.org/docs/refs-and-the-dom.html):
Accordion.defaultProps = {
name: 'accordion'
};
class Accordion extends React.Component {
toggle(event) {
const panel = event.target.closest('[data-component="panel"]');
const operator = panel.modifier('active') ? 'unset' : 'set';
panel.modifier('active', operator);
}
render() {
return (
<Module {...this.props}>
{this.props.panels.map(({ title, content }, index) => (
<Component name='panel' key={index}>
<Component name='title' onClick={this.toggle}>{title}</Component>
<Component name='content'>{content}</Component>
</Component>
))}
</Module>
)
}
}
, который прекрасно работает, но япо сути, следует избегать манипуляций с DOM из компонента React, который я постоянно читаю. В этом случае я должен использовать React State и Refs (вместо прямых манипуляций с DOM). Для достижения того же, что и выше, я считаю, что мог быdo:
Accordion.defaultProps = {
name: 'accordion'
};
class Accordion extends React.Component {
constructor(props) {
super(props);
this.panels = [];
this.state = { activePanel: null };
}
toggle(index) {
this.setState({
activePanel: (this.panels[index] === this.state.activePanel) ? null : this.panels[index]
});
}
isActive(index) {
return (this.panels[index] === this.state.activePanel) ? true : false;
}
render() {
return (
<Module {...this.props}>
{this.props.panels.map(({ title, content }, index) => (
<Component name='panel'
key={index}
ref={ref => this.panels[index] = ref}
modifiers={this.isActive(index) ? 'active' : false}
>
<Component name='title' onClick={this.toggle.bind(this, index)}>
{title}
</Component>
<Component name='content'>{content}</Component>
</Component>
))}
</Module>
)
}
}
(я знаю, что поведение приведенного выше фрагмента закроет родственные панели, что не относится к первому фрагменту, но это тривиально и может быть проигнорировано).
Итак, мой вопрос, должен ли я использовать React State для этого (т.е. последний пример)?
Такое ощущение, что мое приложение отображает / скрывает / открывает / закрывает элементы пользовательского интерфейса на основе пользовательские взаимодействия , которые не требуют / изменяют / публикуют / обновляют / получают / получают данные каким-либо образом, тогда React не должен заботиться о них.
Но самое главное - - этоэтот до предпочтения ?Должно ли это быть me , кто решает, должен ли React заботиться об этом?В конце концов, реакция - это инструмент, инструмент, который я сейчас использую для создания и рендеринга компонентов пользовательского интерфейса в серверной среде.Я просто очень запутался прямо сейчас, и не уверен, что могу увидеть преимущества использования state в этом контексте.
Спасибо!