React进阶之路（二）-- 组件通信、组件进阶

最新推荐文章于 2024-03-25 03:19:03 发布
最新推荐文章于 2024-03-25 03:19:03 发布
阅读量483 收藏 1
点赞数
分类专栏： React 文章标签： react 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zyb18507175502/article/details/134262509
版权

文章目录

组件通信

组件通信的意义

组件是独立且封闭的单元，默认情况下组件只能使用自己的数据（state）
组件化开发的过程中，完整的功能会拆分多个组件，在这个过程中不可避免的需要互相传递一些数据
为了能让各组件之间可以进行互相沟通，数据传递，这个过程就是组件通信

  1. 父子关系 - 最重要的
  2. 兄弟关系 - 自定义事件模式产生技术方法 eventBus / 通过共同的父组件通信
  3. 其它关系 - mobx / redux / zustand

父传子实现

实现步骤

  1. 父组件提供要传递的数据 - state （可以不满足，例如传递方法的时候）
  2. 给子组件标签添加属性，值为 state中的数据
  3. 子组件中通过 props 接收父组件中传过来的数据
    • 类组件使用this.props获取props对象
    • 函数式组件直接通过参数获取props对象

在子组件标签上添加的属性，都会成为该子组件props属性（对象）上的值

接下来我们来实现一下如下的场景：

在这里插入图片描述
实现代码：

import React from 'react'

// 函数式子组件
function FSon(props) {
  console.log(props)
  return (
    <div>
      子组件1
      {props.msg}
    </div>
  )
}

// 类子组件
class CSon extends React.Component {
  render() {
    return (
      <div>
        子组件2
        {this.props.msg}
      </div>
    )
  }
}
// 父组件
class App extends React.Component {
  state = {
    message: 'this is message'
  }
  render() {
    return (
      <div>
        <div>父组件</div>
        <FSon msg={this.state.message} />
        <CSon msg={this.state.message} />
      </div>
    )
  }
}

export default App

props说明

  1. props是只读对象（readonly）
    根据单项数据流的要求，子组件只能读取props中的数据，不能进行修改

  2. props可以传递任意数据
    数字、字符串、布尔值、数组、对象、函数、JSX

class App extends React.Component {
  state = {
    message: 'this is message'
  }
  render() {
    return (
      <div>
        <div>父组件</div>
        <FSon 
          msg={this.state.message} 
          age={20} 
          isMan={true} 
          cb={() => { console.log(1) }} 
          child={<span>this is child</span>}
        />
        <CSon msg={this.state.message} />
      </div>
    )
  }
}

在这里插入图片描述
同时我们在使用props的时候通常会使用解构赋值，例如：

在这里插入图片描述

当然我们也可以直接在函数的参数位置进行解构赋值：

在这里插入图片描述

子传父实现

本质： 父组件给子组件传递回调函数，子组件调用

实现步骤

  1. 父组件提供一个回调函数 - 用于接收数据
  2. 将函数作为属性的值，传给子组件
  3. 子组件通过props调用 回调函数
  4. 将子组件中的数据作为参数传递给回调函数

接下来我们来实现一下如下的场景：
在这里插入图片描述

代码实现：

import React from 'react'

// 子组件
function Son(props) {
  function handleClick() {
    // 调用父组件传递过来的回调函数 并注入参数
    props.changeMsg('this is newMessage')
  }
  return (
    <div>
      {props.msg}
      <button onClick={handleClick}>change</button>
    </div>
  )
}


class App extends React.Component {
  state = {
    message: 'this is message'
  }
  // 提供回调函数
  changeMessage = (newMsg) => {
    console.log('子组件传过来的数据:',newMsg)
    this.setState({
      message: newMsg
    })
  }
  render() {
    return (
      <div>
        <div>父组件</div>
        <Son
          msg={this.state.message}
          // 传递给子组件
          changeMsg={this.changeMessage}
        />
      </div>
    )
  }
}

export default App

兄弟组件通信

核心思路： 通过状态提升机制，利用共同的父组件实现兄弟通信。也就是说通过子传父+父传子来实现。

在这里插入图片描述

实现步骤

  1. 将共享状态提升到最近的公共父组件中，由公共父组件管理这个状态
    • 提供共享状态
    • 提供操作共享状态的方法
  2. 要接收数据状态的子组件通过 props 接收数据
  3. 要传递数据状态的子组件通过props接收方法，调用方法传递数据

代码实现：

import React from 'react'

// 子组件A
function SonA(props) {
  return (
    <div>
      SonA
      {props.msg}
    </div>
  )
}
// 子组件B
function SonB(props) {
  return (
    <div>
      SonB
      <button onClick={() => props.changeMsg('new message')}>changeMsg</button>
    </div>
  )
}

