React - 面试题

本文详细比较了React中的函数式组件和类组件在语法、状态管理、性能和代码复用方面的差异,并介绍了高阶函数和useLayoutEffect在React中的运用。强调了Hooks对函数式组件的提升,尽管类组件在某些场景仍有其存在价值。
摘要由CSDN通过智能技术生成

1. React函数式组件和类组件的区别

React 中有两种主要的组件类型:函数式组件和类组件。它们之间的区别主要体现在以下几个方面:

语法:
函数式组件:函数式组件是一个简单的 JavaScript 函数,接收 props 作为参数并返回 React 元素。
类组件:类组件是一个 ES6 类,继承自 React.Component,包含 render 方法并返回 React 元素。
状态管理:
函数式组件:以前,函数式组件是无状态的,无法使用状态(state)或生命周期方法。但是自 React 16.8 版本引入了 Hooks,函数式组件可以使用 useState 等 Hook 来管理状态。
类组件:类组件可以使用 this.state 和 this.setState() 来管理组件的状态,并且可以使用生命周期方法来处理组件的生命周期事件。
性能:
函数式组件:由于函数式组件本质上就是一个函数,渲染开销较小,性能相对较好。
类组件:类组件在实例化和渲染过程中会涉及更多的操作(执行各种生命周期函数),性能相对较低。
代码复用:
函数式组件:函数式组件更容易实现逻辑的复用,可以使用自定义 Hook 来提取和重用组件逻辑。
类组件:类组件可以使用继承和组合来实现代码复用,但相对来说比较繁琐。

总的来说,随着 React Hooks 的引入,函数式组件在很多方面已经可以替代类组件,并且具有更好的性能和代码复用性。但在一些特定场景下,仍然会选择使用类组件,比如需要使用生命周期方法或者已有的类组件代码库。

2. 什么是高阶函数/组件?有用过什么高阶函数/组件吗?

高阶函数/组件是指接受一个或多个函数作为参数,并返回一个新函数的函数。常见的高阶函数包括 map、filter、reduce 等。在 React 中,高阶组件是一个函数,接受一个组件作为参数并返回一个新的增强过的组件。

3. react uselayout有用过吗?

React 中的 useLayoutEffect 是一个 Hook,用于在 DOM 更新之后同步触发布局和绘制。它类似于 useEffect,但会在浏览器执行绘制之前同步触发。

4. useState为什么是返回数组,而不是对象呢

useState 返回一个数组,而不是对象,是为了方便进行数组解构赋值。数组的第一个元素是状态值,第二个元素是更新状态的函数。

5. react父怎么调用子的组件呢?

在 React 中,父组件可以通过 props 向子组件传递数据和方法,从而实现父组件调用子组件。子组件可以通过 props 接收父组件传递的数据和方法,并进行相应的操作。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值