React的组件通讯是什么

本文向您展示了React的组件通信是什么。内容简洁易懂。它一定会让你闪闪发光。希望通过这篇文章的详细介绍，你能有所收获。

00-1010

组件通讯介绍

组件是一个独立的封闭单元。默认情况下，只能使用组件本身的数据。

在组件化的过程中，我们将一个完整的功能拆分成多个组件，以更好地完成整个应用程序的功能。

在这个过程中，不可避免地要在多个组件之间共享一些数据。

为了实现这些功能，需要打破组件的独立性和封闭性，让它们与外界进行交流。这个过程就是组件通信。

父组件和子组件之间的00-1010

兄弟之间

跨组件层次结构

内容

组件中的状态是私有的，即组件的状态只能在组件内部使用，不能直接在组件外部使用。

00-1010

三种方式

父组件提供要传递的状态数据。

向部件标签添加属性，其值为状态中的数据。

子组件通过道具接收从父组件传输的数据。

00-1010父组件提供数据并将其传递给子组件。

classParentextendsReact。组件{

状态={lastName: '王' }

render(){ 0

返回(

差异

向子组件传递数据：子组件名称={this.state.lastname}/

/div

)

}

}

小结

functionChild(道具){ 0

Returndiv子组件接收到数据：{props.name}/div

}

组件通讯-父传子

内容：

使用回调函数，父组件提供回调，子组件调用，待传输的数据作为回调函数的参数。

00-1010 1.父组件

1.定义一个回调函数f(用于接收数据)

2.将函数F作为属性值传递给子组件。

2.子组件

1.通过道具获得f

2.调用F，传入子组件的数据。

00-1010父组件提供函数并将它们传递给子组件。

classParentextendsReact。组件{

状态：{

num:100

}

f=(num)={ 0

Console.log('收到的子组件数据'，编号)

}

render(){ 0

n

bsp;       return (
            <div>
             子组件：<Child f={this.f} />
            </div>
        )
    }
}

子组件接收函数并且调用

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

小结

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

组件通讯-兄弟组件

在React中没有确定的兄弟组件,就没有这个说法哈,有的只有状态提升.

思路

• 将共享状态提升到最近的公共父组件中，由公共父组件管理这个状态

• 思想：状态提升

• 公共父组件职责：

• 提供共享状态

• 提供操作共享状态的方法

• 要通讯的子组件只需通过 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>
        <h2>我是App组件</h2>
        <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>
        <h4>我是Jack组件</h4>
        <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>
        <h4>我是Rose组件-{this.props.msg}</h4>
      </div>
    )
  }
}

组件通讯 -跨级组件通讯

想在vue中使用跨级组件通讯,需要使用Context

使用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>
    )
  }
}

上述内容就是React的组件通讯是什么，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注行业资讯频道。