web前端之react创建组件的三种方式

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属性类型和组件默认属性作为组件类的属性,不是组件实例的属性,所以使用类的静态属性配置。

最后:

“相信有很多想学前端的小伙伴,今年年初我花了一个月整理了一份最适合2018年学习的web前端干货,从最基础的HTML+CSS+JS到移动端HTML5等都有整理,送给每一位前端小伙伴,53763,1707这里是小白聚集地,欢迎初学和进阶中的小伙伴。”

猜你喜欢

转载自blog.csdn.net/liangjielaoshi/article/details/83858376