React中函数式组件与类组件有何不同?

这篇具有很好参考价值的文章主要介绍了React中函数式组件与类组件有何不同?。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

 Function Component 与 Class Component 有何不同 

目录

 Function Component 与 Class Component 有何不同 

文章核心观点:

解释一下:

总结:

文章核心观点:

  1. Function components capture the rendered values.函数式组件捕获的是已经被render的值

解释一下:

请看代码:

Class component

class ProfilePage extends React.Component {
  showMessage = () => {
    alert('Followed ' + this.props.user);
  };

  handleClick = () => {
    setTimeout(this.showMessage, 3000);
  };

  render() {
    return <button onClick={this.handleClick}>Follow</button>;
  }
}

Function Component

function ProfilePage(props) {
  const showMessage = () => {
    alert('Followed ' + props.user);
  };

  const handleClick = () => {
    setTimeout(showMessage, 3000);
  };

  return (
    <button onClick={handleClick}>Follow</button>
  );
}

pjqnl16lm7 - CodeSandbox效果:

React中函数式组件与类组件有何不同?,我在学react,前端,javascript,开发语言

LiveDemo

这里有bug:

点击在Sophie的profile的时候,follow这个人,然后在三秒之内快速切换到另一个页面(dan)。Function弹出框的效果是follow sophie,class 弹出框 follow dan。

所以说,function 是我们想要的效果,但是class 不是我们想要的效果。

为什么会出现这种情况呢?

Class Component:

在Class Component中,this.props是通过类的实例来访问的,它指向组件的props。当setTimeout中的this.showMessage函数被调用时,它仍然引用了Class Component的实例,因此它可以访问最新的this.props,这是为什么你看到Class Component中的this.props.user是最新的值的原因。

Function Component:

在Function Component中,props是通过函数的参数传递的。当setTimeout中的showMessage函数被调用时,它只是一个普通的JavaScript函数,没有与Function Component的实例关联,因此它只能访问在函数定义时传递给它的props,而不是最新的props值。

 React 文档中描述的 props 不是不可变(Immutable) 数据吗?什么是不可变数据?

React 中的 props 通常被描述为不可变(immutable)数据,这意味着一旦 props 被传递给组件,它们不应该在组件内部被直接修改。这种不可变性有助于确保组件的可预测性和稳定性,因为它防止了组件在不知情的情况下更改外部传递的数据。

然而,有一点需要注意:props 对象本身是不可变的,但传递给 props 的值可能是可变的。如果你将一个可变对象(例如一个数组或对象)作为 props 传递给组件,那么这个对象的内容可以在组件内部被修改。这并不违反 React 的不可变性原则,因为 React 控制的是 props 对象的不可变性,而不控制传递给 props 的值的不可变性。

function ParentComponent() {
  const mutableArray = [1, 2, 3];

  return <ChildComponent items={mutableArray} />;
}

在这种情况下,mutableArray 是一个可变的数组。如果在 ChildComponent 内部修改了 items 数组,它将影响到原始数组。这并不是 React 的 props 不可变性引起的问题,而是因为 JavaScript 中的对象和数组是引用类型。如果你希望在 ChildComponent 中不修改原始数组,可以在内部创建副本来操作数据,以保持原始数据的不可变性。

总之,React 中的 props 本身是不可变的,但你需要注意传递给 props 的值的可变性,特别是当传递引用类型的值时。在组件内部,始终确保遵循不可变性原则,以避免意外的副作用。

有没有办法解决这个问题?

class ProfilePage extends React.Component {
  render() {
    // Capture the props!
    const props = this.props;

    // Note: we are *inside render*.
    // These aren't class methods.
    const showMessage = () => {
      alert('Followed ' + props.user);
    };

    const handleClick = () => {
      setTimeout(showMessage, 3000);
    };

    return <button onClick={handleClick}>Follow</button>;
  }
}

通过在 render 方法内部创建一个局部变量 props 并将其设置为 this.props 的值,你捕获了初始渲染时的 props 值。这意味着 props 变量将包含初始渲染时传递给组件的值,不受后续渲染的影响。

这种方法有时被用来解决在闭包函数(如 showMessage 和 handleClick 中的函数)中访问最新 props 值的需求。由于在函数内部,props 变量是一个常数(const),所以它将保持对初始 props 值的引用,不会随后的渲染而改变。

那么我想在Function Component中,如何获取到最新的数据?

使用React的useEffect钩子,以依赖props的变化来执行相应的操作。这样,当props更新时,useEffect内的代码会重新运行,确保你获取到最新的props值。

import { useEffect } from 'react';

function ProfilePage(props) {
  useEffect(() => {
    // 依赖props的变化,当props更新时,这里的代码会重新运行
    console.log(props);
  }, [props]);
}

那么在异步的时候,为什么有捕获到初始值的情况?

Function Components是纯函数,它们的行为在某种程度上类似于闭包。当函数组件被创建时,它会捕获当前的作用域(包括props和其他变量)。这意味着在函数组件内部,函数参数(包括props)的值在组件的整个生命周期内保持不变,即使父组件在此期间重新渲染了。

function MyComponent(props) {
  const someValue = props.someProp;

  setTimeout(() => {
    console.log(someValue); // 这里的someValue是在组件初始渲染时捕获的值
  }, 3000);
}