// 父组件
class App extends React.Component {
  // 父组件提供状态数据
  state = {
    message: 'this is message'
  }
  // 父组件提供修改数据的方法
  changeMsg = (newMsg) => {
    this.setState({
      message: newMsg
    })
  }

  render() {
    return (
      <>
        {/* 接收数据的组件 */}
        <SonA msg={this.state.message} />
        {/* 修改数据的组件 */}
        <SonB changeMsg={this.changeMsg} />
      </>
    )
  }
}

export default App

跨组件通信Context

在这里插入图片描述
上图是一个react形成的嵌套组件树，如果我们想从App组件向任意一个下层组件传递数据，该怎么办呢？目前我们能采取的方式就是一层一层的props往下传，显然很繁琐

那么，Context 提供了一个无需为每层组件手动添加 props，就能在组件树间进行数据传递的方法

实现步骤：

  1. 创建Context对象 导出 Provider 和 Consumer对象

    const { Provider, Consumer } = createContext()

  2. 使用Provider包裹上层组件提供数据 ，注意：Provider组件不一定必须包裹根组件，但是必须包裹需要共享数据的子组件的最近公共祖先组件。这样，Provider组件可以将数据通过Context对象传递给所有的子孙组件，而不需要通过props逐层传递

    <Provider value={this.state.message}>
    {/* 根组件 */}
</Provider>

  3. 需要用到数据的组件使用Consumer包裹获取数据 ，注意：这里括号里面是一个箭头函数的方法声明，形式不能改变！！！

    <Consumer >
    {value => /* 基于 context 值进行渲染*/}
</Consumer>

代码实现：

import React, { createContext }  from 'react'

// 1. 创建Context对象 
const { Provider, Consumer } = createContext()


// 3. 消费数据
function ComC() {
  return (
    <Consumer >
      {value => <div>{value}</div>}
    </Consumer>
  )
}

function ComA() {
  return (
    <ComC/>
  )
}

// 2. 提供数据
class App extends React.Component {
  state = {
    message: 'this is message'
  }
  render() {
    return (
      <Provider value={this.state.message}>
        <div className="app">
          <ComA />
        </div>
      </Provider>
    )
  }
}

export default App

通信案例

要求：App为父组件用来提供列表数据 ，ListItem为子组件用来渲染列表数据

在这里插入图片描述

// 列表数据
[
  { id: 1, name: '超级好吃的棒棒糖', price: 18.8, info: '开业大酬宾，全场8折' },
  { id: 2, name: '超级好吃的大鸡腿', price: 34.2, info: '开业大酬宾，全场8折' },
  { id: 3, name: '超级无敌的冰激凌', price: 14.2, info: '开业大酬宾，全场8折' }
]

代码实现：

import React from 'react'

// 子组件
function ListItem(props) {
  const { name, price, info, id, delHandler } = props
  return (
    <div>
      <h3>{name}</h3>
      <p>{price}</p>
      <p>{info}</p>
      <button onClick={() => delHandler(id)}>删除</button>
    </div>
  )
}

// 父组件
class App extends React.Component {
  state = {
    list: [
      { id: 1, name: '超级好吃的棒棒糖', price: 18.8, info: '开业大酬宾，全场8折' },
      { id: 2, name: '超级好吃的大鸡腿', price: 34.2, info: '开业大酬宾，全场8折' },
      { id: 3, name: '超级无敌的冰激凌', price: 14.2, info: '开业大酬宾，全场8折' }
    ]
  }

  delHandler = (id) => {
    this.setState({
      list: this.state.list.filter(item => item.id !== id)
    })
  }

  render() {
    return (
      <>
        {
          this.state.list.map(item =>
            <ListItem
              key={item.id}
              {...item}
              delHandler={this.delHandler} 
            />
          )
        }
      </>
    )
  }
}

export default App

React组件进阶

children属性

children属性表示该组件的子节点，只要组件内部有子节点，props中就有该属性

children可以是：

  1. 普通文本
  2. 普通标签元素
  3. 函数 / 对象
  4. JSX

props校验

在ts中这个问题得到了很好的解决，不需要第三方依赖的支持。

对于组件来说，props是由外部传入的，我们其实无法保证组件使用者传入了什么格式的数据，如果传入的数据格式不对，就有可能会导致组件内部错误，有一个点很关键 - 组件的使用者可能报错了也不知道为什么，看下面的例子：
在这里插入图片描述

面对这样的问题，如何解决？ props校验

