React 学习笔记：组件通信

最新推荐文章于 2024-06-26 18:20:49 发布
最新推荐文章于 2024-06-26 18:20:49 发布
阅读量523 收藏
点赞数
分类专栏： # React相关 文章标签： react.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46015333/article/details/128172876
版权

组件通信

组件为什么需要通信呢？这是因为组件是独立且封闭的单元，默认情况下，组件只能使用自己的数据，但是多个组件之间不可避免的要共享某些数据，为了实现这些功能，就需要打破组件的独立封闭性，让其与外界沟通。

父传子

在这里插入图片描述

React 中的数据只能从“辈分高”的组件传到“辈分低”的组件，所以 React 中数据只能是单向数据流，是自顶而下的。

  • 父组件将数据传给子组件通过 Props 实现，使用子组件的时候通过属性绑定数据，在组件内部通过 props 获取即可。
  • 父组件传递数据给子组件，父组件更新数据子组件自动接收更新后的数据，子组件是不能修改数据的。

props

可以传递的数据类型
  • 字符串
  • 数字
  • 布尔
  • 数组
  • 对象
  • 函数
  • JSX （插槽）
类型检查

由于 props 都是别的组件传递的，在使用的时候如果数据类型不对，很容易造成组件内部逻辑出错，为了避免这种情况可以通过 prop-types 插件在创建组件的时候进行类型检查。

  • 安装 yarn add prop-types

常见的校验规则

  • 常见类型：array、bool、func、number、object、string
  • React元素类型：element
  • 必填项：isRequired
  • 特定结构的对象：shape({})

函数组件

import propTypes from 'prop-types'
function Father() {
  return (
    <Son name='孤城浪人'></Son>
  );
}
function Son(props) {
  return <div>{props.name}</div>
}
Son.propTypes = {
  name: propTypes.number
}
  • 类组件
function Father() {
  return (
    <Son name="孤城浪人"></Son>
  );
}

class Son extends React.Component {
  static propTypes = {
    name: propTypes.string
  }
  render() {
    return <div>{this.props.name}</div>
  }
}
默认值

给组件的 props 设置默认值，在未传入props的时候生效。有两种方式

  • 函数组件
function Father() {
  return (
    <Son></Son>
  );
}

function Son(props) {
  return <div>{props.name}</div>
}
Son.defaultProps = {
  // props属性：校验规则
  name: '孤城浪人'
}

新版react推荐使用参数默认值来实现

// 分页组件
function Father() {
  return (
    <Son></Son>
  );
}
function Son({ name = '孤城浪人' }) {
  return <div>{name}</div>
}
  • 类组件
function Father() {
  return (
    <Son></Son>
  );
}

class Son extends React.Component {
  static defaultProps = {
    name: '孤城浪人'
  }
  render() {
    return <div>{this.props.name}</div>
  }
}

函数组件

函数组件接收一个参数就是 props，当然作为形参可以任意命名，但是一般参数名就是 props。

<body>
  <div id="root"></div>
  <script type="text/javascript" src="./js/react.development.js"></script>
  <script type="text/javascript" src="./js/react-dom.development.js"></script>
  <script type="text/javascript" src="./js/babel.min.js"></script>
  <script type="text/babel">
    // 渲染虚拟dom
    function Father() {
      return (
        <div>
          <Son myKey="姓名" value="孤城浪人" />
          <Son myKey="年龄" value="22" />
        </div>
      )
    }
    function Son(props) {
      return <div>{props.myKey}：{props.value}</div>
    }
    ReactDOM.render(<Father />, document.getElementById('root'));
  </script>
</body>

类组件

类组件会自动将 props 绑定在当前组件实例上。

<body>
  <div id="root"></div>
  <script type="text/javascript" src="./js/react.development.js"></script>
  <script type="text/javascript" src="./js/react-dom.development.js"></script>
  <script type="text/javascript" src="./js/babel.min.js"></script>
  <script type="text/babel">
    // 渲染虚拟dom
    class Father extends React.Component {
      state = {
        info: [{
          myKey: '姓名',
          value: '孤城浪人'
        }, {
          myKey: '年龄',
          value: '22'
        }]
      }
      render() {
        return (
          <div>
            {this.state.info.map(item => <Son key={item.value} myKey={item.myKey} value={item.value} />)}
          </div>
        )
      }
    }
    class Son extends React.Component {
      render() {
        return <div>{this.props.myKey}：{this.props.value}</div>
      }
    }
    ReactDOM.render(<Father />, document.getElementById('root'));
  </script>