在这个示例中,someValue 变量在组件初始渲染时捕获了 props.someProp 的值,即使在异步操作中访问 someValue,它仍然保持不变,因为它是在函数作用域内被捕获的。

这就是为什么在Function Component中,在异步操作中可能会访问到初始的props值的原因。如果你希望在异步操作中访问最新的props值,你可以使用React的useEffect Hook来处理副作用,以依赖props的变化来执行相应的操作。这样,当props更新时,useEffect内的代码会重新运行,确保你获取到最新的props值。

总结:

1.class component 使用this 指向可以获取到实例中最新的props值。function component 是个纯函数,相当于闭包,捕获的值就是当前作用域的值。

2.如果function component想获取到最新的值,可以使用hooks,如useEffect,来处理副作用,并在props变化时执行相应的操作,以确保获取到最新的props值。

3.React 中props的不可变性,指的是不要在组件中对它进行修改。所以使用function component纯函数更好,结果值只与参数有关,不会对外部产生副作用。

函数式组件与类组件有何不同? — Overreacted

精读《Function VS Class 组件》 - 掘金 (juejin.cn)文章来源地址https://www.toymoban.com/news/detail-700790.html

到了这里,关于React中函数式组件与类组件有何不同?的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • React中的组件的渲染函数(Render Function)是什么?什么是React中的函数组件和类组件?如何在React中进行状态管理?

    React中的组件可以有多种形式的渲染函数,包括传统的render()方法,以及近年来兴起的函数组件和Hooks中的useState()和useEffect()。在这篇文章中,我将详细介绍渲染函数,以及如何在React中使用它们。 渲染函数(Render Function)是指组件在生命周期中的一个特殊方法,它的作用是根据

    2024年02月13日
    浏览(41)
  • React----函数组件和类组件

    React 是一个用于构建用户界面的流行 JavaScript 库,其中组件是构建块的基本单元。在 React 中,有两种主要的组件风格:函数组件和类组件。本文将使用TypeScript介绍它们的用法、区别以及如何选择使用哪一种。 函数组件是一种简单的 React 组件定义方式,它是一个 TypeScript 函数

    2024年02月02日
    浏览(37)
  • 前端react入门day03-react获取dom与组件通信

    (创作不易,感谢有你,你的支持,就是我前行的最大动力,如果看完对你有帮助,请留下您的足迹) 目录 受控表单绑定  React中获取DOM 组件通信 父传子  父传子-基础实现 父传子-props说明 父传子 - 特殊的prop children 子传父  使用状态提升实现兄弟组件通信 使用Context机制跨

    2024年02月01日
    浏览(55)
  • 前端react入门day02-React中的事件绑定与组件

    (创作不易,感谢有你,你的支持,就是我前行的最大动力,如果看完对你有帮助,请留下您的足迹) 目录 React中的事件绑定 React 基础事件绑定 使用事件对象参数  传递自定义参数  同时传递事件对象和自定义参数  React中的组件  组件是什么 React组件 useState  修改状态的规

    2024年02月06日
    浏览(86)
  • React函数式组件

            我们可以通过所定义的函数来进行react中组件的定义。首先我们可以定义一个函数,然后通过函数的返回值来进行相关组件的定义。例如下面这张写法,我们可以通过调用一个函数,通过其返回值来进行相关的操作。         我们可以通过render来将我们定义的函数式

    2024年02月11日
    浏览(43)
  • react函数组件

    一、函数组件 1、函数组件的创建 函数组件:使用JS的函数(或箭头函数)创建的组件称为函数组件,函数组件有如下约定 函数名称必须以大写字母开头 函数组件必须有返回值,返回JSX表达式 渲染函数组件:用函数名作为组件标签名 组件名称可以是单标签也可以是双标签

    2024年02月05日
    浏览(39)
  • React中的类组件和函数组件(详解)

           React 的核心思想就是组件化,相对于 Vue 来说, React 的组件化更加灵活和多样。主要可以分为两大类: 函数组件 , 类组件, 这两大类组件的名称 必须是大写字母开头      函数组件通常是 function 进行定义的函数,这个函数会返回和类组件中 render 函数返回一样

    2024年02月09日
    浏览(41)
  • React---函数组件的常用hook

    2024年01月19日
    浏览(40)
  • 前端开发笔记 | React Hooks子组件和父组件交互

    前端开发框架目前比较常用的就是react、vue等,其中使用React Hooks 带来了不少的好处,今天来聊聊React Hooks开发方式下,子组件和父组件的交互。 子组件定义 父组件调用子组件 父组件定义 子组件中刷新父组件按钮文案 实际效果:点击子组件中“改变父组件按钮”,父组件中

    2024年02月11日
    浏览(83)
  • 02react 函数组件useState的异步问题

    常见的钩子函数:useState、useEffect useState作为最常见的一个hook,在使用中总是会出现各种坑,最明显的就是 useState 更新异步的问题。 问题描述:把接口返回的数据,使用 useState 储存起来,但是当后面去改变这个数据的时候,每次拿到的都是上次的数据,无法实时更新。或者

    2024年02月03日
    浏览(48)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包