react创建组件的三种方式,你懂吗?

原创 年树先生 随笔 前端技术 12818阅读 11 天前 举报

image.png
eact创建组件的三种方式:

1、函数式无状态组件

2、es5方式React.createClass组件

3、es6方式extends React.Component

三种创建方式的异同

1、函数式无状态组件

(1)语法

(2)特点

● 它是为了创建纯展示组件,这种组件只负责根据传入的props来展示,不涉及到state状态的操作。

● 组件不能访问this对象

● 不能访问生命周期方法

(3)建议

如果可能,尽量使用无状态组件

2、es5方式React.createClass组件

(1)语法

(2)特点

这种方式比较陈旧,慢慢会被淘汰。

3、es6方式extends React.Component

(1)语法

(2)特点

● 成员函数不会自动绑定this,需要开发者手动绑定,否则this不能获取当前组件实例对象。

● 状态state是在constructor中像初始化。

● props属性类型和组件默认属性作为组件类的属性,不是组件实例的属性,所以使用类的静态属性配置。

获取源码

本次给大家推荐一个免费的学习群,里面概括移动应用网站开发,css,html,webpack,vue node angular以及面试资源等。
对web开发技术感兴趣的同学,欢迎加入Q群:864305860,不管你是小白还是大牛我都欢迎,还有大牛整理的一套高效率学习路线和教程与您免费分享,同时每天更新视频资料。
最后,祝大家早日学有所成,拿到满意offer,快速升职加薪,走上人生巅峰。

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复