React的Props、生命周期

news2024/11/24 11:32:51

Props 的只读性

“Props” 是 React 中用于传递数据给组件的一种机制,通常作为组件的参数进行传递。在 React 中,props 是只读的,意味着一旦将数据传递给组件的 props,组件就不能直接修改这些 props 的值。所以组件无论是使用函数声明还是通过 class 声明,都决不能修改自身的 props。

所以React有一个严格的规则:所有 React 组件都必须像纯函数一样保护它们的 props 不被更改

为什么Props是只读的呢?

当我们在父组件中将数据传递给子组件时,子组件只能使用这些 props 来读取数据,而不能修改它们。这是为了确保数据的单向流动,使得数据的流动更加可控和可预测。当 Props 是只读的时候,我们可以确保数据只能从父组件流向子组件,而子组件不能直接修改父组件传递的数据。这种单向数据流有助于维护组件的可预测性和代码的可维护性。

如果我无法避免要在组件内部修改数据,该怎么办?

如果你需要在组件内部修改数据,你可以使用组件的状态(state)。状态是组件内部的可变数据,可以通过特定的方法来修改。但是这些状态无法直接传递给其他组件,如果需要在多个组件之间共享数据,可以考虑使用上层组件的状态或者全局状态管理工具(如 Redux)

代码示例:

import React, { useState } from 'react';

function ParentComponent() {
  const [count, setCount] = useState(0);

  const incrementCount = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <h2>父组件</h2>
      <p>Count: {count}</p>
      <ChildComponent count={count} increment={incrementCount} />
    </div>
  );
}

function ChildComponent(props) {
  return (
    <div>
      <h2>子组件t</h2>
      <p>总和: {props.count}</p>
      <button onClick={props.increment}>+1</button>
    </div>
  );
}

export default ParentComponent;

如何将函数组件转换成 class 组件

  1. 创建一个同名的 ES6 class,并且继承于 React.Component
  2. 添加一个空的 render() 方法。
  3. 将函数体移动到 render() 方法之中。
  4. render() 方法中使用 this.props 替换 props
  5. 删除剩余的空函数声明。

函数式组件

function tick(Props) {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {Props.time.toLocaleTimeString()}.</h2>
    </div>
  );
  root.render(element);
  }

class组件

    class Clock extends React.Component {
      render() {
        return (
          <div>
            <h1>Hello, world!</h1>
            <h2>It is {this.props.date.toLocaleTimeString()}.</h2>
          </div>
        );
      }
    }

生命周期

