歡迎學習交流！！！
持續更新中…
文章目錄
- 模塊與組件
- 組件規則注意事項
- 函式式組件（無狀態）
- 類方式組件（有狀態）
模塊與組件
模塊：
- 向外提供特定功能的js程式, 一般就是一個js檔案
- 為什么要拆成模塊：隨著業務邏輯增加，代碼越來越多且復雜，
- 作用：復用js, 簡化js的撰寫, 提高js運行效率
組件：
- 用來實作區域功能效果的代碼和資源的集合(html/css/js/image等等)
- 為什么要用組件： 一個界面的功能更復雜
- 作用：復用編碼, 簡化專案編碼, 提高運行效率
模塊化：
當應用的js都以模塊來撰寫的, 這個應用就是一個模塊化的應用
組件化：
當應用是以多組件的方式實作, 這個應用就是一個組件化的應用
組件規則注意事項
- 組件類的第一個首字母必須大寫
- 組件類必須有
render方法 - 組件類必須有且只有一個根節點
- 組件屬性可以在組件的
props獲取- 函式需要宣告引數：
props - 類直接通過
this.props
- 函式需要宣告引數：
函式式組件（無狀態）
- 名字不能用小寫
- React 在決議的時候，是以標簽的首字母來區分的
- 如果首字母是小寫則當作 HTML 來決議
- 如果首字母是大小則當作組件來決議
- 結論：組件首字母必須大寫
注意：必須要有結束標簽，如<MyComponent />或<MyComponent><MyComponent />
<body>
<!-- 準備好一個容器 -->
<div id="test"></div>
<!-- 引入react核心庫 -->
<script type="text/javascript" src="./js/react.development.js"></script>
<!-- 引入react-dom 用于支持react操作DOM -->
<script type="text/javascript" src="./js/react-dom.development.js"></script>
<!-- 引入babel 用于將jsx轉為js -->
<script type="text/javascript" src="./js/babel.min.js"></script>
<script type="text/babel">
// 1. 創建函式式組件
function MyComponent() {
console.log(this) //undefined babel編譯之后會開啟嚴格模式（JS5中禁止this指向window）
return <h2>我是用函式定義的組件（適用于【簡單組件】的定義）</h2>
}
// 2. 渲染組件到頁面
ReactDOM.render(<MyComponent />,document.getElementById('test'))
/*
執行了ReactDOM.render(<MyComponent />....之后發生了什么？
1. React決議組件標簽，找到MyComponent組件
2. 發現組件是使用函式定義的，隨后呼叫該函式，將回傳的虛擬DOM轉為真實DOM，呈現在頁面當中
*/
</script>
</body>
類方式組件（有狀態）
有關類：
- 類中的構造器不是必須寫的，要對實體進行一些初始化的操作，比如添加指定屬性時才寫，
- 如果A類繼承了B類，且A類中寫了構造器，那么A類構造器中的super是必須要呼叫的
- 類中所定義的方法，都是放在了類的原型物件上，供實體去使用
在React中，定義/創建一個類必須要繼承一個內置類Component
<script type="text/babel">
// 1. 創建類式組件 -->類名就是組件名
class MyComponent extends React.Component{
// 構造器中必須呼叫super，但構造器可以省略，render必須寫且必須有回傳值
render () {
// render放在哪里？ ---類的原型物件上，供實體使用
// render中的this是誰？ ---MyComponent的實體物件即MyComponent組件實體物件
return <h2>我是用類定義的組件（適用于【復雜組件】的定義）</h2>
}
}
// 2. 渲染組件到頁面 (render在此處僅僅是重名了)
React.render(<MyComponent />,document.getElementById('test'))
</script>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/303321.html
標籤：其他
上一篇：js實作表格的增 刪 改 查
下一篇：Vue.js 路由