react的组件通讯的使用方法详解

拓展：使用vscode的代码片段快速录入组件基本结构

组件通讯介绍 

介绍组件通讯

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

三种方式

• 父子组件之间
• 兄弟组件之间
• 跨组件层级

注意：

       组件中的状态是私有的，也就是说，组件的状态只能在组件内部使用，无法直接在组件外使用

props基本使用

 props的使用语法，能将数据从父组件传给子组件

步骤

1. 父组件使用子组件时，传入自定义属性
2. 子组件内部接收属性

格式

父组件-传入数据

<子组件 自定义属性1={值1} 自定义属性2={值2} .... />

子组件-函数式组件-接收数据

// 接收数据： 函数组件需要通过补充形参来获取
function 子组件(props) {
  console.log('从父组件中传入的自定义属性被收集在对象:', props)
  return (<div>子组件的内容</div>)
}

示例：函数组件获取props

// 接收数据：
// props 的值就是：{ age: 19 }
function HelloFunc(props) {
  return (
    <div>接收到数据:{props.name}</div>
  )
}

// 传递数据：
// 可以把传递数据理解为调用函数 Hello，即：HelloFunc({ age: 19 })
<HelloFunc age={19} />

示例：类组件获取props

// 接收数据：
// class 组件需要通过 this.props 来获取
class HelloClass extends Component {
  render() {
    return (
      <div>接收到的数据:{this.props.age}</div>
    ) 
  }
}

// 传递数据：
<HelloClass age={19} />

总结

props是实现组件通讯的关键

props的三个注意事项

目标

了解props的特点，知道什么是单向数据流

内容

• 可以传递任意数据
• 只读的
• 单向数据流

可以传递任意数据

props可以传递：数字 字符串 布尔类型 数组 对象 函数 jsx

props 是只读对象

只能读取对象中的属性，无法修改

this.props.age =20 // 错误

单向数据流

也叫做：自上而下的数据流

1. 父组件中的数据可以通过 props 传递给子组件，并且，当父组件中的数据更新时，子组件就会自动接收到最新的数据
2. 父组件的数据更新会流动到子组件，不能反过来，子组件直接去修改父组件的数据
3. 类比：就像瀑布的水一样只能从上往下流动，并且，当上游的水变浑浊，下游的水也会受到影响

props的children属性

目标

掌握props中children属性的用法

children属性

• children属性：表示该组件的子节点，只要组件有子节点，props就有该属性
• children 属性与普通的props一样，值可以是任意值（文本、React元素、组件，甚至是函数）

核心代码

function Hello(props) {
  return (
    <div>
      该组件的子节点：{props.children}
    </div>
  )
}

<Hello>我是子节点</Hello>

组件通讯-父传子

目标

将父组件的数据，传递给子组件

内容：

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

核心代码

父组件提供数据并且传递给子组件

class Parent extends React.Component {
    state = { lastName: '王' }
    render() {
        return (
            <div>
                传递数据给子组件：<Child name={this.state.lastName} />
            </div>
        )
    }
}

子组件接收数据

function Child(props) {
	return <div>子组件接收到数据：{props.name}</div>
}

组件通讯-子传父

目标

能够将子组件的数据传递给父组件

思路

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

步骤

1. 父组件
   1. 定义一个回调函数f（将会用于接收数据）
   2. 将该函数f作为属性的值，传递给子组件
2. 子组件
   1. 通过 props 获取f
   2. 调用f，并传入将子组件的数据

核心代码

父组件提供函数并且传递给子组件

class Parent extends React.Component {
    state: {
      num: 100
    }
    f = (num) => {
        console.log('接收到子组件数据', num)
    }
    render() {
        return (
            <div>
            	子组件：<Child f={this.f} />
            </div>
        )
    }
}

子组件接收函数并且调用

class Child extends React.Component {
    handleClick = () => {
      // 调用父组件传入的props，并传入参数
    	this.props.f(100)
    }
    return (
    	<button onClick={this.handleClick}>点我，给父组件传递数据</button>
    )
}

