学习react第四天

学习react第四天

备注:主要是组件之间的通讯和一个小练习 虽然有点长但是请耐心看完 可能会给你带来收获（初学者react的个人笔记）

基础组件state和setState的小练习

效果图:

class Pubilsh extends react.Component{
  constructor(){
    super()
    this.state={
      value:"",
      Arr:[
      
      ],
    }
  }
  change=(e)=>{
    this.setState({
      value:e.target.value
    })
  }
  addData=(e)=>{
    // let {}
    let {Arr,value}=this.state;
    // react笔记这种写法等同于
    // let newArr=[...Arr]不过是加上了一层新的数据
      let newArr=[
        {content:value},
        ...Arr
      ]
      this.setState({
        Arr:newArr,
        value:"",
      })
    
  }
  
  render(){
    return (
      <div className='maxbox'>
        <div className='fixed'>
          <div><input type='text' placeholder='请输入消息'  value={this.state.value} onChange={this.change}></input></div>
          <button onClick={this.addData}>发表评论</button>
        </div>

        {this.state.Arr.length==0 ? (        <div className='ArrNull'>
          暂无更多消息
        </div>) : (
            <div className='main'>
            {this.state.Arr.map((items,index)=>(
              <div key={index} >
              <span>{items.content}</span>
              <img src="https://gimg2.baidu.com/image_search/src=https%3A%2F%2F2.zoppoz.workers.dev%3A443%2Fhttp%2Fpic.qqtn.com%2Fup%2F2017-11%2F2017112817293693626.jpg&refer=https%3A%2F%2F2.zoppoz.workers.dev%3A443%2Fhttp%2Fpic.qqtn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1635566521&t=25a5e30adf1428da75056ac65ab7122a" alt="" />
            </div>
            ))}
          </div>
        )}
      </div>
    )
  }
}
reactDOM.render(<Pubilsh></Pubilsh>,document.querySelector("#root"))

父子通讯和兄弟通讯

父传子

使用函数组件通讯

//这是函数组件使用props
// 通过 参数props 访问
function FunProps(props){
  // 使用onClick触发props传过来的方法
  // 使用props.tag方法传过来的jsx
  return (<span onClick={props.fun}>{props.age}
  {props.tag}
  </span>)
}

export default FunProps

使用类组件通讯

// 这是类组件使用props通信
// 类组件如果在 构造函数中不写入props无法直接获取的
class Props extends react.Component{
  constructor(props){
    super(props)
    console.log(props)
  }
  render(){
    return (<span>{this.props.style.color}</span>)
  }
}

export default Props

// 这是父组件上面两个都是子组件 类和函数

import react from 'react'
import reactDOM from 'react-dom'
// 类组件访问props
import Props from './components/props'
// 函数组件props
import FunProps from './components/FunProps'



// 组件
// 可以接收任何类型的数据和vue props一样
//props只能读取对象的值，无法修改对象的值和vue差不多



{/* <Props age={19} style={{color:'#fff'}}></Props> */ }
{/* <FunProps age='19' fun={()=>{console.log("这是通过props传过去的方法")}} tag={<span>这是通过prosp传过去的jsx</span>}></FunProps> */}
reactDOM.render(<Props age={19} style={{color:'#fff'}}></Props>, document.querySelector("#root"));

子传父

// 子传父也是使用props 套路和思想 与vue差不多

// 子组件
class Parent extends react.Component{
  constructor(props){
    super(props);
  }
  hand=()=>{
    this.props.parentFun("子组件改变了父组件")
  }
  render(){
    return (<span onClick={this.hand}>{this.props.name}</span>)
  }
}


// 父组件
class Props extends react.Component{
  constructor(props){
    super(props);
    this.state={
      name:"这是父组件的数据"
    }
  }
  hand=(data)=>{
    console.log(data)
    this.setState({
      name:data
    })
  }
  render(){
    return (<Parent name={this.state.name} parentFun={this.hand}></Parent>)
  }
}
reactDOM.render(<Props></Props>,document.querySelector("#root"))

父组件下的子组件之间的通讯（兄弟通讯）

import react from 'react'
import reactDOM from 'react-dom'

// 兄弟通讯


// 父组件
class Parent extends react.Component{
  state={
    name:1,
  }
  hand=()=>{
    this.setState({
      name:this.state.name+=1,
    })
  }
  render(){
    return ( <div>
      <Count1 count={this.state.name}></Count1>
      <Count2 hand={this.hand}></Count2>
    </div>)
  }
}

const Count1 = (props)=>{
  return (<span>{props.count}</span>)
}
const Count2 = (props)=>{
  return (<span onClick={props.hand}>点击增加</span>)
}
reactDOM.render(<Parent></Parent>,document.querySelector("#root"))

react的provider和Consumer跨组件通讯

// 如果使用props  要一个一个往下传 太繁琐 所以就有了Context

// Context 可以进行跨组件通讯 （传递数据）类似于vue3的provide和inject
// 设置传递的数据:可以在根组件 使用 <Provider value='要传递的数据 名字随意和props一样'></Provider>
// 消费数据:在最终显示的页面可以使用 <Consumer>通过回调函数进行使用数据: {data=><span>{data.value}</span>}</Consumer>



const {Provider,Consumer}=react.createContext();

class Parent extends react.Component{
  render(){
    return (
      <Provider value='这是根组件'>
        <Child1></Child1>
      </Provider>
    )
  }
}

const Child1=(props)=>{
  return (<Child2></Child2>)
}

const Child2=(props)=>{
  return (
    <Consumer>
      {data=><span>{data}</span>}
    </Consumer>
  )
}

reactDOM.render(<Parent></Parent>,document.querySelector("#root"))