React——组件通讯

组件通讯介绍

组件中的状态是私有的，组件的状态只能在组件内部使用，无法直接在组件外使用，但是我们在日常开发中，通常会把相似、功能完整的应用才分成组件（工厂模式）利于我们的开发，而不同组件直接又需要传递数据，而这个过程就是组件通讯。

组件通讯-父子间、兄弟间传值props

props，学过vue的其实我们都很熟悉，都是父组件传递给子组件的一种方式。

props 是只读对象，只能读取属性，无法修改，属于单向数据流。

根本作用：接收（其他组件）传递给当前组件的数据

如何传递

// 传递数据：给组件标签添加属性 用{}内部传入数据，数据类型依据输入决定
<New userName='hyy' id={
   '1233414'} />

函数组件接受，参数props直接接受

// 接收数据（函数组件）：
// props ：{ userName='hyy' id={'1233414'} }
function getProps(props) {
   
  return (
    <div>
      <div>{
   props.userName}</div>
      <div>{
   props.id}</div>
      </div>
  )
}

Class组件接受，this.props接受

// 接收数据（类组件）：
// this.props ：{ userName='hyy' id={'1233414'} }
class New extends Component {
   
  render() {
   
    return (
        <div>
      <div>{
   this.props.userName}</div>
      <div>{
   this.props.id}</div>
        </div>
    ) 
  }
}