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

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

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

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

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

实验：

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

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

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

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

函数式组件与类组件区别-心智模型相关推荐

React函数组件和类组件的区别
定义组件有两个要求: 组件名称必须以大写字母开头组件的返回值只能有一个根元素函数组件函数组件接收一个单一的 props 对象并返回了一个React元素类组件 class Welcome ext ...
onclick=两个函数_[译]React函数组件和类组件的差异
[译]React函数组件和类组件的差异原文: https://overreacted.io/how-are-function-components-different-from-classes/ 在 ...
Reac学习记录（一） - 函数式组件与类组件
函数式组件直接以函数的方式声明,并且返回的组件内容(JSX语法)] 以下代码拷贝可直接运行: <body><div id="app"></div&g ...
react之纯函数、函数组件、类组件、纯组件
一.纯函数 Pure Function 定义:一个函数的返回结果只依赖于它的参数,并且在执行的过程中没有副作用,我们就把该函数称作纯函数. - 特点: 1.函数的返回结果只依赖与它的参数(同一个输入只 ...
React组件——类组件
一.组件的概念使用组件的方式进行编程,可以提高开发效率,提高组件的复用性.提高代码的可维护性和可扩展性 React定义组件的方式有两种类组件:React16.8版本之前几乎React使用的都是类组 ...
React类组件里面的各种问题浅析
浅析React类组件 React类组件(组件名首字母大写) //创建类组件组件名首字母大写 class MyCom extends React.Component {render(){return ...
【问题探讨】H5 UI渲染心智模型
目标探讨H5 UI渲染心智模型,即阐述数据是依据什么样的逻辑渲染到界面上的. 本文思路先通过一个示例讲述不同的数据渲染逻辑,然后讲两个延伸DEMO来着重说明CLASS和FUNCTION的特点: 示 ...
Reac组件化以及组件通信
一.模块与组件以及模块化与组件化慨念模块:向外提供特定功能的JS文件,便于复用JS,简化JS,提升JS效率数据.对数据的操作(函数).将想暴露的私有的函数向外暴露(暴露的数据类型是对象) 2. 模块 ...
【React】hooks的心智模型是什么鬼？
前言最近无意中看见一个分享贴,里面有人说了hooks的心智模型不被很多人知道.我就好奇hooks有心智模型?心智模型到底是啥玩意?专门去翻了下. Hooks心智模型起源根据我百度到的,中文里出现这 ...

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

函数式组件与类组件区别-心智模型相关推荐

最新文章

热门文章