</body>

子传父

上面说过子组件不能直接修改父组件传来的 props，并且父组件中数据改变后子组件自动接收更新后的数据，利用这两个特性 React 提供了一种机制间接的修改。父组件传给子组件一个函数，该函数能够修改父组件的数据，当子组件需要修改数据时，就调用该函数，让父组件帮自己改，最后自动接收修改后的数据。

步骤：

  1. 父组件提供回调函数，通过 props 传递给子组件
  2. 子组件调用 props 中的回调函数，函数可传参
  3. 父组件函数的参数就是子组件传递的数据
<body>
  <div id="root"></div>
  <script type="text/javascript" src="./js/react.development.js"></script>
  <script type="text/javascript" src="./js/react-dom.development.js"></script>
  <script type="text/javascript" src="./js/babel.min.js"></script>
  <script type="text/babel">
    // 渲染虚拟dom
    class Father extends React.Component {
      state = {
        info: [{
          myKey: '姓名',
          value: '孤城浪人'
        }, {
          myKey: '年龄',
          value: 22
        }]
      }
      addAge = () => {
        this.setState(preState => {
          console.log(preState)
          preState.info.forEach(element => {
            if (element.myKey == '年龄') {
              element.value++;
            }
          });
          return preState;
        });
      }
      render() {
        return (
          <div>
            <Son myKey={this.state.info[0].myKey} value={this.state.info[0].value} />
            <Son myKey={this.state.info[1].myKey} value={this.state.info[1].value} addAge={this.addAge} />
          </div>
        )
      }
    }
    class Son extends React.Component {
      render() {
        return <div onClick={this.props.addAge}>{this.props.myKey}：{this.props.value}</div>
      }
    }
    ReactDOM.render(<Father />, document.getElementById('root'));
  </script>
</body>

兄弟组件通信

开发中需要通信的组件之间当然不只是父子关系，还有兄弟关系，如下图子组件1和子组件2。
在这里插入图片描述
我们可以子组件 1 和子组件 2 都用到的数据保存在父组件中，在通过 props 传给子组件，这样无论是子组件 1 还是子组件 2 通过父子通信的方式修改了数据，子组件都能接收到修改后的数据。

<body>
  <div id="root"></div>
  <script type="text/javascript" src="./js/react.development.js"></script>
  <script type="text/javascript" src="./js/react-dom.development.js"></script>
  <script type="text/javascript" src="./js/babel.min.js"></script>
  <script type="text/babel">
    class Father extends React.Component {
      state = {
        myKey: '年龄',
        value: 22
      }
      addAge = () => {
        this.setState(preState => preState.value++);
      }
      render() {
        return (
          <div>
            <Son1 myKey={this.state.myKey} value={this.state.value} addAge={this.addAge} />
            <Son2 myKey={this.state.myKey} value={this.state.value} addAge={this.addAge} />
          </div>
        )
      }
    }
    class Son1 extends React.Component {
      render() {
        return <div onClick={this.props.addAge}>{this.props.myKey}：{this.props.value}</div>
      }
    }
    class Son2 extends React.Component {
      render() {
        return <div onClick={this.props.addAge}>{this.props.myKey}：{this.props.value}</div>
      }
    }
    ReactDOM.render(<Father />, document.getElementById('root'));
  </script>
</body>

祖孙组件通信

在这里插入图片描述
这种嵌套极深的组件间通信目前来说有两种方式

  • 层层传递 props
  • context 技术

层层传递实现

这种实现方式比较麻烦，而且也不利于后期维护，若是需要修改一个属性名，那么层层组件都需要修改。

