Это может занять эту грань между ответственным и упрямым, но я собираюсь вернуться к тому, как структурировать компонент ReactJS по мере роста сложности и может использовать какое-то направление.
Начиная с AngularJS, я хочу передать свою модель в компонент как свойство и напрямую изменить модель. Или я должен разбить модель на различные свойства state и собрать ее обратно вместе при отправке назад вверх по течению? Что такое способ ReactJS?
Возьмем, например, редактор блога. Попытка изменить модель напрямую выглядит следующим образом:
var PostEditor = React.createClass({
updateText: function(e) {
var text = e.target.value;
this.props.post.text = text;
this.forceUpdate();
},
render: function() {
return (
<input value={this.props.post.text} onChange={this.updateText}/>
<button onClick={this.props.post.save}/>Save</button>
);
}
});
Что кажется неправильным.
Это скорее способ React, чтобы сделать наше свойство модели text state, и скомпилировать его обратно в модель перед сохранением, например:
var PostEditor = React.createClass({
getInitialState: function() {
return {
text: ""
};
},
componentWillMount: function() {
this.setState({
text: this.props.post.text
});
},
updateText: function(e) {
this.setState({
text: e.target.value
});
},
savePost: function() {
this.props.post.text = this.state.text;
this.props.post.save();
},
render: function() {
return (
<input value={this.state.text} onChange={this.updateText}/>
<button onClick={this.savePost}/>Save</button>
);
}
});
Это не требует вызова this.forceUpdate(), но по мере роста модели (почта может иметь автора, тему, теги, комментарии, оценки и т.д.), компонент начинает становиться действительно сложным.
Является первым методом с ReactLink способом?
