13. React 声明组件有哪几种方法, 有什么不同?
作者: 时间:2023-10-15阅读数:人阅读
13. React 声明组件有哪几种方法, 有什么不同?
React 声明组件的三种方式:
- 函数式定义的无状态组件
-
ES5
原生方式React.createClass
定义的组件 -
ES6
形式的extends React.Component
定义的组件
无状态函数式组件
它是为了创建纯展示组件, 这种组件只负责根据传入的 props
来展示, 不涉及到 state
状态的操作, 组件不会被实例化, 整体渲染性能得到提升, 不能访问 this
对象, 不能访问生命周期的方法。
ES5 原生方式 React.createClass // RFC
React.createClass
会自绑定函数方法, 导致不必要的性能开销, 增加代码过时的可能性。
ES6 继承形式 React.Component // RCC
目前极为推荐的创建有状态组件的方式, 最终会取代 React.createClass
形式;相对于 React.createClass
可以更好实现代码复用。
无状态组件相对于于后者的区别:
与无状态组件相比, React.createClass
和 React.Component
都是创建有状态的组件, 这些组件是要被实例化的, 并且可以访问组件的生命周期方法。
React.createClass 与React.Component 区别:
函数 this 自绑定
-
React.createClass
创建的组件, 其每一个成员函数的this
都有React
自动绑定, 函数中的this
会被正确设置 -
React.Component
创建的组件, 其成员函数不会自动绑定this
, 需要开发者手动绑定, 否则this
不能获取当前组件实例对象
组件属性类型 propTypes 及其默认 props 属性 defaultProps 配置不同
-
React.createClass
在创建组件时, 有关组件props
的属性类型及组件默认的属性会作为组件实例的属性来配置, 其中defaultProps
是使用getDefaultProps
的方法来获取默认组件属性的 -
React.Component
在创建组件时配置这两个对应信息时, 他们是作为组件类的属性, 不是组件实例的属性, 也就是所谓的类的静态属性来配置的
组件初始状态 state 的配置不同
-
React.createClass
创建的组件, 其状态state
是通过getInitialState
方法来配置组件相关的状态 -
React.Component
创建的组件, 其状态state
是在constructor
中像初始化组件属性一样声明的
本站所有文章、数据、图片均来自互联网,一切版权均归源网站或源作者所有。
如果侵犯了你的权益请来信告知我们删除。邮箱:licqi@yunshuaiweb.com