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创建组件的三种方式及其区别
React推出后,出于不同的原因先后出现三种定义react组件的方式,殊途同归:具体的三种方式: 函数式定义的无状态组件 es5原生方式React.createClass定义的组件 es6形式的ext ...
Vue创建组件的三种方式
1.使用 Vue.extend 来创建全局的Vue组件 <div id="app"><!-- 如果要使用组件,直接,把组件的名称,以 HTML 标签的形式,引入到 ...
React绑定this的三种方式
转载自 React绑定this的三种方式 React可以使用React.createClass.ES6 classes.纯函数3种方式构建组件.使用React.createClass会自动绑定每个方 ...
java多线程w3c_Java创建多线程的三种方式
前言这篇文章主要讲述线程的概念.组成.Java创建多线程的三种方式以及线程的类型. 线程概念线程和进程的区别 **进程:**正在运行的程序,例如:你打开的qq音乐.exe程序,其由PCB(进程控 ...
js学习-DOM之动态创建元素的三种方式、插入元素、onkeydown与onkeyup两个事件整理...
动态创建元素的三种方式: 第一种: Document.write(); <body> <input type="button" id="btn" ...
java bean 工厂模式_Spring框架通过工厂创建Bean的三种方式实现
工厂模式 Spring中bean的创建,默认是框架利用反射new出来的bean实例.有时候也会有一些复杂的情况. 假设有一个飞机,属性如下,现在需要造很多同型号的飞机,那么唯一需要改变的属性只有Dri ...
把对象的创建交给spring来管理—— 1.创建bean的三种方式 2.bean对象的作用范围 3.bean对象的生命周期
把对象的创建交给spring来管理 spring对bean的管理细节 1.创建bean的三种方式 2.bean对象的作用范围 3.bean对象的生命周期创建Bean的三种方式 ...
java 创建线程_【80期】说出Java创建线程的三种方式及对比
点击上方"Java面试题精选",关注公众号面试刷图,查缺补漏 >>号外:往期面试题,10篇为一个单位归置到本公众号菜单栏->面试题,有需要的欢迎翻阅. 一.Ja ...
五、创建Bean的三种方式
五.创建Bean的三种方式转载于:https://www.cnblogs.com/ljiwej/p/7280614.html

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

获取源码

深入解析React创建组件的三种方式相关推荐

最新文章

热门文章