React 组件通讯

目录

组件通讯

组件的Props

组件通讯的三种方式

父组件传递数据给子组件

子组件传递数据给父组件

兄弟组件

Context

props 深入

children 属性

props 效验

 使用步骤

约束规则

props的默认值

---

组件通讯

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

组件的Props

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

// 函数组件 
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'))

特点

1. 可以给组件传递任意类型的数据
2. props 是只读的对象 , 只能读取属性的值 , 无法修改对象

3. 注意: 使用类组件时候 , 如果写了构造函数 , 应该将props 传递给 super() , 否则 , 无法在构造函数中获取到props

class Hello extends React.Component {
  constructor(props) {
    super(props)
    console.log(this.props);
  }
  render() {
    return (
      
接收到的数据:{this.props.age}
    )
  }
}
ReactDOM.render(, document.getElementById('root'))

组件通讯的三种方式

 组件之间的通讯分为3种:

1. 父组件   =>  子组件
2. 子组件   =>  父组件
3. 兄弟组件

父组件传递数据给子组件

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

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

        传递数据给子组件:
      
    )
  }
}

//子组件
function Child(props) {
  return 
子组件收到数据:{props.name}
}

子组件传递数据给父组件

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

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

// 父组件
class Parent extends React.Component {
  getChildMsg = (data) => {
    console.log('接收到子组件数据', data);
  }
  render() {
    return (
      

        父组件:
      
    )
  }
}

//子组件
class Child extends React.Component {
  state = { ChildMsg: "React" }
  handleClick = () => {
    this.props.getMsg(this.state.ChildMsg)
  }
  render() {
    return (
      给父组件传值
    )
  }
}


ReactDOM.render(, document.getElementById('root'))   

注意: 回调函数中 this 指向问题 

兄弟组件

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

// 父组件
class Counter extends React.Component {
  // 提供共享状态
  state = {
    count: 0
  }
  // 提供修改状态的方法
  onIncrement = (data) => {
    this.setState({
      count: this.state.count + data
    })
  }
  render() {
    return (
      

        
        
      
    )
  }
}

// 子组件
const Child1 = (props) => {
  return 
计数器:{props.count}
}

// 子组件
const Child2 = (props) => {
  return  props.getData(1)}>+1
}
ReactDOM.render(, document.getElementById('root'))   

Context

如果APP组件要传递数据给Child组件,应该怎么处理

• 处理方式: 使用 props 一层层组件往下传递 ( 繁琐 )
• 更好的姿势: 使用 Context 
  • 作用: 跨组件传递数据 ( 比如: 主题 , 语言等 )

使用步骤:

1. 调用 React.createContext() 创建 Provider (提供数据) 和 Consumer (消费数据) 两个组件

const { Provider , Consumer } = React.createContext()

2. 使用 Provider 组件作为父节点

3. 设置 value 属性 , 表示要传递的数据

4. 调用 Consumer 组件接收数据

  { data =>  data 参数表示接受数据 -- { data } 

const { Provider, Consumer } = React.createContext()

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

          
        
      
    )
  }
}

const Node = props => {
  return (
    

      
    
  )
}

const SubNode = props => {
  return (
    

      
    
  )
}

const Child = props => {
  return 

    // data表示接受数据 -- pauline_
    {data => data表示接受数据 -- {data}}
  
}

ReactDOM.render(, document.getElementById('root'))

props 深入

children 属性

• children 属性 : 表示组件标签的子节点. 当组件标签有子节点时 , props就会有该属性
• children 属性与普通 props 一样 , 值可以是任意值( 文本 , React元素 , 组件 , 甚至是函数 )

function Hello(props) {
  console.log(props);
  return (
    

      组件的子节点: {props.children}
    
  )
}

ReactDOM.render(我是子节点, document.getElementById('root'))

props 效验

• 对于组件来说 , props是外来的 , 无法保证组件使用者传入什么格式的数据
• 如果传入的数据格式不对 , 可能会导致组件内部报错
• 关键问题: 组件的使用者不知道明确的错误原因

1. props 效验: 允许在创建组件的时候 , 就指定props的类型 . 格式等
2. 作用: 捕获使用组件时因为 props 导致的错误 , 给出明确的错误提示 , 增加组件的健壮性

App.propTypes = {
  colors : PropTypes.array
 

 使用步骤

1.安装包

npm i props-types

2. 导入 prop-types 包

3.  使用 组件名.propTypes = {} 来给组件的props添加效验规则

function App(props) {
  return (
    
Hi , {props.colors}
  )
}
App.propTypes = {
  // 约定colors 属性为Array类型
  // 如果类型不对 , 则报出明显错误 , 便于分析错误原因
  colors: PropTypes.array
}
ReactDOM.render(, document.getElementById('root'))

约束规则

1. 常见类型: array , bool , func , number , object , string 
2. React 元素类型 : element
3. 必填项 : isRequired

// 常见类型
element: PropTypes.func,

//必选
element: PropTypes.func.isRequired,

// 特定结构的对象
element: PropTypes.shape({
  color: PropTypes.string,
  fontSize: PropTypes.number
})

props的默认值

• 场景: 分页组件 => 每页显示条数

function App(props) {
  console.log(props);
  return (
    

      此处展示props的默认值:{props.pageSize}
    
  )
}
//设置默认值
App.defaultProps = {
  pageSize: 10
}
// 不传入pageSize属性

ReactDOM.render(, document.getElementById('root'))