失效链接处理 |
面试题React?PDF 下蝲
相关截图Q?/strong>
![]()
主要内容Q?/strong>
2.描述React中的函数lg和类lg之间的区?/span>
React中的函数lg和类lg之间存在显著的区别,以下是对q些区别的详l描qͼ
1. 语法与设计思想Q?/span>
函数lgQ采函数式~程思想Q纯JavaScript函数定义。函数组件接收⼀个输h参?/span>
props Qƈq回h个React元素或⼀lReact元素作ؓ输出?/span>
cȝӞ采Tq向对象~程思想QES6c语法定义。类lg必须扩展
React.Component c,q实?nbsp;render() 法Q该法q回h个React元素?/span>
2. 状态与命周期Q?/span>
函数lgQ没有⾃h的内部状态(stateQ,但在React 16.8版本之后引⼊的HooksQ如
useState Q允许函数组件添加状态。函数组件HooksQ如 useEffect Q来实现cȝ
件中的某些Ω命周期⽅法功能?/span>
cȝӞ低T state 对象定义状态变量,q拥有⼀pd命周期法Q如
componentDidMount ?nbsp;shouldComponentUpdate {?/span>
3. 复T性:
函数lgQ⾃定义Hooks实现逻辑复T?/span>
cȝӞ除了低Tq定义Hooks外,q可以⾼阶组ӞHOCQ和render props{⽅式实?/span>
逻辑复T?/span>
4. 优缺点:
函数lgQ?/span>
优点Q代码量更少Q更z,可读性更强;更易于拆分组件和试?/span>
~点Q在业务逻辑复杂、状态依赖关p错q情况下,低THooksQ如 useEffect ?/span>
useMemo Q可能会增加h智负担Q不具备处理错误边界{业务情늚内置Hooks?/span>
cȝӞ
优点Q功能完备,h处理边界错误的钩h函敎ͼ?nbsp;componentDidCatch ?/span>
getDerivedStateFromError Q?/span>
~点Q在复T性上Q⾼阶组件等可能会带来诸如嵌套地狱、重名props被覆盖、难以拆分和
试{问题?/span>
|