react-组件通讯

组件通讯

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

props

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

函数组件通讯

子组件

function Hello(props) {
    console.log(props)
    return (
    	<div>接收到数据:{props.name}</div>
    )
}

父组件

<Hello name="jack" age={19} />

类组件通讯

子组件

class Hello extends React.Component {
    render() {
        return (
        	<div>接收到的数据:{this.props.age}</div>
        )
    }
}

父组件

<Hello name="jack" age={19} />

props的特点

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

  • props是只读的,不允许修改props的数据

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

class Hello extends React.Component {
    constructor(props) {
        // 推荐将props传递给父类构造函数
        super(props)
    }
    render() {
    	return <div>接收到的数据:{this.props.age}</div>
    }
}

组件通讯三种方式

  • 父传子
  • 子传父
  • 兄弟组件

父传子

  1. 父组件提供要传递的state数据
  2. 给子组件标签添加属性,值为 state 中的数据
  3. 子组件中通过 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. 父组件提供一个回调函数(用于接收数据)
  2. 将该函数作为属性的值,传递给子组件
  3. 子组件通过 props 调用回调函数
  4. 将子组件的数据作为参数传递给回调函数

父组件提供函数并且传递给字符串

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

子组件接收函数并且调用

class Child extends React.Component {
    state = { childMsg: 'React' }
    handleClick = () => {
    	this.props.getMsg(this.state.childMsg)
    }
    return (
    	<button onClick={this.handleClick}>点我,给父组件传递数据</button>
    )
}

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

兄弟组件

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

组件通讯-context

基本概念

思考:App 组件要传递数据给 Child 组件,该如何处理?

处理方式:使用 props 一层层组件往下传递(繁琐)

更好的:使用 Context

作用:跨组件传递数据(比如:主题、语言等)

实现思路

  • 调用 React. createContext() 创建 Provider(提供数据) 和 Consumer(消费数据) 两个组件。
const { Provider, Consumer } = React.createContext()
  • 使用 Provider 组件作为父节点。
<Provider>
    <div className="App">
    	<Child1 />
    </div>
</Provider>
  • 设置 value 属性,表示要传递的数据。
<Provider value="pink">
  • 调用 Consumer 组件接收数据。
<Consumer>
	{data => <span>data参数表示接收到的数据 -- {data}</span>}
</Consumer>

总结:

  1. 如果两个组件是远方亲戚(比如,嵌套多层)可以使用Context实现组件通讯
  2. Context提供了两个组件:Provider 和 Consumer
  3. Provider组件:用来提供数据
  4. Consumer组件:用来消费数据

你可能感兴趣的:(react,react,javascript)