第二天React(传值和生命周期附带案例)

---

一.React中的传值

1.1 父传子

React中的父传子传值也是采用自定义属性，之后在子组件中使用this.props调用值

//父组件  
state= {
    name:'kk',
    num:11
}
<child  num={this.state.name}></child>//子组件
//子组件中
<p> {this.props.num} </p>//就能直接调用

1.2 子传父传值

React采用的是单项数据流模式,说白了就是this.props只能读取不能修改，所以本质上子传父也是一种父传子

//父组件
father(v){
  console.log(v)
}
<child father={this.father.bind(this)}></child>//子组件
子组件中 
child(){
    this.props.father('212')//212就是向父元素传的值
    //所以本质上还是父传子就是调用了子组件调用了父元素的方法向父元素传值从而对父元素中的数据进行修改等
}

<button onClick={this.child.bind(this)}></button>

二.React的生命周期

  constructor(props){
     sunper(props)
   //组件刚刚创建，一般用于数据初始化
   //在这里面可以初始化state中的数据 
   this.state= {
       // 数据
     }
}
//废弃的生命周期不介绍了
render(){
   //正在挂载
}
componentDidMount(){
   //挂载完成 一般用于发送请求很重要
}

shouldComponentUpdate(){
  //是否允许数据更新 如果 return true就是允许 
  //如果 return false  就是不允许数据更新 
  //  在引入Component 的时候如果在前面加入 Pure的话可以对React生命周期进行优化
}
render(){
   //正在修改
}
componentDidUpdate(){
   //修改完成
}
componentWillUnmount(){
  //销毁阶段

}

三.父传子案例练习

页面是这样的数据都写成死的，因为我们不能请求接口，需求分析一共由四个组件组成,大盒子组件,添加组件，是否完成组件，是否完成组件中的表单按钮等在未完成点击选中久变成已完成，点击删除就变成删除

3.1List.jsx

最大的父组件

import React, { Component } from 'react'
import './Llst.css'
import Add from './Add'
import Isend from './Isend'
let id = 5
export default class LIst extends Component {
      constructor(props){
          super(props)
         this.state ={
               list:[    
            {id:1,value:'我是123',check:true},
            {id:2,value:'我是22222',check:true},
            {id:3,value:'我是3444444444',check:false},
            {id:4,value:'我是6666666',check:false},
            {id:5,value:'我是777777777777',check:false},
        ],
         }
      }

   add(v){
        if(v !== ''){
            id++ 
            let obj = {id:id,value:v,check:false}
            let arr = JSON.parse(JSON.stringify(this.state.list))
            arr.push(obj)
            this.setState({
                  list:arr
            }) 
        }else {
             alert('请输入正确的内容')
        }
   }
   
  allfinesh(v){
        console.log('确实完成',v);
      //   如果id等于v那么久修改check中的值
        let arr=this.state.list.map(item=>{
                if(item.id===v){
                  let obj = {id:item.id,value:item.value,check:true}
                      return obj
                }else {
                   return item
                }
        })
     this.setState({
          list:arr
     })

  }
    
   shanlist(v){
    //  console.log();
    this.setState({
          list:this.state.list.filter(item=>!(item.id===v))
    })
   }
  render() {
    return (
      <div className='bigbox'> 
         <div className='big-top'>列表</div>
          <Add  add={this.add.bind(this)}></Add>
        <Isend title='未完成'    list={this.state.list.filter(item=>!item.check)}   shanlist={this.shanlist.bind(this)}  allfinesh={this.allfinesh.bind(this)} ></Isend>
        <Isend title='已完成'   list={this.state.list.filter(item=>item.check)}  shanlist={this.shanlist.bind(this)}></Isend>
        </div>
    )
  }
}

3.2公共css

.bigbox {
     width: 500px;
     padding: 20px;
     border: 1px solid #333;
     box-shadow: 10px 10px 10px #333;
     margin:auto;
     margin-top: 40px;
}
.big-top {
      width: 460px;
      height: 20px;
      line-height: 20px;
      border-bottom: 1px solid #333;
}
.all-add {
      width: 460px;
      margin-top: 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
}
.all-add  input {
    width: 87%;
      /* border: none; */
     outline: none; 
}
.all-add  button {
          width: 50px;
          background-color: darkblue;   
          color: #fff;
}
.isend {
       width: 460px;
}
.list {
     display: flex;
     justify-content: space-between;
     align-items: center;
}

3.3 添加组件

import React, { Component } from 'react'

export default class Add extends Component {


  tian(){
      //  console.log(this.refs.addnum.value);
       this.props.add(this.refs.addnum.value)
       this.refs.addnum.value=''
  }
  render() {
    return (
      <div className='all-add'>
      <input type="text"   ref='addnum'/>
      <button onClick={this.tian.bind(this)}>添加</button>
      </div>
    )
  }
}

3.4是否完成组件

import React, { Component } from 'react'
import Valuea from './Value'
export default class Isend extends Component {
    del(v){
        //   console.log('删除',v);
          this.props.shanlist(v)
    }

     
  dofinesh(v){
      //  console.log('完成',v);
       this.props.allfinesh(v)
  }
  render() {
    return (
      <div className='isend'>
       <h4>{this.props.title}</h4>
       { this.props.list.map(item=>{
            return (
                <Valuea item={item} key={item.id}   del={this.del.bind(this)}  dofinesh={this.dofinesh.bind(this)}></Valuea>
             )  

       }) }

      </div>
    )
  }
}

3.5 按钮表单组件

import React, { Component } from 'react'

export default class Value extends Component {

    shan(v){
        //   console.log();
        this.props.del(v)
    }
finesh(v){
    //  console.log(v.target.checked);
    // this.props.item.id
    this.props.dofinesh(v)
}
  render() {
    return (
        <div className="list"><input type="checkbox"  onChange={this.finesh.bind(this,this.props.item.id)} /> <div>{this.props.item.value}</div><button onClick={this.shan.bind(this,this.props.item.id)}>删除</button></div>  
    )
  }
}