挂载

  • constructor--------组件实例化时执行,用于初始化state和绑定事件等操作

  • getDerivedStateFromProps --------在render方法执行之前调用,用于根据props设置state。

  • render--------渲染组件

  • componentDidMount(-------组件挂载到DOM后执行,用于执行一些需要DOM的操作,如获取数据。

更新

  • getDerivedStateFromProps-------在render方法执行之前调用,用于根据props设置state
  • shouldComponentUpdate------判断组件是否需要重新渲染,默认返回true
  • render------渲染组件
  • getSnapshotBeforeUpdate------在更新前获取DOM信息,如滚动位置等。
  • componentDidUpdate--------组件更新后执行,用于执行一些需要DOM的操作,如更新数据

卸载

  • componentWillUnmount------组件从DOM中移除时经历的阶段

image.png

写一个时钟案例,每秒都会更新时间

    class Clock extends React.Component {
      constructor(props) {
        super(props);
        this.state = {date: new Date()};
      }

      componentDidMount() {
        this.timerID = setInterval(
          () => this.tick(),
          1000
        );
      }

      componentWillUnmount() {
        clearInterval(this.timerID);
      }

      tick() {
        this.setState({
          date: new Date()
        });
      }

      render() {
        return (
          <div>
            <h1>Hello, world!</h1>
            <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
          </div>
        );
      }
    }

    const root = ReactDOM.createRoot(document.getElementById('root'));
    root.render(<Clock />);

让我们来快速概括一下发生了什么和这些方法的调用顺序:

  1. <Clock /> 被传给 root.render()的时候,React 会调用 Clock 组件的构造函数。因为 Clock 需要显示当前的时间,所以它会用一个包含当前时间的对象来初始化 this.state。我们会在之后更新 state。
  2. 之后 React 会调用组件的render()方法。这就是 React 确定该在页面上展示什么的方式。然后 React 更新 DOM 来匹配 Clock 渲染的输出。
  3. Clock的输出被插入到 DOM 中后,React 就会调用 ComponentDidMount() 生命周期方法。在这个方法中,Clock 组件向浏览器请求设置一个计时器来每秒调用一次组件的tick()方法。
  4. 浏览器每秒都会调用一次tick()方法。 在这方法之中,Clock 组件会通过调用 setState() 来计划进行一次 UI 更新。得益于 setState() 的调用,React 能够知道 state 已经改变了,然后会重新调用 render() 方法来确定页面上该显示什么。这一次,render() 方法中的 this.state.date 就不一样了,如此一来就会渲染输出更新过的时间。React 也会相应的更新 DOM。
  5. 一旦 Clock 组件从 DOM 中被移除,React 就会调用 componentWillUnmount() 生命周期方法,这样计时器就停止了。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Studying-代码随想录训练营day22| 回溯理论基础、77.组合、216.组合总和II、17.电话号码的字母组合

第22天&#xff0c;回溯章节开始&#xff01;一大算法难点&#xff0c;加油加油&#xff01; 回溯理论基础组合问题的剪枝操作 文档讲解&#xff1a;代码随想录回溯理论基础 视频讲解&#xff1a;回溯理论基础 回溯法也叫回溯搜索法&#xff0c;它是一种搜索&#xff0c;遍历的…

数值稳定性、模型初始化和激活函数

一、数值稳定性&#xff1a;神经网络很深的时候数据非常容易不稳定 1、神经网络梯度 h^(t-1)是t-1层的输出&#xff0c;也就是t层的输入&#xff0c;y是需要优化的目标函数&#xff0c;向量关于向量的倒数是一个矩阵。 2、问题&#xff1a;梯度爆炸、梯度消失 &#xff08;1&…

leetcode-19-回溯

引自代码随想录 [77]组合 给定两个整数 n 和 k&#xff0c;返回 1 ... n 中所有可能的 k 个数的组合。 示例: 输入: n 4, k 2 输出: [ [2,4], [3,4], [2,3], [1,2], [1,3], [1,4]] 1、大致逻辑 k为树的深度&#xff0c;到叶子节点的路径即为一个结果 开始索引保证不重复…

当了面试官才知道:做好这3点,面试成功率至少提高50%

关于辉哥&#xff1a; 资深IT从业者&#xff0c; 曾就职于阿里、腾讯、美团、中信科等互联网公司和央企&#xff1b; 两岁小男孩的父亲。 不定期分享职场 | 婚姻 | 育儿 | 个人成长心得体会 关注我&#xff0c;一起学习和成长。 最近作为公司社招面…

一文入门CMake

我们前几篇文章已经入门了gcc和Makefile&#xff0c;现在可以来玩玩CMake了。 CMake和Makefile是差不多的&#xff0c;基本上是可以相互替换使用的。CMAke可以生成Makefile&#xff0c;所以本质上我们还是用的Makefile&#xff0c;只不过用了CMake就不用再写Makefile了&#x…

Zookeeper 四、Zookeeper应用场景

Zookeeper是一个典型的发布/订阅模式的分布式数据管理与协调框架&#xff0c;我们可以使用它来进行分布式数据的发布与订阅。另一方面&#xff0c;通过对Zookeeper中丰富的数据节点类型进行交叉使用&#xff0c;配合Watcher事件通知机制&#xff0c;可以非常方便地构建一系列分…

Day.js

Day.js 是什么&#xff1f; Day.js是一个极简的JavaScript库&#xff0c;可以为现代浏览器解析、验证、操作和显示日期和时间。 Day.js中文网 为什么要使用Day.js &#xff1f; 因为Day.js文件只有2KB左右&#xff0c;下载、解析和执行的JavaScript更少&#xff0c;为代码留下更…

如何避免爬取网站时IP被封?

互联网协议 (IP) 地址是识别网络抓取工具的最常见方式。IP 是每个互联网交换的核心&#xff0c;对其进行跟踪和分析可以了解很多有关连接客户端的信息。 在网络抓取中&#xff0c;IP 跟踪和分析&#xff08;又名指纹&#xff09;通常用于限制和阻止网络抓取程序或其他不需要的访…

配电房挂轨巡检机器人

配电房作为电网中的重要组成部分。其运行的的安全和稳定性直接影响到电力供应的质量。然而&#xff0c;传统的人工巡检模式存在诸多弊端&#xff0c;例如巡检效率低下、人员安全难以保障、巡检结果主观性强等问题。为了解决这些问题&#xff0c;旗晟机器人推出B3系列升降云台轨…

浅谈LiveData的通知过程

浅谈 LiveData 的通知机制 LiveData 和 ViewModel 一起是 Google 官方的 MVVM 架构的一个组成部分。巧了&#xff0c;昨天分析了一个问题是 ViewModel 的生命周期导致的。今天又遇到了一个问题是 LiveData 通知导致的。而 ViewModel 的生命周期和 LiveData 的通知机制是它们的…

AI绘图软件:设计师的创意加速器

在人工智能的浪潮中&#xff0c;AI绘图软件工具已成为设计师和创意工作者的得力助手&#xff0c;它们不仅加速了复杂绘图任务的完成&#xff0c;还激发了无限创意。本文将为您介绍几款AI绘图软件工具&#xff0c;它如何成为提升工作效率和创意灵感的关键。 1. StartAI&#xf…

ISO37001认证:防范贿赂风险的强大工具

随着全球反贿赂法规的日益严格&#xff0c;各类组织面临的贿赂风险和合规压力不断增加。ISO37001反贿赂管理体系认证应运而生&#xff0c;为组织提供了一个系统化的管理框架&#xff0c;帮助其有效发现、预防和管控贿赂风险。本文将详细探讨ISO37001认证的作用和意义&#xff0…

小白学python(第三天)

小伙伴&#xff0c;大家好呀&#xff0c;昨天的内容吸收的好&#xff1f;昨天有小伙伴私信我&#xff0c;建议我在博文中加点练习题&#xff0c;可以看出这位童鞋很想学好这门语言哈&#xff0c;那我也尽量满足大家的要求。 从控制台输入 语法格式&#xff1a; 变量名 input…

神经网络学习笔记9-简单的反向传播和线性回归

tensor在pytorch中是一个非常重要的类型 假如需要计算梯度&#xff0c;就将tensor中 requires_grad设为true loss是一个张量&#xff0c;在做运算时构建运算图&#xff0c;因此不要直接进行&#xff0c;会将将梯度存入w&#xff0c;当反向传播完成 后&#xff0c;该计算图会…

C# 23设计模式备忘

创建型模式&#xff1a;单例&#xff08;Singleton&#xff09;模式&#xff1a;某个类只能生成一个实例&#xff0c;该类提供了一个全局访问点供外部获取该实例&#xff0c;其拓展是有限多例模式。 原型&#xff08;Prototype&#xff09;模式&#xff1a;将一个对象作为原型&…

地铁中的CAN通信--地铁高效安全运转原理

目前地铁采用了自动化的技术来实现控制,有ATC(列车自动控制)系统可以实现列车自动驾驶、自动跟踪、自动调度;SCADA(供电系统管理自动化)系统可以实现主变电所、牵引变电所、降压变电所设备系统的遥控、遥信、遥测;BAS(环境监控系统)和FAS(火灾报警系统)可以实现车站…

IDEA版本推荐

推荐版本&#xff1a; IDEA 2024.1.4 下载链接&#xff1a;IDEA下载 &#xff08;下载时可以往下拖&#xff0c;选到自己想要的版本哦&#xff09; 本人由于项目开发需要&#xff0c;陆续用过几个版本的IDEA&#xff0c;包括&#xff1a; IDEA 2020.2.4 。这是在看韩顺平老师…

六西格玛绿带可以跳过,直接学六西格玛黑带吗?真实情况告诉你

在现代企业管理中&#xff0c;六西格玛&#xff08;Six Sigma&#xff09;已经成为提升质量和效率的重要工具。对于很多企业而言&#xff0c;培养内部的六西格玛专家&#xff0c;特别是黑带&#xff08;Black Belt&#xff09;&#xff0c;是推动持续改进的关键。然而&#xff…

十常侍乱政 | 第2集 | 愿领精兵五千,斩关入内,册立新君,诛杀宦党,扫清朝廷,以安天下 | 三国演义 | 逐鹿群雄

&#x1f64b;大家好&#xff01;我是毛毛张! &#x1f308;个人首页&#xff1a; 神马都会亿点点的毛毛张 &#x1f4cc;这篇博客是毛毛张分享三国演义文学剧本中的经典台词和语句&#xff0c;本篇分享的是《三国演义》第Ⅰ部分《群雄逐鹿》的第2️⃣集《十常侍乱政治》&am…

代码随想录算法训练营第三十六天|62.不同路径、 63. 不同路径 II、343.整数拆分(可跳过)、96.不同的二叉搜索树(可跳过)

62.不同路径 题目链接&#xff1a;62.不同路径 文档讲解&#xff1a;代码随想录 状态&#xff1a;还行 思路&#xff1a;当前状态的只有可能是从上面或者左边过来的&#xff0c;所以 dp[i][j] dp[i-1] dp[j-1] 题解&#xff1a; public int uniquePaths(int m, int n) {if (…