函数式和类组件

101 阅读1分钟

一个函数式组件(FC - functional component)就意味着一个没有实例(没有 this 上下文、没有生命周期方法、不监听任何属性、不管理任何状态)的组件。

因为函数式组件忽略了生命周期和监听等实现逻辑,所以渲染开销很低、执行速度快。

函数式组件为"三无产品", 一没有生命周期函数, 二没有态管理,三没有监听. 也就是说没有实例, 没有 this 上下文.只接收 prop 传递的一些数据, 并将其渲染出来给组件打上 "functional" 标记, 即得函数式组件因为函数式组件只是函数, 所以开销很低, 可以利用该特性进行优化。

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png 直接注入html片段会被转成字符串

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png 第二种隔离了css冲突

image.png npm install typescript-plugin-css-modules --sava-dev

image.png

image.png

image.png css代码只能提示功能

image.png React 类组件 这两个只是组件生命周期的管理上有所不同

image.png

image.png

image.png