Компоненты
Умные
Глупые
- Подписаны на изменения
в Store - Напрямую взаимодействуют
с Action creators
- Все данные получают через props
- Отвечают только за состояние UI
- Взаимодействуют с Action creators только через родителя
Глупый компонент
var TodoBody = React.createClass({
render: function() {
var todo = this.props.todo;
return (
<p>{todo.text}</p>
)
}
});
Умный компонент
var TodoItem = React.createClass({
render: function() {
var todo = this.props.todo;
return (
<div>
<a onClick={this._delete}>delete</a>
<TodoBody todo={todo} />
</div>
)
},
_delete: function(ev) {
ev.preventDefault();
TodoActions.delete(this.props.todo)
}
});
Еще умнее
var TodoList = React.createClass({
getInitialState: function() {
return {
todos: todoStore.getAll()
}
},
componentDidMount: function() {
TodoStore.addChangeListener(this._onStoreChange);
},
componentWillUnmount: function() {
TodoStore.removeChangeListener(this._onStoreChange);
},
_onStoreChange: function() {
this.setState({
todos: todoStore.getAll()
});
},
render: function() {
var todoItems = this.state.todos.map(function(todo) {
return <li key={todo.id}><TodoItem todo={todo} /></li>
});
return <ul>{todoItems}</ul>
}
});
И не путать
var TodoBody = React.createClass({
getInitialState: function() {
return {
showDescription: false
}
},
render: function() {
var todo = this.props.todo;
return (
<div>
<TodoDescription todo={todo} visible={this.state.showDescription} />
<p onClick={this.toggleDescription}>{todo.text}</p>
</div>
)
},
toggleDescription: function() {
this.setState({
showDescription: !this.state.showDescription
})
}
});
Views
By Roman Iakobchuk
Views
- 996