使用 function 構造函數創建組件：

?

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

?

注意：

?

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

?

格式：

創建：

?

function Hello(props) {// 在組件中，如果想要使用外部傳遞過來的數據，必須，顯示的在 構造函數參數列表中，定義 props 屬性來接收；// 通過 props 得到的任何數據都是只讀的，不能從新賦值// 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 關鍵字創建組件

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

區別：

?

使用 function 構造函數創建的組件，內部沒有 state 私有數據，只有 一個 props 來接收外界傳遞過來的數據；所以 叫做【無狀態組件】 使用 class 關鍵字 創建的組件，內部，除了有 this.props 這個只讀屬性之外，還有一個 專門用于 存放自己私有數據的 this.state 屬性，這個 state 是可讀可寫的！ 所以叫做【有狀態組件】

有狀態組件和無狀態組件，最本質的區別，就是有無 state 屬性；同時， class 創建的組件，有自己的生命周期函數，但是，function 創建的 組件，沒有自己的生命周期函數；

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

?

轉載于:https://www.cnblogs.com/ll15888/p/11168969.html

總結

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

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