React函数组件与类的区别有哪些具体表现？

本文共计2664个文字，预计阅读时间需要11分钟。

目录

一、函数式组件捕获了渲染所需的值

二、闭包使类组件成为拥有特定props和state的渲染单元

三、区分useState与useRef的使用

首先，我们要知道的是，项目性能主要取决于代码的作用。

目录

• 一、函数式组件捕获了渲染所用的值
• 二、闭包让类组件成为拥有特定props和state的渲染
• 三、区分useState与useRef的使用

首先我们要知道的是，项目性能能主要取决于代码的作用，而不是选择函数式还是类组件。尽管优化策略各有略微不同，但它们之间的性能差异可以忽略不计。

一、函数式组件捕获了渲染所用的值

首先我们来看下面这个组件：

function App(props) { const showMessage = () => { alert('Hello' + props.user); }; const handleClick = () => { setTimeout(showMessage, 3000); }; return ( <button onClick={handleClick}>Say</button> ); }

它渲染了一个利用来模拟网络请求，然后显示一个确认警告的按钮。例如，如果是传递进来的 props.user 是 jie，那么三秒后就会弹出 Hello jie。