1.第一種建立元件的方式
使用建構函式來建立元件，如果要接收外界傳遞的資料，需要在建構函式的引數列表中使用props來接收；
必須要向外return乙個合法的jsx建立的虛擬dom
●建立元件：
注意：元件首字母必須要大寫，否則就會被當作乙個普通標籤來渲染，瀏覽器就識別不了報錯
functionhello()
●為元件傳遞資料：
const dog =// ...為展開運算子，將dog裡的屬性全部展開，即...dog就相當於
name= age= gender=
reactdom.render(//在建構函式中接受外界傳遞過來的資料
function
hello(props) -- --
}
以上**都是寫在同乙個js檔案裡，實際上我們開發為了保持**的簡潔性，會將元件封裝到單獨的檔案中：
●建立乙個hello.jsx的檔案：
import react from 'react'//建立並匯出元件
export default
function
hello(props) -- --
}
●在其他檔案裡匯入元件：
//匯入hello元件
//預設如果不做單獨的配置的話，不能省略.jsx字尾名
import hello from './components/hello.jsx'
如果想要省略字尾名，需要在webpack.config.js檔案中新增配置：
resolve:
匯入元件時，配置和使用@路徑符號：
resolve:}
//注意：這裡的@符號表示專案根目錄中的src這一層目錄
import hello from '@/components/hello'
2.第二種建立元件的方式： 基於class關鍵字建立元件
●元件的基本結構：
//如果要使用class定義元件，必須要讓自己的元件繼承react.component
class 元件名稱 extends react.component
}
●建立元件：
//class關鍵字建立元件
class movie extends react.component
//render函式的作用是渲染當前元件所對應的虛擬dom元素
//render是例項方法
render()
}
●為元件傳遞資料：
const user =
//class關鍵字建立元件
class movie extends react.component
//render函式的作用是渲染當前元件所對應的虛擬dom元素
//render是例項方法
render()
這是movie元件 -- -- --
}}reactdom.render(
●class關鍵字建立的元件的私有屬性state：
//class關鍵字建立元件
class movie extends react.component相當於vue中的data() }
this.state =
//render函式的作用是渲染當前元件所對應的虛擬dom元素
render()
這是movie元件
}}reactdom.render(
3.兩種建立元件方式的對比
注意：使用class關鍵字建立的元件有自己的私有資料和生命週期函式；
但是使用function建立的元件只有props，沒有自己的私有資料和生命週期
（1）用建構函式建立出來的元件叫做「無狀態元件」
（2）用class關鍵字建立出來的元件叫做「有狀態元件」
（3）什麼情況下使用有狀態元件？什麼情況下使用無狀態元件？
●如果乙個元件需要有自己的私有資料，則推薦使用有狀態元件
●如果乙個元件不需要有自己的私有資料，則推薦使用無狀態元件
●無狀態元件由於沒有自己的state屬性和生命週期函式，所以執行效率會比有狀態元件稍微高一些
有狀態元件和無狀態元件之間的本質區別就是：有無state屬性和有無生命週期函式
（4）元件中的props和state/data之間的區別：
●props中的資料都是外界傳遞過來的
●state/data中的資料都是元件私有的（通過ajax獲取回來的資料一般都是私有資料）
●props中的資料都是唯讀的，不能重新賦值；state/data中的資料都是可讀可寫的
React的元件建立
在react中，元件分為兩種，類元件和函式式元件 簡單的共呢個使用函式式元件複雜功能使用類元件元件名首字母都必須大寫 使用es6建立的方式實現乙個元件 import react,from react export default class classcomponent extends compon...
react元件的建立
最近專案接觸react和rn，之前會一些vue和小程式，起初寫react是很難受的，尤其是jsx的寫法，不過2周過後感覺寫起來有點舒服了。這是早期react元件的建立方式，如果你看的文章是幾年之前寫的，很多都是這種方式 比如阮老師這篇react 入門例項教程 var likebutton react...
react建立元件的方式
react建立元件的方式 工廠 無狀態 函式 最簡潔，推薦使用 function component es6語法，複雜元件，推薦使用 定義的元件類component必須繼承react的核心元件類component,extends是繼承的意思，render 方法是react最常用的方法 class c...