使用 function 構(gòu)造函數(shù)創(chuàng)建組件：

?

如果想要把組件放到頁面中，可以把構(gòu)造函數(shù)的名稱，當作 組件的名稱，以 HTML標簽形式引入頁面中， 因為在React中，構(gòu)造函數(shù)就是一個最基本的組件。

?

注意：

?

組件的首字母必須是大寫 因為React在解析所有的標簽的時候，是以標簽的首字母來區(qū)分的，
如果標簽的首字母是小寫，那么就按照 普通的 HTML 標簽來解析，
如果首字母是大寫，則按照組件的形式去解析渲染。

?

格式：

創(chuàng)建：

?

function Hello(props) {// 在組件中，如果想要使用外部傳遞過來的數(shù)據(jù)，必須，顯示的在 構(gòu)造函數(shù)參數(shù)列表中，定義 props 屬性來接收；// 通過 props 得到的任何數(shù)據(jù)都是只讀的，不能從新賦值// props.name = '000'。無效return <div><h1>這是在Hello組件中定義的元素 --- {props.name}</h1></div>}

?

使用：

ReactDOM.render(<div>{ /* <Hello name={person.name} age={person.age} gender={person.gender} address={person.address}></Hello> *//* 上面的方法太麻煩，下面使用ES6中的屬性擴散‘...’ */}<Hello {...person}></Hello></div>, document.getElementById('app'))// 這里 ...Obj 語法，是 ES6中的屬性擴散， 表示，把這個對象上的所有屬性，展開了，放到這個位置

?

?

?

使用 class 關(guān)鍵字創(chuàng)建組件

class Person extends React.Component{render(){ // 在render函數(shù)中，必須返回一個null或者符合規(guī)范的虛擬DOM元素 return <div><h1>這是用 class 關(guān)鍵字創(chuàng)建的組件！</h1></div>; } } ```

區(qū)別：

?

使用 function 構(gòu)造函數(shù)創(chuàng)建的組件，內(nèi)部沒有 state 私有數(shù)據(jù)，只有 一個 props 來接收外界傳遞過來的數(shù)據(jù)；所以 叫做【無狀態(tài)組件】 使用 class 關(guān)鍵字 創(chuàng)建的組件，內(nèi)部，除了有 this.props 這個只讀屬性之外，還有一個 專門用于 存放自己私有數(shù)據(jù)的 this.state 屬性，這個 state 是可讀可寫的！ 所以叫做【有狀態(tài)組件】

有狀態(tài)組件和無狀態(tài)組件，最本質(zhì)的區(qū)別，就是有無 state 屬性；同時， class 創(chuàng)建的組件，有自己的生命周期函數(shù)，但是，function 創(chuàng)建的 組件，沒有自己的生命周期函數(shù)；

使用場景：
1. 如果一個組件需要存放自己的私有數(shù)據(jù)，或者需要在組件的不同階段執(zhí)行不同的業(yè)務(wù)邏輯，此時，非常適合用 class 創(chuàng)建出來的有狀態(tài)組件；
2. 如果一個組件，只需要根據(jù)外界傳遞過來的 props，渲染固定的 頁面結(jié)構(gòu)就完事兒了，此時，非常適合使用 function 創(chuàng)建出來的 無狀態(tài)組件；（使用無狀態(tài)組件的好處就是運行速度會快一點） ?

?

轉(zhuǎn)載于:https://www.cnblogs.com/ll15888/p/11168969.html

總結(jié)

以上是生活随笔為你收集整理的使用 function 构造函数创建组件和使用 class 关键字创建组件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。