小结

子传父：在子组件中调用从父组件中定义的方法，并根据需要传入参数

组件通讯-兄弟组件

底层原理：状态提升实现兄弟组件之间的组件通讯

思路

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

核心代码

parent.js

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import Jack from './Jack'
import Rose from './Rose'
class App extends Component {
  // 1. 状态提升到父组件
  state = {
    msg: '',
  }
  render() {
    return (
      <div>
        <h1>我是App组件</h1>
        <Jack say={this.changeMsg}></Jack>
        {/* 2. 把状态给子组件显示 */}
        <Rose msg={this.state.msg}></Rose>
      </div>
    )
  }
  changeMsg = (msg) => {
    this.setState({
      msg,
    })
  }
}

// 渲染组件
ReactDOM.render(<App />, document.getElementById('root'))

Son1.js

import React, { Component } from 'react'

export default class Jack extends Component {
  render() {
    return (
      <div>
        <h3>我是Jack组件</h3>
        <button onClick={this.say}>说</button>
      </div>
    )
  }
  say = () => {
    this.props.say('you jump i look')
  }
}

Son2.js

import React, { Component } from 'react'

export default class Rose extends Component {
  render() {
    return (
      <div>
        <h3>我是Rose组件-{this.props.msg}</h3>
      </div>
    )
  }
}

组件通讯 -跨级组件通讯

掌握Context的使用，能用context实现跨级组件通讯

基本素材代码结构

-index.css # 样式
-index.js  # 根组件
-Parent.js # 父组件,与Uncle同级
-Uncle.js  # 
-Son.js    # 子组件

index.js

// index.js
import React from 'react'
import ReactDOM from 'react-dom'
import Parent from './Parent'
import Uncle from './Uncle'
import './index.css'
class App extends React.Component {
  state = {
    num: 0
  }

  render () {
    return (
        <div>
          根组件， num:
          {this.state.num}
          <Parent />
          <Uncle />
        </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('root'))

parent.js

import React from 'react'
import Son from './Son'
export default class Parent extends React.Component {
  render () {
    return (
      <div>
        我是parent组件
        <Son />
      </div>
    )
  }
}

Uncle.js

import React from 'react'
export default class Uncle extends React.Component {
  render () {
    return (<div>我是Uncle组件</div>)
  }
}

Son.js

import React from 'react'
import { Consumer } from './context'
export default class Son1 extends React.Component {
  render () {
      return <div onClick={() => data.add()}>我是son1组件{data.num}</div>
  }
}

思路：

使用Context的步骤

共四步：

1. 导入并调用createContext方法，从结果中解构出 Provider, Consumer 组件

import { createContext } from 'react'
const { Provider, Consumer } = createContext()

2.使用 Provider 组件包裹根组件，并通过 value 属性提供要共享的数据

return (
  <Provider value={ 这里放要传递的数据 }>
  	<根组件的内容/>
  </Provider>
)

3.在任意后代组件中，使用第2步中导出的Consumer组件包裹整个组件

return (
	<Consumer>
  	{
      （data） => {
      	// 这里的形参data 就会自动接收Provider中传入的数据
        // console.log(data)
      	return <组件的内容>
    	}
    }
  </Consumer>
)

落地代码

建立context.js文件

import { createContext } from 'react'
const { Provider, Consumer } = createContext()
export { Consumer, Provider }

改造根组件

import { Provider } from './context'

render () {
    return (
      <Provider value={{ num: this.state.num }}>
        <div>
          根组件, num: {this.state.num}
          <Parent />
          <Uncle />
        </div>
      </Provider>
    )
  }

改造后代组件 Uncle.js

import React from 'react'
import { Consumer } from './context'
export default class Uncle extends React.Component {
  render () {
    return (
      <Consumer>
        {(data) => {
          return <div>我是Uncle组件, {data.num}</div>
        }}
      </Consumer>
    )
  }
}