<body>
  <div id="root"></div>
  <script type="text/javascript" src="./js/react.development.js"></script>
  <script type="text/javascript" src="./js/react-dom.development.js"></script>
  <script type="text/javascript" src="./js/babel.min.js"></script>
  <script type="text/babel">
    // 渲染虚拟dom
    class Father extends React.Component {
      state = {
        myKey: '年龄',
        value: 22
      }
      addAge = () => {
        this.setState(preState => preState.value++);
      }
      render() {
        return (
          <div>
            <Son myKey={this.state.myKey} value={this.state.value} addAge={this.addAge} />
          </div>
        )
      }
    }
    class Son extends React.Component {
      render() {
        return <Grandson addAge={this.props.addAge} myKey={this.props.myKey} value={this.props.value} />
      }
    }
    class Grandson extends React.Component {
      render() {
        return <div onClick={this.props.addAge}>{this.props.myKey}：{this.props.value}</div>
      }
    }
    ReactDOM.render(<Father />, document.getElementById('root'));
  </script>
</body>

context 实现

上下文，一个范围，只要在这个范围内，就可以跨级组件通讯。（不需要 props 层层传递）。React 会往上找到最近的 theme Provider，然后使用它的值。

我的理解就是类似发布订阅模式，祖辈组件发布数据，孙辈组件订阅数据（个人理解）。

<body>
  <div id="root"></div>
  <script type="text/javascript" src="./js/react.development.js"></script>
  <script type="text/javascript" src="./js/react-dom.development.js"></script>
  <script type="text/javascript" src="./js/babel.min.js"></script>
  <script type="text/babel">
    const infoContext = React.createContext({});
    class Father extends React.Component {
      state = {
        myKey: '年龄',
        value: 22,
      }
      addAge = () => {
        this.setState(preState => preState.value++);
      }
      render() {
        return (
          <infoContext.Provider value={this.state}>
            <div>
              <Son />
            </div>
          </infoContext.Provider>

        )
      }
    }
    class Son extends React.Component {
      render() {
        return <Grandson />
      }
    }
    class Grandson extends React.Component {
      // 指定 contextType 读取当前的 theme context。这是不能少的
      static contextType = infoContext;
      render() {
        console.log(this.context)
        return <div onClick={this.context.addAge()}>{this.context.myKey}：{this.context.value}</div>
      }
    }
    ReactDOM.render(<Father />, document.getElementById('root'));
  </script>
</body>

第三方库

除了上述的几种组件间通信方式还可以使用第三方插件例如 redux，我的理解就是他们提供一个仓库，存放着所有的需要共享的数据，任何组件都可以从这个仓库拿数据、修改数据。如下图
在这里插入图片描述
但是这里就不做过多记录，后边学习到这些知识在记录一下。我是孤城浪人，一名正在前端路上摸爬滚打的菜鸟，欢迎你的关注。