实现步骤

  1. 安装属性校验包：yarn add prop-types
  2. 导入prop-types 包
  3. 使用 组件名.propTypes = {} 给组件添加校验规则

核心代码：

import PropTypes from 'prop-types'

const List = props => {
  const arr = props.colors
  const lis = arr.map((item, index) => <li key={index}>{item.name}</li>)
  return <ul>{lis}</ul>
}

List.propTypes = {
  colors: PropTypes.array
}

规则说明

四种常见结构

  1. 常见类型：array、bool、func、number、object、string
  2. React元素类型：element
  3. 必填项：isRequired
  4. 特定的结构对象：shape({})
// 常见类型
optionalFunc: PropTypes.func,
// 必填 只需要在类型后面串联一个isRequired
requiredFunc: PropTypes.func.isRequired,
// 特定结构的对象
optionalObjectWithShape: PropTypes.shape({
	color: PropTypes.string,
	fontSize: PropTypes.number
})

官网文档更多阅读：https://reactjs.org/docs/typechecking-with-proptypes.html

如何给组件的props提供默认值

对于函数组件来说：

直接使用函数参数默认值

function List({pageSize = 10}) {
  return (
    <div>
      此处展示props的默认值：{ pageSize }
    </div>
  )
}

// 不传入pageSize属性
<List />

对于类组件来说

使用类静态属性声明默认值，static defaultProps = {}

class List extends Component {
  static defaultProps = {
    pageSize: 10
  }
  render() {
    return (
      <div>
        此处展示props的默认值：{this.props.pageSize}
      </div>
    )
  }
}
<List />

通过我们上面使用的第三包工具包里的 defaultProps 也可以给组件的props设置默认值，在未传入props的时候生效

组件生命周期

组件的生命周期是指组件从被创建到挂载到页面中运行起来，再到组件不用时卸载的过程，注意，只有类组件才有生命周期（类组件 实例化 函数组件 不需要实例化）

那么我们自然就有一个疑问，既然函数组件没有生命周期，那么他怎么实现类似钩子函数的功能？

  • React函数组件本身是没有生命周期函数的，因为它们只是接收props并返回JSX的纯函数，没有自己的状态和实例。
  • React函数组件可以通过使用Effect Hook来模拟一些生命周期的功能，例如在组件挂载、更新或卸载时执行一些副作用操作¹。
  • React函数组件还可以通过使用其他的Hook来实现一些类组件的特性，例如useState Hook可以让函数组件拥有自己的状态，useRef Hook可以让函数组件访问DOM元素或保存一些可变的值，useCallback Hook和useMemo Hook可以让函数组件优化性能等。

在这里插入图片描述
如何理解render阶段纯净且不包含副作用？

  • React的render阶段是指React组件根据props和state生成虚拟DOM的过程。在这个过程中，React会调用组件的render方法或函数组件本身，返回一个React元素或null。
  • React的render阶段是纯净的，也就是说，它不会对组件的props和state进行任何修改，也不会对外部环境产生任何影响。这样可以保证render阶段的可预测性和可测试性，以及避免不必要的渲染和性能损耗。
  • React的render阶段是不包含副作用的，也就是说，它不会对真实的DOM进行任何操作，也不会触发任何生命周期方法或钩子函数。这样可以保证render阶段的纯粹性和高效性，以及避免不必要的副作用和错误。
    • 例如：发送一个请求是一种副作用操作，因为它会对外部环境产生影响，例如改变服务器的状态或者获取数据。因此，发送一个请求不应该在render阶段进行，而应该在其他阶段进行，例如在生命周期方法或钩子函数中。
  • React的render阶段只负责生成虚拟DOM，而不负责渲染到真实的DOM上。这一步由React的commit阶段完成，它会根据虚拟DOM和真实DOM的差异，进行最小化的更新。在commit阶段，React会执行一些副作用操作，例如调用生命周期方法或钩子函数，插入或删除DOM节点，添加或移除事件监听器等。

接下来我们来看一下类组件的三个重要的生命阶段：

  • 挂载
  • 更新
  • 卸载

挂载阶段

在这里插入图片描述
注意：

  • constructer现在用的不是很多了，例如初始化state直接写就行，不用写在constructer里面。
  • 在render里面不要使用setState，因为setState会导致重新渲染从而再次执行render函数，相当于进入了无限循环。

例如：
在这里插入图片描述
在这里插入图片描述

更新阶段

也就是每次更新都会执行的钩子函数
在这里插入图片描述
注意：

  • componentDidUpdate不能直接调用setState，因为setState会造成更新，从而再次调用render函数，这样就会造成无限循环。

卸载阶段

在这里插入图片描述

