函数式组件与类组件区别-心智模型

与React类组件相比，React函数式组件究竟有何不同？

区别：心智模型不同，函数式组件捕获了渲染所用的值。

函数式组件与类组件有何不同？ — Overreacted他们是完全不同的宝可梦哦。https://overreacted.io/zh-hans/how-are-function-components-different-from-classes/

它渲染了一个利用setTimeout来模拟网络请求，然后显示一个确认警告的按钮。例如，如果props.user是Dan，它会在三秒后显示Followed Dan。非常简单。

实验：

1. 点击 其中某一个 Follow 按钮。
2. 在3秒内 切换 选中的账号。
3. 查看 弹出的文本。

你将看到一个奇特的区别:

• 当使用 函数式组件 实现的 ProfilePage, 当前账号是 Dan 时点击 Follow 按钮，然后立马切换当前账号到 Sophie，弹出的文本将依旧是 'Followed Dan'。
• 当使用 类组件 实现的 ProfilePage, 弹出的文本将是 'Followed Sophie'：
• 

 在这个例子中，第一个行为是正确的。如果我关注一个人，然后导航到了另一个人的账号，我的组件不应该混淆我关注了谁。 在这里，类组件的实现很明显是错误的。