【第2节 React面向组件编程】组件的组合

组件的组合

功能界面的组件化编码流程：

1. 拆分组件: 拆分界面，抽取组件；
2. 实现静态组件: 使用组件实现静态页面效果；
3. 实现动态组件。

	1. 动态显示初始化数据；
	2. 交互功能（从绑定事件监听开始）

class APP extends React.Component {
    constructor(props) {
        super(props);
        //初始化状态
        this.state = {
            todos: ['吃饭', '睡觉', '运动']
        };
        this.addTodo = this.addTodo.bind(this)
    }

    addTodo(todo) {
        const {todos} = this.state;
        todos.unshift(todo);
        this.setState({todos})
    }

    render() {
        return (
            <div>
                <h1>TODO LIST</h1>
                <Add count={this.state.todos.length} addTodo={this.addTodo}/>
                <List todos={this.state.todos}/>
            </div>
        )
    }
}

class Add extends React.Component {
    constructor(props) {
        super(props);
        this.add = this.add.bind(this)
    }

    add() {
        //1、读取输入的数据
        const todo = this.todoInput.value.trim();
        //2、检查合法性
        if (!todo) {
            return
        }
        //3、添加
        this.props.addTodo(todo);
        //4、清除输入
        this.todoInput.value = ''
    }

    render() {
        return (
            <div>
                <input type="text" ref={input => this.todoInput = input}/>
                <button onClick={this.add}>adds #{this.props.count + 1}</button>
            </div>
        )
    }
}

Add.propTypes = {
    count: PropTypes.number.isRequired,
    addTodo: PropTypes.func.isRequired
};

class List extends React.Component {
    render() {
        return (
            <ul>
                {
                    this.props.todos.map((todo, index) => {
                        return <li key={index}>{todo}</li>
                    })
                }
            </ul>
        )
    }
}

List.propType = {
    todos: PropTypes.array.isRequired
};

ReactDOM.render(<APP/>, document.getElementById("test1"))