在这里插入图片描述

注意：react类组件中的生命周期函数可以使用箭头函数表示，例如：

// 导入React和Component
import React, { Component } from "react";

// 定义一个计数器组件，继承自Component
class Counter extends Component {
  // 定义一个构造函数，用来初始化state和props
  constructor(props) {
    // 调用super方法，传入props
    super(props);
    // 初始化state，设置count为0
    this.state = {
      count: 0,
    };
  }

  // 定义一个生命周期函数，用来在组件挂载时执行一些操作
  // 使用箭头函数，不需要使用bind方法或者闭包来绑定this
  componentDidMount = () => {
    // 在控制台输出一条信息，表示组件已经挂载
    console.log("The component is mounted.");
  };

  // 定义一个生命周期函数，用来在组件更新时执行一些操作
  // 使用箭头函数，不需要使用bind方法或者闭包来绑定this
  componentDidUpdate = () => {
    // 在控制台输出一条信息，表示组件已经更新，以及当前的count值
    console.log("The component is updated. The count is " + this.state.count);
  };

  // 定义一个生命周期函数，用来在组件卸载时执行一些操作
  // 使用箭头函数，不需要使用bind方法或者闭包来绑定this
  componentWillUnmount = () => {
    // 在控制台输出一条信息，表示组件已经卸载
    console.log("The component is unmounted.");
  };

  // 定义一个方法，用来增加count的值
  // 使用箭头函数，不需要使用bind方法或者闭包来绑定this
  increment = () => {
    // 使用setState方法，将count的值加一
    this.setState((prevState) => ({
      count: prevState.count + 1,
    }));
  };

  // 定义一个方法，用来减少count的值
  // 使用箭头函数，不需要使用bind方法或者闭包来绑定this
  decrement = () => {
    // 使用setState方法，将count的值减一
    this.setState((prevState) => ({
      count: prevState.count - 1,
    }));
  };

  // 定义一个渲染方法，用来返回组件的视图
  render() {
    // 返回一个div元素，包含一个h1元素和一个button元素
    return (
      <div>
        <h1>Counter: {this.state.count}</h1>
        <button onClick={this.increment}>+</button>
        <button onClick={this.decrement}>-</button>
      </div>
    );
  }
}

// 导出Counter组件
export default Counter;

还要注意：生命周期函数是同步的，只有在执行完了之后才会进入下一个生命周期执行下一个生命周期钩子。

