React进阶之路(二)-- 组件通信、组件进阶

文章目录

  • 组件通信
    • 组件通信的意义
    • 父传子实现
    • props说明
    • 子传父实现
    • 兄弟组件通信
    • 跨组件通信Context
    • 通信案例
  • React组件进阶
    • children属性
    • props校验
    • 组件生命周期

组件通信

组件通信的意义

组件是独立且封闭的单元,默认情况下组件只能使用自己的数据(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;

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/123463.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

2022年接口测试总结【温故知新系列】

本文主要分为两个部分&#xff1a; 第一部分&#xff1a;主要从问题出发&#xff0c;引入接口测试的相关内容并与前端测试进行简单对比&#xff0c;总结两者之前的区别与联系。但该部分只交代了怎么做和如何做&#xff1f;并没有解释为什么要做&#xff1f; 第二部分&#xff1…

Spring Gateway基础知识总结

本文主要总结Spring Gateway的基础用法&#xff0c;内容包括网关、Spring Gateway工作流程、Spring Cloud Gateway搭建、路由配置方式、负载均衡实现、断言工厂这几个部分 目录 1. 网关 1.1 网关介绍 1.2 网关对比 1.3 Spring Gateway 1.4 核心概念 1.6 总结 2. Spring …

什么GAN生成对抗网络?生成对抗网络可以干什么?

生成对抗网络(Generative Adversarial Nets,简称GAN)。神经网络分很多种,有普通的前向传播网络,有分析图片的CNN卷积神经网络,有分析系列化数据比如语言、文字的RNN循环神经网络,这些神经网络都是用来输入数据,得到想要的结果,我们看中的是这些神经网络中很好地将数据与…

SpringCloud——消息总线——Bus

1.什么是总线&#xff1f; 我们在微服务的项目中&#xff0c;通常会构建一个共同的消息主题&#xff0c;然后需要的服务可以连接上来&#xff0c;该主题中产生的消息会被监听和消费&#xff0c;这种我们称为消息总线。 SpringCloud Bus 配合SpringCloud Config使用可以实现配置…

RestTemplate配置和使用

在项目中&#xff0c;如果要调用第三方的http服务&#xff0c;就需要发起http请求&#xff0c;常用的请求方式&#xff1a;第一种&#xff0c;使用java原生发起http请求&#xff0c;这种方式不需要引入第三方库&#xff0c;但是连接不可复用&#xff0c;如果要实现连接复用&…

基础课26——业务流程分析方法论

基础课25中我们提到业务流程分析方法包括以下几种&#xff1a; 价值链分析法&#xff1a;主要是找出或设计出哪些业务能够使得客户满意&#xff0c;实现客户价值最大化的业务流程。要进行价值链分析的时候可以从企业具体的活动进行细分&#xff0c;细分的具体方面可以从生产指…

运行springboot时提示:源值 7 已过时,将在未来版本中删除,并且提示java.time not exist, LocaDateTime类找不到。

运行springboot时提示&#xff1a;源值 7 已过时&#xff0c;将在未来版本中删除&#xff0c;并且提示 java.time not exist, LocaDateTime类找不到。 解决方法&#xff1a; 方式一&#xff1a;通过IDEA修改这几个地方的JDK版本 1&#xff09;打开ProjectStructure->Proj…

多篇论文介绍-Wiou

论文地址 目录 https://arxiv.org/pdf/2301.10051.pdf 01 CIEFRNet&#xff1a;面向高速公路的抛洒物检测算法 02改进 YOLOv5 的 PDC 钻头复合片缺损识别 03 基于SimAM注意力机制的DCN-YOLOv5水下目标检测 04 基于改进YOLOv7-tiny 算法的输电线路螺栓缺销检测 05 基于改…

机器学习中的假设检验

正态性检验相关分析回归分析 所谓假设检验&#xff0c;其实就是根据原假设来构造一种已知分布的统计量来计算概率&#xff0c;根据概率值大小来判断能否拒绝原假设&#xff0c;从而得到一种结论。假设检验的过程就是&#xff0c;构造一个原假设成立条件下的事件A&#xff0c;计…

基于斑马算法的无人机航迹规划-附代码

基于斑马算法的无人机航迹规划 文章目录 基于斑马算法的无人机航迹规划1.斑马搜索算法2.无人机飞行环境建模3.无人机航迹规划建模4.实验结果4.1地图创建4.2 航迹规划 5.参考文献6.Matlab代码 摘要&#xff1a;本文主要介绍利用斑马算法来优化无人机航迹规划。 1.斑马搜索算法 …

内网可达网段探测netspy- Mac环境

netspy是一款快速探测内网可达网段工具 当我们进入内网后想要扩大战果&#xff0c;那我们可能首先想知道当前主机能通哪些内网段。 netspy正是一款应用而生的小工具&#xff0c;体积较小&#xff0c;速度极快&#xff0c;支持跨平台&#xff0c;支持多种协议探测&#xff0c;…

软件测试/校招推荐丨鼎捷软件股份有限公司岗位开放

点此获取更多相关资料 软件测试工程师 岗位职责 负责公司产品的日常测试工作&#xff1b;依据软件需求和非功能需求&#xff0c;编写测试方案和测试用例&#xff0c;设计测试脚本&#xff1b;负责服务器系统和软件的日常维护工作&#xff0c;为上线部署和运维活动提供技术支持…

HarmonyOS应用开发

引言 本章将深入探讨 HarmonyOS 应用开发的关键方面&#xff0c;包括应用的生命周期、数据存储和网络访问。了解这些内容对于创建功能丰富、高效的 HarmonyOS 应用至关重要。 目录 HarmonyOS 应用的生命周期HarmonyOS 应用的数据存储HarmonyOS 应用的网络访问总结 1. Harmo…

python 时间加法 输出t分钟后的时间

题目&#xff1a; 现在时间是a点b分&#xff0c;请问t分钟后&#xff0c;是几点几分&#xff1f; 输入&#xff1a; 第一行包含一个整数a 第二行包含一个整数b 第三行包含一个整数t 其中&#xff0c;0≤a≤23&#xff0c;0≤b≤59&#xff0c;0≤t&#xff0c;t分钟后还…

【Linux】进程的基本概念和进程控制

TOC 目录 一.冯诺依曼体系结构 二. 操作系统(Operator System) 概念 设计OS的目的 定位 总结 系统调用和库函数概念 进程 基本概念 描述进程-PCB task_struct-PCB的一种 task_ struct内容分类 组织进程 查看进程 通过系统调用获取进程标识符 进程状态 D--深度…

Android内存回收机制、GC算法及内存问题分析解决

Android内存回收机制、GC算法及内存问题分析解决 在Android开发中&#xff0c;Java内存回收和垃圾收集&#xff08;GC&#xff09;机制是确保应用程序高效运行的关键部分。针对不同对象存活率&#xff0c;Android平台采用了引用计数算法和可达性分析法来判定对象的可回收性&am…

【代码随想录】算法训练营 第二十天 第六章 二叉树 Part 6

654. 最大二叉树 题目 给定一个不重复的整数数组 nums 。 最大二叉树 可以用下面的算法从 nums 递归地构建: 创建一个根节点&#xff0c;其值为 nums 中的最大值。递归地在最大值 左边 的 子数组前缀上 构建左子树。递归地在最大值 右边 的 子数组后缀上 构建右子树。 返回…

IntelliJ IDEA 2023.2.1 (Ultimate Edition) 版本 Git 如何合并多次的本地提交进行 Push

本心、输入输出、结果 文章目录 IntelliJ IDEA 2023.2.1 (Ultimate Edition) 版本 Git 如何合并多次的本地提交进行 Push前言为什么需要把多次本地提交合并合并提交的 2 种形式:事中合并、事后合并事中合并事后合并:支持拆分为多组提交弘扬爱国精神IntelliJ IDEA 2023.2.1 (U…

Android Camera App启动流程解析

前言&#xff1a;做了7年的camera app开发&#xff0c;给自己一个总结&#xff0c;算是对camera的一次告白吧。Camera被大家誉为手机的眼睛&#xff0c;是现在各大手机厂商的卖点&#xff0c;也是各大厂商重点发力的地方。Camera的重要性我就不在这里赘述了&#xff0c;让我们进…

【跟小嘉学习JavaWeb开发】第一章 开发环境搭建

系列文章目录 【跟小嘉学习JavaWeb开发】第一章 开发环境搭建 文章目录 系列文章目录[TOC](文章目录) 前言一、JDK的下载与安装1.1、关于JDK的版本问题 二、环境变量配置2.1、配置 JAVA_HOME、CLASSPATH2.2、配置path2.3、启动 cmd 三、编写代码、编译并执行3.1、编写代码&…