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

        我们在项目中需要写一些功能页面的时候，也就是添加新的功能组件，比如我们想要创建一个增删改查表单案例，用react去写，我们就需要按照步骤来。

        1.拆分组件，抽取组件。2.实现静态组件，使用组件实现静态页面效果 。3.实现动态组件，动态显示初始化数据，以及页面交互。

        说起来很笼统，我们之间上案例，

                ​​​​​​​

        这个是一个表单功能，我们直观的看呢，拆分组件，首先外壳App组件就是大盒子，然后里面的就是我们需要的自定义组件了，我们分为3个组件，首先是输入框，然后是列表，以及尾部。很明显我们的组件对应的就是 Header ,List,Footer。但是呢我们在创建组件的时候，不仅仅要考虑样式的复现，更重要的是动态数据的流动，也就是所谓的数据传输。比如这里呢，列表需要接收数据然后复现每一行的内容，那么每一行的内容我们就需要用Item组件去渲染。

        首先html css 我们之间跳过，现在我们的页面是

        

        现在我们第一步就是显示出Item组件的内容，也就是xxxx这里我们是没有数据的。我们现在用的类组件，

export default class App extends Component {state ={todos:[{id:"001",name:'吃饭',done:true},{id:"002",name:'睡觉',done:true},{id:"003",name:'写代码',done:false}]}render() {const {todos} = this.statereturn (<div className="todo-container"><div className="todo-wrap"><Header addTodo={this.addTodo}/><List todos={todos} updataTodo={this.updataTodo}/><Footer/></div></div>)}}

        在App组件中呢，我们首先定义我们的state是一个对象，然后里面第一个属性是todos数组对象，里面存放我们想要展示的数据，然后呢我们想要Item组件去渲染出来，我们这时候就要传数据给Item，但是App和Item是祖孙关系，中间隔了一代，这就有点尴尬了，也就是一层一层的传。

        首先我们之间todos={todos},把我们的数据给List，然后呢List的props就接收到了todos对象，也就是this.props.todos就是我们传过去的内容，我们上代码。

        

export default class List extends Component {render() {const {todos,updataTodo} = this.propsreturn (<ul className="todo-main">{todos.map((todo)=>{return <Item key={todo.id} {...todo} updataTodo={updataTodo}/>})}</ul>)}
}

        拿到了数据，我们就需要传数据给Item组件了，首先用key={todo.id}这是给每一个Item的组件定key值方便以后拿取，或者说这是必要的。然后我们传的数据是{...todo}，也就是我们每遍历一次，就传新的当前的数组对象里面的对应index的对象给Item，那么我们祖孙就传输完毕了，看Item的代码

        

export default class Item extends Component {state = {mouse:false}//鼠标移入移出handleMouse = (flag)=>{return()=>{this.setState({mouse:flag})}}//勾选或者取消一个回调handleCheck =(id)=>{return(event)=>{console.log(id,event.target.checked);this.props.updataTodo(id,event.target.checked)}}render() {const {id,name,done} = this.propsconst {mouse} = this.statereturn (<li style={{backgroundColor:mouse? '#ddd':'white'}} onMouseEnter={this.handleMouse(true)} onMouseLeave={this.handleMouse(false)} ><label><input type="checkbox" defaultChecked={done} onChange={this.handleCheck(id)}/><span>{name}</span></label><button className="btn btn-danger" style={{display:mouse? 'block':'none'}}>删除</button></li>)}
}

        我们Item组件解构赋值拿取到了我们List组件传过来的依旧是props，然后我们之间{name}就是我们所谓的事情，然后{done}就是我们事情的状态，通过true以及false来判断是否做过。

        这时候我们的网页就变成了

        ​​​​​​​        

        这个样子。然后我们就完善我们第一个组件Header，这时候我们发现，如果我们通过敲回车的话给List组件添加新的state，也就是改变了App组件里面的state，子给父传，我们想不到办法以现在的知识量，然后我们发现可以通过函数的回调，会有返回值，通过这个来让子组件给父组件传输数据，也就是更改父组件里面state。

        

export default class Item extends Component {state = {mouse:false}//鼠标移入移出handleMouse = (flag)=>{return()=>{this.setState({mouse:flag})}}//勾选或者取消一个回调handleCheck =(id)=>{return(event)=>{console.log(id,event.target.checked);this.props.updataTodo(id,event.target.checked)}}render() {const {id,name,done} = this.propsconst {mouse} = this.statereturn (<li style={{backgroundColor:mouse? '#ddd':'white'}} onMouseEnter={this.handleMouse(true)} onMouseLeave={this.handleMouse(false)} ><label><input type="checkbox" defaultChecked={done} onChange={this.handleCheck(id)}/><span>{name}</span></label><button className="btn btn-danger" style={{display:mouse? 'block':'none'}}>删除</button></li>)}
}import React, { Component } from 'react'
import {nanoid} from 'nanoid'
import './index.css'export default class Header extends Component {handleKeyUp=(event)=>{//结构赋值获取const {keyCode,target} = eventif(keyCode!==13) return//判断是否会车键位console.log(target.valye,keyCode);if(target.value.trim()===''){alert("error")return}//准备好一个todo对象const todoObj={id:{nanoid},name:target.value,done:false}this.props.addTodo(todoObj)}render() {return (<div className="todo-header"><input onKeyUp={this.handleKeyUp} type="text" placeholder="请输入你的任务名称，按回车键确认"/>{/* onkeyup是按键松开事件，前面的keycode指的是键位，回车键是13 */}</div>)}
}

        我们代码在这里。首先我们给Header传一个函数，addTodo={this.addTodo},然后函数里面是

addTodo = (TodoObj)=>{const {todos} = this.stateconst newTodos = [TodoObj,...todos]this.setState({todos:newTodos})}

        通过返回的参数，我们之间添加在state的最上面，也就是在上面添加对象，然后更新state实现这个效果。我们再来看Header组件是怎么实现的。首先给输入框添加按压事件，onKeyUp={this.handleKeyUp}，然后我们就可以去函数里面操作了。

        首先我们是通过回车来添加state的，说明当我们输入文本按回车的时候，函数才会执行。首先我们通过keyCode以及target.value = event来获取当前事件发生的按键以及对应的文本，然后判断keyCode==13才继续执行，记住了还要target.value.trim()===''也要满足，也就是不能为空包含不能有空格。trim()去掉空格。然后我们就可以调用函数，首先定义todoObj={id:{nanoid},name:target.value,done:false}，这里的nanoid是一个库，引入后我们可以之间调用nanoid方法随机生成id，防止id重复。然后直接this.props.addTodo（todoObj）直接使用函数并且传回去数据，这样我们就可以实现效果了。

        

        ​​​​​​​​​​​​​​