我发现React docs有点不一致 . 在Components and Props一节中,他们通过 functional Welcome
组件的例子解释了
React使用{name:'Sara'}作为道具调用Welcome组件 .
考虑到该组件是一个纯粹的功能,足够公平 . 然后在State and Lifecycle中,他们通过 class Clock
组件的例子提到
React调用Clock组件的构造函数 . [...]然后React调用Clock组件的render()方法 .
从阅读文档,以及this Medium post,与 functional 组件,
-
该组件作为
props
对象的函数直接调用 -
它返回一个React元素,即一个对要渲染的DOM元素进行建模的对象
-
然后,React DOM创建DOM节点并将其插入"real" DOM
流程与 class-based 组件不同:
-
实例化组件类,并将对象实例存储在内存中
-
调用render方法并返回React元素(object)
-
React元件以其类实例为后盾,由React DOM用于生成和挂载实际的DOM节点
根据文章,最大的区别在于“函数组件没有实例”,这意味着它们是直接调用的 . React DOM“只使用函数的调用来确定为函数呈现的DOM元素” .
但是,这与其他来源不一致 . 例如,here和here Dan Abramov提到功能组件是内部类 . 换句话说,React只是将一个功能组件包装到一个类中并实例化它,就像它是一个类组件一样 . Another article甚至说前者甚至比后者慢 .
问题
-
功能组件是否被React转换为类组件?
-
使用功能组件而不是类组件是否有任何性能优势? (例如here它说没有任何好处,我假设在React Fiber之前?)
-
我是否真的应该牺牲我的工作流程,如果我可以在整个应用程序中使用状态,它在逻辑上适合的位置,例如树形深处的某个形式/受控组件?
1 回答
Are functional components converted into class components by React?
来自Dan Abramov的推特帖子 .
Is there any performance benefits to using functional, rather than class components?
显然现在没有性能优势,因为React在功能组件上做了很多事情,降低了性能 . 阅读this以获得更多理解 .
Should I really sacrifice my workflow
我猜不会