react组件化todolist实例

首先创建react的脚手架 具体创建步骤自己查
首先创建一个todelist 在src下创建一个components文件夹 里面创建一个todo的文件夹 todo里面创建一个index.js文件这里是父组件 在里面写
此处只是做一个小例子演示下react的组件化
组件化的理解
1.组件的封装
视图 数据 变化逻辑(数据驱动视图变化)
在react中 this.state就是数据 render中的就是视图 然后函数中的this.setState({就是变化逻辑}) 这里只是大概说明下让自己有个直观印象 并不说明全部
2.组件的复用
props传递

import React,{Component} from 'react'
import List from './list/index.js'
import Input from 'input/index.js'
class Todo extends Component{
   constructor(props){//每个class继承下面都有一个constructor代表其本身
      super(props)//因为this在函数中总是指向函数所在的当前对象 所以es6出了一个super的关键字 使this指向函数当前对象的原型对象
      this.state = {//写当前组件的数据
          list:[]
      }
   }
   render(){ //写dom结构 会变成虚拟dom
      return(
            <div>
               <Input addTitle= {this.addTitle.bind(this)} />//把当前组件的函数传递到子组件里面
                <List data={this.state.list}/>//引入子组件标签 因为子组件中需要传入一个list数组 同时子组件中写的属性是data 所以就用了data data可不是唯一的 是自定义的 但是如果想要组件复用的话 最好改data后面的参数
           </div>        
      )
   }
    addTitle(title){ //方法 给list数组增加值
        const currentList = this.state.list
        this.setState({ //改变data的属性 跟小程序有点像 也可以说是小程序借鉴这的
           list: currentList.concat(title)
        })
    }
}
export default Todo 导出去在APP.js中引入

在子组件中写 这个子组件是渲染list列表的子组件

import React,{Component} from 'react'
class List extends Component{
    constructor(props){
     super(props)
    }
    render(){
       const list = this.props.data//此处list得从父组件那里穿过来
       return(
         <ul>
              {
                list.map((item,index)=>{ //循环穿过来的数组 把每一项都给一个li标签 
                    return<li key={index}>{item}</li>)
                }
              }
         </ul>
       )
     }
}
export default List

在子组件中写 这个子组件是输入的子组件

import React,{Component} from 'react'
class Input extends Component{
    constructor(props){
     super(props)
     this.state = {
       title:''
     }
    }
    render(){
       return(
          <div>
               <input value={this.state.title} onChantge={this.changeHandle.bind(this)}/>//.bind(this)就是说函数执行的时候 this是当前整个组件的实例
               <button onClick={this.clickHandle.bind(this)}>submit</button>
          </div>
       )
     }
     changeHandle(event){ //input标签中绑定的value主要是做一个双向绑定的作用
        this.setState({
            title:event.target.value
        })
     }
     clickHandle(){
       const title = this.state.title
       const addTitle = this.props.addTitle//此处的addTitle是一个函数添加进父组件的数组
       之中 此处的addTitle函数也是父组件中定义的
       addTitle(title)
       this.setState({//点击按钮完成后 把 input输入框中的值清空
           title:''
        })
   }
}
export default Input