十八岁讨厌编程
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
React进阶学习之组件的解耦之道
08-29
主要给大家介绍了关于React进阶之组件的解耦之道，文中通过详细的示例代码给大家介绍了组件分割与解耦的方法，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面跟着小编来一起学习学习吧。
【react从入门到精通】React兄弟组件通信方式详解（有示例）
全栈弄潮儿
05-08 1059
在上一篇文章《[React父子组件通信方式详解]》中我们学习到了React父子组件通信的4中方式。本文中我们将详细了解react兄弟组件通信方式。
12 React 组件通信 兄弟组件之间通信
最新发布
保持学习的态度
03-25 725
在React中实现兄弟组件通信相对于父子组件通信来说稍微复杂一些，因为React本身是基于单向数据流的，兄弟组件之间并没有直接的通信途径。可以使用像Redux、MobX或者Context API这样的状态管理库来管理共享状态，兄弟组件通过这些库来共享状态。创建一个事件总线或者自定义Hooks，兄弟组件通过事件或者Hooks来通信。父组件将需要共享的状态作为props传递给两个兄弟组件。
react hook组件间通讯的4种方式
程序员良仔
01-27 4016
前言 自从react官方引入了hook，很多小伙伴都从老的class组件换为hook组件，但因为hook组件的传参和class组件传参还是有些区别的，所以下文汇总了4种传参方式 目录前言一、父传子1、父组件2、子组件二、子传父1、父组件2、子组件三、父传后代1、context.js2、父组件3、子组件4、子孙组件四、父调用子的函数1、父组件2、子组件 一、父传子 子组件通过props接收父组件传来的数据 1、父组件 import React, { useState } from 'react' imp
react 三种通信方式
weixin_46419373的博客
07-13 1970
react有三种通信方式：一、父传子，二、字传父，三、兄弟之间传值 一、父组件向子组件传值 父组件通过属性的方式传递参数，子组件通过props来接收父组件传递过来的参数 React中是单向数据流，数据只能从父组件通过属性的方式传给其子组件，如下图： 在引用子组件的时候传递，相当于一个属性，例如：在子组件内通过porps.param获取到这个param的值。 父组件向子组件传值，通过props，将父组件的state传递给了子组件。 父组件（直接定义一个属性传值即可）： import React, {.
vue中实现在子组件中刷新父组件
liyiliang123的博客
09-10 3652
一、首先是父组件，现在父组件中的子组件属性上添加监听事件，signStatusVerdict 二、其次是子组件，发射一个事件给父组件的监听属性 三、最后是父组件，父组件中监听到事件后会执行listenSignStatus方法，执行更新父组件列表操作 ...
React中组件之间如何通信？
m0_65349389的博客
02-20 521
由于React是单向数据流，主要思想是组件不会改变接收的数据，只会监听数据的变化，当数据发生变化时它们会使用接收到的新值，而不是去修改已有的值因此，可以看到通信过程中，数据的存储位置都是存放在上级位置中。
React组件之间如何通信？
zz130428的博客
12-08 471
父组件在调用子组件的时候，在子组件标签内传递参数，子组件通过props属性就能接收父组件传递过来的参数。context创建成功后，其下存在Provider组件用于创建数据源，Consumer组件用于接收数据。使用context提供了组件之间通讯的一种方式，可以共享数据，其他数据都能读取对应的数据。父组件向子组件传一个函数，然后通过这个函数的回调，拿到子组件传过来的值。Provider组件通过value属性用于给后代组件传递数据。父组件作为中间层来实现数据的互通，通过使用父组件传递。
react兄弟组件之间的通讯
m0_58001779的博客
07-14 3194
组件一为父组件，组件二和组件三是子组件。 一、状态提升 如果组件二想要向组件三传值，先把组件二中的值通过自定义事件穿到父组件，在通过父组件向组件三挂载属性进行传值。 二、发布订阅 同上例，全局定义bus对象 const bus={ list:[], subscribe(callback){ bus.list.push(callback) }, publish(val){ bus.list.forEach(item=> ...
React组件间通讯
weixin_33698043的博客
11-06 265
转自：blog.csdn.net/mqy1023/art…作者：mqy1023说 React 组件间通讯之前，我们先来讨论一下 React 组件究竟有多少种层级间的关系。假设我们开发的项目是一个纯 React 的项目，那我们项目应该有如下类似的关系： 父子：Parent 与 Child_1、Child_2、Child_1_1、Child_1_2、Child_2_1 兄弟：Child_1 与 Chi...
10种React组件之间通信的方法
jialiang808的博客
06-16 2598
10种React组件之间通信的方法。父子组件之间的通信、兄弟组件之间的通信以及无关联的组件之间的通信。
基于react-window 库编写的一个超灵活的表格源码+项目说明.zip
09-21
2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载使用，也适合小白学习进阶，当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。...
最新react-基础知识整理
06-08
包括React组件基础、组件状态、React组件通信、跨组件通信Context、React组件进阶、生命周期、Hooks基础，进阶
Vue从出门到出家之基本Vue全家桶进阶
06-21
其中包含Vue基础API、Vue组件化开发、Vue组件通信、官方脚手架Vue-cli3的使用、Vue-devtools的使用 、element-ui第三方组件的使用、手把手带你打造自己的表单组件、Vue核心插件之vue-router和vuex、基于权限控制实现...
React 入门教程
04-06
介紹 React 概览 开发环境配置 Webpack JSX 使用 JSX ...组件间通信 Mixins Data Flow Flux Redux 进化 Flux Redux 基础 和 React 配合使用 [Redux 进阶] 表单 [动画] [测试] [性能调优] 服务端渲染
React组件之间如何通信
weixin_70238574的博客
08-18 309
跨层级通讯: Context 设计⽬的是为了共享那些对于⼀个 组件树⽽⾔是“全局”的数据， 使用context提供了组件之间通讯的一种方式，可以共享数据，其他数据都能读取对应的数据 例如当前认证的⽤户、主题或⾸选语⾔,对于跨越多层的全局数据通过 Context 通信再适合不过。子组件向父组件通讯: props+回调的方式，父组件向子组件传递props进行通讯，此props为作用域为父组件自身的函数，子组件调用该函数，将子组件想要传递的信息，作为参数，传递到⽗组件的作⽤域中。
8种React组件间通信方式（类组件+函数组件）
Lin_DOUbleP的博客
08-23 2972
本次分享就到这了~笔者为初学者，欢迎各位评论区交流。
如何让react-native-echarts-pro 组件旋转
05-27
要让 react-native-echarts-pro 组件旋转，你需要在配置项中设置旋转角度。具体步骤如下： 1. 在你的组件中引入 react-native-echarts-pro 组件： ``` import ReactEcharts from 'react-native-echarts-pro'; ``` ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

十八岁讨厌编程

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值