React+webpack从0到1开发一个todoMvc（三）

todoMvc-3step源码
todoMvc-3step演示
上一张主要介绍了下React如何进行双向绑定以及如何生成一个组件，我们第三步的目标就是需要把之前做的内容抽象出更细的组件，这样便于解耦，各个组件各司其职，互不干扰。
先看下抽象后src/components下的目录

组件目录
先看下我们的app.js修改过后的内容：
import React from 'react'
import ReactDOM from 'react-dom'
import TodoHeader from './TodoHeader' // 引入TodoHeader组件
import TodoMain from './TodoMain' // 引入TodoMain组件

class App extends React.Component { // 定义组件，继承父类
  constructor() {
    super()
    this.state = {
      todos: []
    }
  }
  addTodo(item) { // 新增了添加todo事项的方法
    this.state.todos.push(item)
    this.setState({todos: this.state.todos});  //设置状态
  }
  render(){
    return (
      <div className="todo-wrapper">
        // 将原内容写在组件中并引入进行渲染
        // 把addTodo方法传递到TodoHeader组件中，bind(this)是为了把该React实例绑定到this上
        <TodoHeader addTodo={this.addTodo.bind(this)}/>
        // 把 state.todos 传入到TodoMain 中
        <TodoMain todos={this.state.todos}/>
      </div>
    )
  }
}

ReactDOM.render(<App/>,document.getElementById('app'))

TodoHeader:
import React from 'react'

class TodoHeader extends React.Component {
  // 绑定键盘回车事件，添加新任务
  handlerKeyUp(e) {
    if(e.keyCode == 13) { // enter键的 keyCode 为13
      let value = e.target.value;
      if(!value) return false;
      let newTodoItem = {
        text: value,
        isDone: false
      };
      e.target.value = '';
      this.props.addTodo(newTodoItem) // 通过 this.props 来调用父组件传递过来的addTodo方法
    }
  }
  render(){
    return (
        <div className="todo-header">
          <input onKeyUp={this.handlerKeyUp.bind(this)} type="text" placeholder="请输入你的任务名称，按回车键确认"/>
        </div>
    )
  }
}
export default TodoHeader // 将TodoHeader导出，否则父组件无法导入

TodoMain修改后内容:
import React from 'react'
import TodoItem from './TodoItem'

class TodoMain extends React.Component {
  render(){
    if(this.props.todos.length == 0) {
      return (
        <div className="todo-empty">恭喜您，目前没有待办任务</div>
      )
    } else {
      return (
        <ul className="todo-main">
          {
            this.props.todos.map((todo,index) => {
              //{...this.props} 用来传递TodoMain的todos属性和delete、change方法。
              return <TodoItem text={todo.text} isDone={todo.isDone} index={index} {...this.props} key={index}/>
            })
          }
        </ul>
      )
    }
  }
}
export default TodoMain

TodoItem：
import React from 'react'

class TodoItem extends React.Component {
  render() {
    let className = this.props.isDone?'task-done':''
    return (
      <li>
        <label>
          <input type="checkbox"/>
          <span className={className}>{this.props.text}</span>
        </label>
      </li>
    )
  }
}

export default TodoItem

这一步时webpack先编译,然后打开index.html，如果页面像下图这样的odoMvc-3step演示，那就说明成功了。

第三部截图

做到这里应该对react组件组件化的有个大概的了解了。新手们基本可以对着源码按照这种思路继续做下去。以完善【删除】、【清除已完成】、【未完成数量】等功能了，由于代码类似，故不做赘述了，不太清楚的地方可以参考源码。

React+webpack从0到1开发一个todoMvc（一）
React+webpack从0到1开发一个todoMvc（二）
React+webpack从0到1开发一个todoMvc（四）
React+webpack从0到1开发一个todoMvc（五）