我们在项目中需要写一些功能页面的时候，也就是添加新的功能组件，比如我们想要创建一个增删改查表单案例，用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.state
return (
<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.props
return (
<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.props
const {mouse} = this.state
return (
<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.props
const {mouse} = this.state
return (
<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} = event
if(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.state
const 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）直接使用函数并且传回去数据，这样我们就可以实现效果了。
