【react】9.React函数组件和class组件有何区别

已于 2023-02-25 21:24:53 修改
阅读量77 收藏
点赞数
分类专栏： react 文章标签： react.js 前端 前端框架
于 2023-02-25 21:23:32 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45390249/article/details/129220731
版权
文章探讨了在React16.8+之后，函数组件引入hooks如何改变了状态管理方式，如useState替代了class组件的state操作。同时，对比了class组件中的this与函数组件无this的区别，并指出官方倾向于推荐使用更简洁、体积小的函数组件。
摘要由CSDN通过智能技术生成

1.class组件 生命周期 函数组件 无 16.8+有hook useEffect来使用
2.class state的定义、读取、修改方式不同：函数组件用hook的useState
3.this：class组件有，函数组件无
4.官方推荐函数组件 体积小

wangky57
关注
专栏目录
React的类组件和函数组件
读心悦
10-13 287
函数组件和类组件的第四个区别就是，关于组件的复用逻辑，类组件的复用逻辑，一般是通过高阶组件实现的【高阶组件就是组出入的组件进行加工，这个加工就是复用的逻辑】；函数组件一般是通过自定hooks，函数组件的复用逻辑就放在自定义的hooks里面，在然后在函数组件中引入自定义的hooks即可。二、useEffect()，函数组件执行副作用操作，函数组件是不能访问生命周期的，那么函数组件的副作用操作就放在useEffect里面来执行。React类组件是有自己的生命周期的，在不同的生命周期里执行不同的逻辑。
React 中的类和函数组件 选择哪一个?
m0_64460287的博客
12-09 1419
每个 React 组件作为 JavaScript 本身都支持允许将一些可重用的代码片段插入到更大的代码片段中的功能。因此，它是一种应用程序的构建块。以这种方式，React 组件将 UI 划分为可重用的部分并返回html。所以它们是 UI 的一种子功能综上所述，什么是 React 组件就很清楚了。它们是 JS 代码与返回 HTML 片段的独立混合。这里 JS 的主要目的是提供业务逻辑并允许创建正确的 HTML，以便可以将其插入dom在 ReactJS 中有两种创建组件的方式：类和函数式组件。
【React】函数式组件与类组件的不同
南栀的博客
03-28 1990
函数组件与类组件的区别
react-类组件和函数组件的区别
小小小的骆驼的前端技术博客
07-18 1673
类组件 class Book extends React.Component { constructor(props) { super(props) this.state = {} } render() { return <div>{this.props.name}</div> } } 函数组件 function Book(props) { return <div>{props.name}</div> } 区别 类组件内部拥有状态
React类组件和函数组件的区别
subsistent的博客
01-11 532
state的定义、读取、修改方式不同：函数组件用 hook 的 useState，类组件可以直接定义并且使用 this.setState 的方法修改数据。类组件：react 创建类组件的方式就是使用类的继承，ES6的语法支持使用 class 来定义一个类，并使用了 ES6 标准语法构建类组件。生命周期不同：类组件有；函数组件：使用 javascript 函数构建函数组件，且组件的首字母必须大写，必须返回 jsx 代码。ref使用不同：类组件可以获取子组件实例，函数式组件不可以，因为函数式组件没有实例。
React中类组件和函数组件的理解？有什么区别
比鲁斯大人的博客
05-17 823
函数组件，顾名思义，就是通过函数编写的形式去实现一个。如果想要访问父组件传递过来的参数，可通过。中定义组件最简单的方式函数第一个参数为。类的编写形式去编写组件，该类必须继承。类组件，顾名思义，也就是通过使用。用于接收父组件传递过来的参数。
react中函数组件和class组件的区别
Laollaoaolao的博客
08-09 910
走到handerClick，此时handerClick被重新创建，即handerClick指向了新的内存空间，值得注意的是：for循环接着往下走的时候，num所在的上下文并不是当前函数（新创建的函数），而是第一次初始化时创建的函数，而那个函数的上下文中，num永远都是0，所以console.log输出都是0。不论react对状态进行了什么处理,我们要知道的是,class组件是有状态的,他的状态会在组件生命周期中一直保存。的,每一次更新数据都会重新调用函数,生成新的函数执行上下文。...
react-react面试题之对类组件和函数组件的理解.zip
03-20
在React的世界里，类组件和函数组件是两种主要的组件形式，它们各自有着独特的特性和用途，对于理解和掌握React开发至关重要。本篇文章将深入探讨这两种组件的区别、应用场景以及它们之间的联系。 首先，让我们来...
React 类组件和函数组件
baidulixueqin的博客
04-19 5069
React 类组件和函数组件 目录 1.类组件和函数组件 2.如何使用 props 和 state 3.如何绑定事件 4.复习 this+ 两个面试题 组件component 一.概念 Element VS Component (元素与组件) //不成文的约定:元素小写，组件大写 const div=React.createElement('div',...) 这是一个React元素(小写) const Div=()=>React.createElement('div',...) 这是一个Rea
React函数组件
baidulixueqin的博客
04-22 2652
函数组件 内容 1.创建方式 2.函数组件没有state怎么办 3.函数组件没有生命周期怎么办 4.自定义hook函数 函数组件的创建方式 两种形式 1' 声明一个变量等于箭头函数 const Hello = (props) => { return <div>{props.message}</div> } //箭头函数可以缩写 const Hello = props => <div>{props.message}</div> 2' 使用
React中 类组件 与 函数组件 的区别
最新发布
fighting ~的博客
03-23 2276
默认情况下，自定义组件不会暴露它们内部 DOM 节点的 ref。像这样将自定义子组件包装在。
react 函数组件和class组件的区别
川上饺子的博客
09-14 4402
一、组件的定义 1.class组件：继承React.Component，且需要创建render方法来返回元素。 classWelcomeextendsReact.Component{ render(){ return<h1>Hello,{this.props.name}</h1>; } } //2.函数组件 functionWelcome(props){ return<h1>Hello,{props.na...
React 函数组件与class组件的区别
汉堡请不要欺负面条
06-15 1364
函数组件看似只是一个返回React元素的函数，其实体现的是无状态组件（Stateless Components）的思想。函数组件中没有this，没有state，也没有生命周期，这就决定了函数组件都是展示性组件，接收props，渲染DOM，而不关注其他逻辑。 因为函数组件不需要考虑组件状态和组件生命周期方法中的各种比较校验，所以有很大的性能提升空间。...
React函数组件和类组件的区别
热门推荐
前端精髓
06-08 2万+
定义组件有两个要求： 组件名称必须以大写字母开头 组件的返回值只能有一个根元素 函数组件 function Welcome (props) { return <h1>Welcome {props.name}</h1> } ReactDOM.render(<Welcome name='react' />, document.getElementById(...
React中函数组件和类组件的区别
aa_mmnn的博客
03-08 519
定义组件有两个要求： 组件名称必须以大写字母开头 组件的返回值只能有一个根元素 函数组件： function Welcome (props) { return <h1>Welcome {props.name}</h1> } ReactDOM.render(<Welcome name='react' />, document.getElementById('root')); 函数组件接收一个单一的props对象并返回了一个React元素 类组...
react函数式组件和类式组件的区别
weixin_47808575的博客
05-12 502
函数式组件：没有this,使用一系列的内置hooks实现对应的功能，比如使用useState创建状态变量，使用useEffect实现类似于componmentDidMount、shouldComponentUpdate等生命周期钩子函数的功能。类式组件：使用state对象定义状态变量，有诸如componmentDidMount、shouldComponentUpdate等生命周期钩子函数；定义的函数，函数式组件 和 普通函数 最主要的区别在。(2) react 发现组件是函数定义的，接着。
React组件定义：函数式、React.createClass与ES6扩展
"React创建组件的三种方式包括无状态函数式组件、React.createClass定义的组件以及ES6形式的extends React.Component定义的组件。这三种方式各自有其特点和适用场景，下面将详细介绍它们的差异。 无状态函数式组件...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值