React 组件通讯

20 篇文章 0 订阅

1.React 组件通讯

  1. 组件的特点

组件是独立且封闭的单元,默认情况下,只能使用组件自己的数据
在组件化过程中,通常会将一个完整的功能拆分成多个组件,以更好的完成整个应用的功能

  1. 知道组件通讯意义

而在这个过程中,多个组件之间不可避免的要共享某些数据
为了实现这些功能,就需要打破组件的独立封闭性,让其与外界沟通
这个过程就是组件通讯
总结:
组件状态是独立的,组件化之后涉及状态同步,需要进行组件通讯

2. 组件通讯-props 基本使用

能够通过 props 传递数据和接收数据

大致步骤:

  • 传递数据和接收数据的过程
  • 函数组件使用 props
  • 类组件使用 props

具体内容:

  1. 传递数据和接收数据的过程
    • 使用组件的时候通过属性绑定数据,在组件内部通过 props 获取即可。
  2. 函数组件使用 props
// 使用组件
<Hello name="jack" age="20" />
// 定义组件 props包含{name:'jack',age:'20'}
function Hello(props) {
  return <div>接收到数据:{props.name}</div>;
}
  1. 类组件使用 props
// 使用组件
<Hello name="jack" age="20" />
// 定义组件 props包含{name:'jack',age:'20'}
class Hello extends Component {
  render() {
    return <div>接收到的数据:{this.props.age}</div>;
  }
}

总结:

  • props 是实现组件通讯的关键,它通过使用组件绑定属性,组件内部使用 props 来传值。

3.组件通讯-props 注意事项

知道 props 是单项数据流只读,但是可以传递任意数据。

大致步骤:

  • 知道什么是单向数据流
  • 知道 props 可以传递什么数据

具体内容:

  1. 知道什么是单向数据流?
    • 单向数据流,是从上到下的,自顶而下的,数据流。
    • 好比:河流,瀑布,只能从上往下流动,上游污染下游受影响,但是下游不能影响上游。
    • 父组件传递数据给子组件,父组件更新数据子组件自动接收更新后数据,当是子组件是不能修改数据的。
  2. props 可以传递什么数据?任意
    • 字符串
    • 数字
    • 布尔
    • 数组
    • 对象
    • 函数
    • JSX (插槽)

总结:

  • props 传递数据是单向的,可以传递任意格式的数据。

4. 组件通讯-父传子方式

通过 props 将父组件的数据传递给子组件

大致步骤:

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

具体代码:

  1. 父组件提供要传递的 state 数据
class Parent extends React.Component {
  state = {
    money: 10000,
  };
  render() {
    return (
      <div>
        <h1>父组件:{this.state.money}</h1>
      </div>
    );
  }
}
  1. 给子组件标签添加属性,值为 state 中的数据
class Parent extends React.Component {
  state = {
    money: 10000
  }
  render() {
    return (
      <div>
        <h1>父组件:{this.state.money}</h1>
+        <Child money={this.state.money} />
      </div>
    )
  }
}
  1. 子组件中通过 props 接收父组件中传递的数据
function Child(props) {
  return (
    <div>
      <h3>子组件:{props.money}</h3>
    </div>
  );
}

总结:

  • 父组件声明state,在子组件标签通过属性绑定,在子组件中通过props使用。

5. 组件通讯-子传父方式

通过 props 将子组件的数据传递给父组件

大致步骤:

  • 父组件提供回调函数,通过 props 传递给子组件
  • 子组件调用 props 中的回调函数,函数可传参
  • 父组件函数的参数就是子组件传递的数据

具体代码:

  1. 父组件
class Parent extends React.Component {
  state = {
    money: 10000,
  };
  // 回调函数
  buyPhone = (price) => {
    this.setState({
      money: this.state.money - price,
    });
  };
  render() {
    const { money } = this.state;
    return (
      <div>
        <h1>父组件:{money}</h1>
        <Child money={money} buyPhone={this.buyPhone} />
      </div>
    );
  }
}
  1. 子组件
const Child = (props) => {
  const handleClick = () => {
    // 子组件调用父组件传递过来的回调函数
    props.buyPhone(5000);
  };
  return (
    <div>
      <h3>子组件:{props.money}</h3>
      <button onClick={handleClick}>买手机</button>
    </div>
  );
};

