组件通信

组件 是独立且封闭的单元，默认清空下，只能使用组件自己的数据。在组件化过程中，我将一个完整的功能拆分成多个组件，以更好的完整整个应用的功能。而在这个过程中，多个组件之间不可避免的要共享某些数据。为了实现这些功能，就需要打破组件的独立封闭性，让其与外界沟通。这个过程就是 组件通信

props

• 组件时封闭的，要接收外不数据应该通过 props 实现
• props 的作用：接收传递给组件的数据
• 传递数据：给组件标签添加属性
• 接收数据：函数组件通过参数 props 接收数据，类组件通过 this.props 接收数据

子父组件通信

函数组件之间的通信

class App extends Component{
    render(){
        return (
        	<div>
            	<Demo car="ddd" money={100}></Demo>
				<Hello car="ddd" money={100}></Hello>
            </div>
        )
    }
}

子组件

export default function Demo(props){
    return (
    	<div>
        	<h1>Demo组件</h1>
        	<div>{props.car}</div>
        	<div>{props.money}</div>
        </div>
    )
}

类组件的通信

import {Component} from "react"
export default class Hello extends Component{
    render(){
        const {car,money}  = this.props
        return (
        	<div>
            	<h1>Hello组件</h1>
                <div>{props.car}</div>
                <div>{props.money}</div>
            </div>
        )
    }
}

props的特征

• 可以给组件传递任意类型的数据

• props 是只读的，不允许修改 props 的数据，单向数据流

• 注意：在类组件中使用的时候，需要把 porps 传递给 super() ，否则构造函数无法获取到 props

  constructor(){
      super(props)
      console.log(this.props)
  }
  

父传子

1. 父组件提供要传递的 state 数据
2. 给子组件标签添加属性，值为 state 中的数据
3. 子组件中通过 props 接收父组件中传递的数据

<Child wife={this.state.wife}>

export default function Child({wife}){
    return (
    	<div>{wife}</div>
    )
}

子传父

1. 父组件提供一个回调函数 （用于接收数据）
2. 将该函数作为属性的值，传递给子组件
3. 子组件通过 props 调用回调函数
4. 将子组件的数据作为参数传递给回调函数

父组件

<Child wife={this.state.wife} changeName={this.changeName}>
changeName = (name)=>{
    this.setState({
        sonWife:name//接收传递回的参数
    })
}

子组件

render(){
    <div>
    	<input
    	 type="text"
    	 value={this.state.wife}
    	 onChange={this.handleChange}
    </div>
}
handleChange = (e)=>{
    this.setState({
        wife:e.target.value
    })
    this.props.changeName(e.target.value)
}