React系列:函数式组件

本文详细探讨了React函数式组件中的Hook,包括State Hook和Effect Hook的使用,阐述了无需清除和需要清除的effect场景。文章还讨论了函数式组件与类组件的优缺点,指出在大多数情况下,函数式组件因性能优势应作为首选。同时,提供了前端资源包的领取信息。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

React函数式组件

  • 函数式
function App(props) {  return <h1>Hello, {props.name}</h1>
} 
  • 特性
特性类组件(class)函数组件(function)
state√ (通过State Hook)
生命周期√ (通过Effect Hook)
## HOOK

HOOK是什么?

​ Hook 是一个特殊的函数,它可以让你钩入React 的特性。例如,useState 是允许你在 React 函数组件中添加 state 的 Hook。

State Hook

​ state相关

例子
import React, { useState } from 'react';

function App() {// 声明一个叫 "count" 的 state 变量const [count, setCount] = useState(0);return (<div><p>You clicked {count} times</p><button onClick={() => setCount(count + 1)}>Click me</button></div>);
} 
API
API作用写法说明
useState在函数调用时保存变量的方式,与 class 里面的 this.state 提供的功能完全相同const [eg, setEg] = useState(0);eg:state;setEg:修改对应state;useState(0):设置初始值为0

Effect Hook

​ 可以把 useEffect Hook 看做 componentDidMountcomponentDidUpdatecomponentWillUnmount 这三个函数的组合。

无需清除的 effect

​ **在 React 更新 DOM 之后运行一些额外的代码。**比如发送网络请求,手动变更 DOM,记录日志,这些都是常见的无需清除的操作。

import React, { useState, useEffect } from 'react';

function Example() {const [count, setCount] = useState(0);// 类似 componentDidMount | componentDidUpdate useEffect(() => {// 更新DOMdocument.title = `You clicked ${count} times`;});return (<div><p>You clicked {count} times</p><button onClick={() => setCount(count + 1)}>Click me</button></div>);
}
复制代码 

​ 通过使用这个 Hook,React 会保存你传递的函数(我们将它称之为 “effect”),并且在执行 DOM 更新之后调用它。 将 useEffect 放在组件内部可以在 effect 中直接访问 state 变量。

需要清除的 effect

​ 例如订阅外部数据源

hook

import React, { useState, useEffect } from 'react';

function FriendStatus(props) {const [isOnline, setIsOnline] = useState(null);useEffect(() => {function handleStatusChange(status) {setIsOnline(status.isOnline);}ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);// Specify how to clean up after this effect:return function cleanup() {ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);};});if (isOnline === null) {return 'Loading...';}return isOnline ? 'Online' : 'Offline';
} 

​ React 将按照 effect 声明的顺序依次调用组件中的_每一个_ effect。

为什么要在 effect 中返回一个函数? 这是 effect 可选的清除机制。每个 effect 都可以返回一个清除函数

通过跳过 Effect 进行性能优化(useEffect的第二个参数)
useEffect(() => {document.title = `You clicked ${count} times`;
}, [count]); // 仅在 count 更改时更新
复制代码 

优缺点

  • 一般来说,类组件的性能消耗较函数式组件大,包括生成实例时使用的内存及shouldComponentUpdate不正确引起的不必要的更新。> 如果类组件没有指明shouldComponentUpdate生命周期函数,组件的父组件更新时不管组件的props是否改变了组件一定更新> > 如果组件是PureComponent的实例的话,对组件实例的先前props/state和后来props/state作浅比较(很高效),再决定是否更新组件> > tips:props中的obj对象内容发生变化是无法被react通过浅层对比(default)察觉的!* 类组件不能很好的压缩* 实际开发中,类组件的生命周期常常包含一些不相关的逻辑memo

React.memo为高阶组件,React.memo 仅检查 props 变更,并通过记忆组件渲染结果的方式来提高组件的性能。类似PureComponent

​ 不同的是memo是生成函数组件浅比较的是Props,PureComponent用来生成class组件,比较Propsstate

​ 默认情况下其只会对复杂对象做浅层对比,如果你想要控制对比过程,那么请将自定义的比较函数通过第二个参数传入来实现。

function MyComponent(props) {/* 使用 props 渲染 */
}
function areEqual(prevProps, nextProps) {/*如果把 nextProps 传入 render 方法的返回结果与将 prevProps 传入 render 方法的返回结果一致则返回 true,否则返回 false*/
}
export default React.memo(MyComponent, areEqual);
复制代码 

总结

​ 基于优缺点中的内容,由于Hooks的使用,不具备state和生命周期已经不再是函数式组件的缺陷,所以他们由于内存使用以及更新渲染上的优势,更应该被使用。所以,一般情况下函数式组件是较好的选择,非要使用类组件的时候,也应该使用PureComponent。

最后

为大家准备了一个前端资料包。包含54本,2.57G的前端相关电子书,《前端面试宝典(附答案和解析)》,难点、重点知识视频教程(全套)。



有需要的小伙伴,可以点击下方卡片领取,无偿分享

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值