Компоненты

Умные

Глупые

  • Подписаны на изменения
    в 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