深入解析React创建组件的三种方式

发布时间:2019-06-17 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了深入解析React创建组件的三种方式脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

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

1、函数式无状态组件

2、es5方式React.createClass组件

3、es6方式extends React.component

三种创建方式的异同

1、函数式无状态组件

(1)语法

 function myComponent(props) { 
 return 
 <div>Hello {props.name}</div> 
 }

(2)特点

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

● 组件不能访问this对象

● 不能访问生命周期方法

(3)建议

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

2、es5方式React.createClass组件

(1)语法

var myCreate = React.createClass({
 defaultProps: { 
 //code
 },
 getInitialState: function() {
 return {
 //code
 };
 },
 render: function() {
 return (
 <div>
 //code
 </div>
 );
 }
 });//欢迎加入全栈开发交流群一起学习交流:864305860

(2)特点

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

3、es6方式extends React.COMponent

(1)语法

class InputControlES6 extends React.Component {
 constructor(props) {
 super(props);
 this.state = {
 state_exam: 'hello'
 };
 // ES6 类中函数必须手动绑定
 this.handleChange = this.handleChange.bind(this);
 }
 handleChange() {
 this.setState({
 state_exam: 'hello world'
 });
 }
 render() {
 return (
 <div>
 //code
 </div>
 );
 }
};//欢迎加入全栈开发交流群一起学习交流:864305860

(2)特点

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

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

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

感谢您的观看,如有不足之处,欢迎批评指正。

获取源码

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

脚本宝典总结

以上是脚本宝典为你收集整理的深入解析React创建组件的三种方式全部内容,希望文章能够帮你解决深入解析React创建组件的三种方式所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。