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创建组件的三种方式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。