孤城浪人
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
react笔记：组件
weixin_45844109的博客
07-18 283
react组件以及相关内容。
React学习笔记之六：组件间的参数传递
qq_24724109的博客
07-03 190
6. 组件间传参 父组件向子组件传参 子组件向父组件传参 0. 上一波目前为止的App.js文件中我们的组件代码！ 我们来回顾下之前我们做了啥，目前为止完整的代码： import React, { Component } from 'react'; import './App.css'; class Header extends Component { render() { re...
React学习笔记（组件通信）
关注我！带你一路 "狂飙" 到底！
02-03 231
父组件与子组件通信子组件与父组件通信跨组件通信在react没有类似vue中的事件总线来解决这个问题，我们只能借助它们共同的父级组件来实现，将非父子关系装换成多维度的父子关系。react提供了 api来实现跨组件通信, React 16.3之后的api较之前的好用。实例，使用 实现购物车中的加减功能 HOC(高阶组件) Higher-Order Components就是一个函数，传给它一个组件，它返回一个新的组件。 比如，我们想要我们的组件通过自动注入一个版权信息。 这样只要我们有需要用到版
React学习笔记（组件通信）_千峰教育 react
04-28 947
​// 定义一个dispatch的方法，接收到动作之后，自动调用​```创建createStore方法让changeState方法变为一个纯函数合并state和changeState(最终版)
react18 函数组件 学习笔记
Scar_goSky的博客
05-11 1443
rect笔记
06:React学习笔记. 组件通信
znbb_的博客
03-18 102
文章目录1.父传子2.子传父3. 同级组件通信 1.父传子 1.1 父组件通过props属性=值的形式来传递给子组件数据。 1.2 子组件通过props参数获取父组件传递过来的数据。 1.3 类组件和函数组件都可以。 2.子传父 React中同样是通过props传递消息，只是让父组件给子组件传递一个回调函数，在子组件中调用这个函数即可； 子组件触发事件，调用父组件函数，同时把数据当做参数传递过去。 class Parent extends Component { state = {
React学习笔记十二——组件之间的通信方式
2401_84093973的博客
04-20 769
正值金三银四招聘旺季，很多小伙伴都询问我有没有前端方面的面试题，特地整理出来赠送给大家！资料领取方式：点击这里前往免费获取[外链图片转存中…(img-rLBznzOf-1713553391632)][外链图片转存中…(img-vR66hscP-1713553391632)]既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！[外链图片转存中…(img-O7OFkU83-1713553391633)]
React学习笔记（二）
qq_45243719的博客
02-05 1828
{show && <div>是否展示
react-websocket:用于 websocket 通信的易于使用的 React 组件
07-23
react-websocket是一个易于使用的 React 组件，用于 websocket 通信。 把招工广告 这里的事情进展得很慢，因为我目前还有很多其他事情要处理，所以如果我没有回答你的问题或者 PR 有几天或几周没有审核，请不要生气...
React中的Props：组件间通信的关键
06-19
在React中，组件间的通信主要依赖于props（属性）和state（状态）。Props是父组件向子组件传递数据的一种机制。本文将详细探讨React中props的概念、作用以及使用方式。 React是一个用于构建用户界面的声明式...
React学习笔记之高阶组件应用
01-19
是什么 高阶组件是一个函数，能够接受一个组件并返回一个新的组件。没有任何副作用。...class Hello extends React.Component { // } 如何实现 属性代理 下面的例子是最简单的一个实现 function hoc(Impo
react-vtree:React组件可有效渲染大型树结构
04-30
React树 该软件包提供了一种轻量级且灵活的解决方案，用于渲染大型树结构。 它建立在库的顶部。 注意力！ 该库被完全重写以与react-window 。 如果您要为树视图解决方案，请查看 。 注意：这是版本3.xx的文档。 ...
react_snack:组件化贪吃蛇
05-16
react_snack props提供： num:方格个数（长/宽） speed:速度（ms）
React实现列表列宽可拖拽
weixin_46031207的博客
06-21 231
【代码】React实现列表列宽可拖拽。
node+nginx实现对react进行一键打包部署--windows版
m0_51311990的博客
06-25 724
使用nginx+node实现对react项目进行打包,自动部署到本机.
ReactNative进阶（二十八）Metro
IT全栈 华强工作室
06-23 526
众所周知，Metro是默认的 JavaScript 打包模块。对于前端项目，打包工具已有webpack(大而全，图片代码打包)，rollup(专攻代码打包,框架场景常见)等，既然有这些打包工具为什么还要在移动端搞一个metro，其中一个原因为ram bundle，iOS采用读取一个文件效率更高，Android采用。
React Hooks 小记（七）_useReducer
最新发布
Web人
06-26 625
<button>修改 name 的值</button><Son1 /><Son2 /></div>
React+TS 从零开始教程（1）
java小白翻身
06-20 1052
里面是一个空的{} 再来建一个.prettierignore，类似于.gitignore，是指我们不需要格式化的文件。现在我们说下prettier是干嘛用的吧，他就是帮我们自动格式化的，统一格式化代码，这样就不需要我们一个个文件去格式化了。并且将刚才的db.json移动进去，这个目录用__开头，代表跟项目本身没啥关系，只是辅助。post代表提交数据，返回了一个新的user，并且，我们的db.json也改了。注意，如果你的node版本很低，14左右的样子，用下面这个（MD搞死了~）
必须要会的React.js 面试题值得收藏（适合中高级）.pdf
12-15
React.js 是一个流行的前端框架，对于前端开发人员来说，熟练掌握 React.js 是非常重要的。为了帮助中高级前端开发人员更好地备战面试，我们整理了一份必须要会的 React.js 面试题值得收藏。这份面试题包含了组件...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值