总结:

  • 子组件如何传递数据给父组件?触发父组件传递的回调函数 传入数据
  • 父组件如何接收子组件的数据?回调函数的参数是子组件传递的数据
  • 父组件数据更新后,传递给子组件的数据是否更新?自动更新

6.组件通讯-兄弟组件通讯

通过状态提升思想完成兄弟组件数据通讯

大致步骤:

  • 状态提升思想是什么?
  • 演示通过状态提升完成兄弟组件通讯。

具体内容:

  1. 状态提升思想是什么?

    • 将共享状态提升到最近的公共父组件中,由公共父组件管理这个状态和修改状态的方法
      请添加图片描述

    • 需要通讯的组件通过 props 接收状态和函数即可

  2. 参考代码
    index.js

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
 
// 导入两个子组件
import Jack from './Jack';
import Rose from './Rose';
 
// App 是父组件
class App extends Component {
  // 1. 状态提升到父组件
  state = {
    msg: '',
  };
 
  changeMsg = (msg) => {
    this.setState({ msg });
  };
 
  render() {
    return (
      <div>
        <h1>我是App组件</h1>
        {/* 兄弟组件 1 */}
        <Jack changeMsg={this.changeMsg}></Jack>
        {/* 兄弟组件 2 */}
        <Rose msg={this.state.msg}></Rose>
      </div>
    );
  }
}
 
// 渲染组件
ReactDOM.render(<App />, document.getElementById('root'));

Jack.js

import React, { Component } from 'react';
 
export default class Jack extends Component {
  say = () => {
    // 修改数据
    this.props.changeMsg('you jump i look');
  };
  render() {
    return (
      <div>
        <h3>我是Jack组件</h3>
        <button onClick={this.say}></button>
      </div>
    );
  }
}

Rose.jsx

import React, { Component } from 'react';
 
export default class Rose extends Component {
  render() {
    return (
      <div>
        <h3>我是Rose组件-{this.props.msg}</h3>
      </div>
    );
  }
}

7. 组件通讯-context 跨级组件通讯

掌握使用 context 实现跨级组件通讯

大致步骤:

  • 什么是跨级组件通讯?
  • context 怎么去理解?
  • 演示使用 context 完成跨级组件通讯。

具体内容:

  1. 什么是跨级组件通讯?

    • 组件间相隔多层,理解成叔侄,甚至更远的亲戚。
  2. context 怎么去理解?

    • 术语:上下文
    • 理解:一个范围,只要在这个范围内,就可以跨级组件通讯。(不需要 props 层层传递)
  3. 演示使用 context 完成跨级组件通讯
    index.jsx

import React, { Component, createContext } from 'react'
import Parent from './Parent'
 
// 1. 创建上下文对象
// @ts-ignore
export const MyContext = createContext()
 
export default class App extends Component {
  state = {
    money: 10000
  }
  updateMoney = newMoney => {
    this.setState({
      money: newMoney
    })
  }
  render() {
    return (
      // 2. Provider包裹确定上下文生效范围,value注入范围内可用的数据
      <MyContext.Provider value={{
        money: this.state.money,
        updateMoney: this.updateMoney
      }}>
        <div className="app">
          <h1>根组件:{this.state.money}</h1>
          <hr />
          <Parent />
        </div>
      </MyContext.Provider>
    )
  }
}

Parent.jsx

import Child from './Child';
const Parent = () => {
  return (
    <div className="parent">
      <h3>父组件:</h3>
      <hr />
      <Child />
    </div>
  );
};
 
export default Parent;

Child.jsx

import { MyContext } from './App'
 
const Child = () => {
  return (
    // 3. 通过Consumer来消费数据,value=>{ 这里使用数据 }
    <MyContext.Consumer>
      {(value) => (
        <div className="child">
          <h5>子组件:{value.money} <button onClick={()=>value.updateMoney(5000)}>修改money</button></h5>
        </div>
      )}
    </MyContext.Consumer>
  );
};
 
export default Child;

总结:

  • 使用creatContext()创建一个上下文对象,包含:Provider Consumer 组件。
  • 使用 Provider 包裹组件,value 属性注入状态,函数,被包裹组件下的任何组件可以使用。
  • 使用 Consumer 消费 Provider 提供的数据和函数,语法{value=>使用数据和函数}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值