快捷導(dǎo)航

詳解React的組件通訊

更新時(shí)間：2021年11月09日 16:28:27 作者：捧鮮花的唐老鴨

這篇文章主要介紹了詳解react組件通訊方式，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

組件通訊介紹

內(nèi)容

組件是獨(dú)立且封閉的單元，默認(rèn)情況下，只能使用組件自己的數(shù)據(jù)。
在組件化過程中，我們將一個(gè)完整的功能拆分成多個(gè)組件，以更好的完成整個(gè)應(yīng)用的功能。
而在這個(gè)過程中，多個(gè)組件之間不可避免的要共享某些數(shù)據(jù)
為了實(shí)現(xiàn)這些功能，就需要打破組件的獨(dú)立封閉性，讓其與外界溝通。這個(gè)過程就是組件通訊。

三種方式

父子組件之間
兄弟組件之間
跨組件層級(jí)

小結(jié)

組件中的狀態(tài)是私有的，也就是說，組件的狀態(tài)只能在組件內(nèi)部使用，無法直接在組件外使用

組件通訊-父?jìng)髯?/h2>

內(nèi)容：

父組件提供要傳遞的state數(shù)據(jù)
給子組件標(biāo)簽添加屬性，值為 state 中的數(shù)據(jù)
子組件中通過 props 接收父組件中傳遞的數(shù)據(jù)

核心代碼

父組件提供數(shù)據(jù)并且傳遞給子組件

class Parent extends React.Component {
    state = { lastName: '王' }
    render() {
        return (
            <div>
                傳遞數(shù)據(jù)給子組件：<Child name={this.state.lastName} />
            </div>
        )
    }
}

子組件接收數(shù)據(jù)

function Child(props) {
	return <div>子組件接收到數(shù)據(jù)：{props.name}</div>
}

組件通訊-子傳父

思路

利用回調(diào)函數(shù)，父組件提供回調(diào)，子組件調(diào)用，將要傳遞的數(shù)據(jù)作為回調(diào)函數(shù)的參數(shù)。

步驟

1.父組件

1.定義一個(gè)回調(diào)函數(shù)f（將會(huì)用于接收數(shù)據(jù)）

2.將該函數(shù)f作為屬性的值，傳遞給子組件

2.子組件

1.通過 props 獲取f

2.調(diào)用f，并傳入將子組件的數(shù)據(jù)

核心代碼

父組件提供函數(shù)并且傳遞給子組件

class Parent extends React.Component {
    state: {
      num: 100
    }
    f = (num) => {
        console.log('接收到子組件數(shù)據(jù)', num)
    }
    render() {
        return (
            <div>
            	子組件：<Child f={this.f} />
            </div>
        )
    }
}

子組件接收函數(shù)并且調(diào)用

class Child extends React.Component {
    handleClick = () => {
      // 調(diào)用父組件傳入的props，并傳入?yún)?shù)
    	this.props.f(100)
    }
    return (
    	<button onClick={this.handleClick}>點(diǎn)我，給父組件傳遞數(shù)據(jù)</button>
    )
}

小結(jié)

子傳父：在子組件中調(diào)用從父組件中定義的方法，并根據(jù)需要傳入?yún)?shù)

組件通訊-兄弟組件

在React中沒有確定的兄弟組件,就沒有這個(gè)說法哈,有的只有狀態(tài)提升.

思路

將共享狀態(tài)提升到最近的公共父組件中，由公共父組件管理這個(gè)狀態(tài)
思想：狀態(tài)提升
公共父組件職責(zé)：
- 提供共享狀態(tài)
- 提供操作共享狀態(tài)的方法
要通訊的子組件只需通過 props 接收狀態(tài)或操作狀態(tài)的方法

核心代碼

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. 狀態(tài)提升到父組件
  state = {
    msg: '',
  }
  render() {
    return (
      <div>
        <h1>我是App組件</h1>
        <Jack say={this.changeMsg}></Jack>
        {/* 2. 把狀態(tài)給子組件顯示 */}
        <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>
    )
  }
}

組件通訊 -跨級(jí)組件通訊

想在vue中使用跨級(jí)組件通訊,需要使用Context

使用Context的步驟

共三步：

1.導(dǎo)入并調(diào)用createContext方法，從結(jié)果中解構(gòu)出 Provider, Consumer 組件

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

2.使用 Provider 組件包裹根組件，并通過 value 屬性提供要共享的數(shù)據(jù)

return (
  <Provider value={ 這里放要傳遞的數(shù)據(jù) }>
  	<根組件的內(nèi)容/>
  </Provider>
)

3.在任意后代組件中，使用第2步中導(dǎo)出的Consumer組件包裹整個(gè)組件

return (
	<Consumer>
  	{
      （data） => {
      	// 這里的形參data 就會(huì)自動(dòng)接收Provider中傳入的數(shù)據(jù)
        // console.log(data)
      	return <組件的內(nèi)容>
    	}
    }
  </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>
    )
  }
}