React--组件通讯

1.什么是组件通讯

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

2.组件的props

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

//函数组件
import React from 'react';
import ReactDOM from 'react-dom';

//可以写成箭头函数的形式
function Hello(props){
  console.log(props)
  return(
    
接收到的数据：{props.name}
  )
}
ReactDOM.render(,document.getElementById('root'))


//类组件
class Hello extends React.Component{
  render(){
    return(
      
接收到的数据：{this.props.age}
    )
  }
}
ReactDOM.render(,document.getElementById('root'))

 

3.组件props的特点

• 可以给组件传递任意类型的数据
• props是只读的对象，只能读取属性的值，无法修改对象
• 注意：使用类组件，如果写了构造函数，应该将props传递给super（），否则，无法构造函数中获取到props 

 

//
class Hello extends React.Component{
  constructor(props){
    super(props)//推荐将props传递给父类构造函数
  }
  render(){
    return(
      
接收到的数据：{this.props.age}
    )
  }
}
ReactDOM.render(,document.getElementById('root'))

//传递任意数据类型
class Hello extends React.Component{
  constructor(props){
    super(props)
  }
  render(){
    return(
      
接收到的数据：{this.props.age},{this.props.colors},{this.props.fn()},
      {this.props.tag}
    )
  }
}
ReactDOM.render(这是一个p标签
}
  fn={()=>console.log('这是一个函数')}
  colors={['red','green','blue']}
  name='jack' 
  age={21}>
  
 
 
  ,

document.getElementById('root'))

 4.组件通讯的三种方式

4.1父组件传递数据给子组件

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

//父组件
class Parent extends React.Component{
  state = {lastName:'黄'}
  render(){
    return(
      

        传递给子组件：{}
      
    )
  }
}

//
//子组件
function Child(props){
  console.log(props)
  return 
子组件接收到的数据{props.name}
}
ReactDOM.render(,//调用的是父组件

document.getElementById('root'))

4.2子组件传递给父组件

思路：利用回调函数，父组件提供回调，子组件调用，将要传递的数据作为回调函数的参数

• 父组件提供一个回调函数（用于接收数据）
• 将该函数作为属性的值，传递给子组件

//父组件
class Parent extends React.Component{

  //提供回调函数
  getChild = (msg) =>{
    console.log('接收到子组件数据',msg)
  }
  state = {lastName:'黄'}
  render(){
    return(
      

        传递给子组件：{}
      
    )
  }
}

//子组件
class Child extends React.Component{
  state={
    childMag:'React'
  }
  handleClick = ()=>{
    this.props.getMsg(this.state.childMag)
  }
  render(){
    return(
    点我，给父组件传递数据

    )
  }
}
ReactDOM.render(,//调用的是父组件

document.getElementById('root'))

 

4.3兄弟组件通讯

• 将共享状态提升到最近的公共父组件中，由公共父组件管理这个状态
• 思想：状态提升
• 公共父组件的职责：1.提供共享状态2.提供操作共享状态的方法
• 要通讯的子组件只需通过props接收状态或操作状态的方法

 

 

const valueContext = React.createContext('pink')

class App extends React.Component{
  render(){
    return(
      // 
       
      

        
      
        
    )
  }
}

//子组件
const Node = props =>{
  return(
    

      
  
  )
  
}

//子组件
const SunNode = props=>{
  return(
    

      
    
  )
}

class  Child  extends React.Component{
    static contextType = valueContext;
   render(){
     return(
    


       {this.context}
     
    
  )
   }
 
}

ReactDOM.render(,//调用的是父组件

document.getElementById('root'))

 

可参考文档：https://zh-hans.reactjs.org/docs/context.html#reactcreatecontext 

 const{Provider,Consumer} = React.createContext()
//  const valueContext = React.createContext('pink')

class App extends React.Component{
  render(){
    return(
       
       {/*  */}
      

        
      
       {/*   */}
       
    )
  }
}

//子组件
const Node = props =>{
  return(
    

      
  
  )
  
}

//子组件
const SunNode = props=>{
  return(
    

      
    
  )
}

class  Child  extends React.Component{
    // static contextType = valueContext;
   render(){
     return(
    

   {data => data的值为：{data}}

       {/* {this.context} */}
     
    
  )
   }
 
}

ReactDOM.render(,//调用的是父组件

document.getElementById('root'))