1. 創建組件
+ 1. 引入 React 以及 { Component }
```js
// 方式一:
import React, { Component } from 'react'
// 方式二:
import React from 'react'
class News extends React.Component { }
```
+ 2. 使用類的繼承方式構造組件
```js
// 1. 引入
import React, { Component } from 'react'
// 2. 創建組件
class Home extends Component {
constructor(props) {
// 繼承 Component
// ES6 中的 super 可以用在類的繼承中,super 關鍵字,它指代父類的實例(即父類的 this 對象).
// 子類必須在 constructor 方法中調用 super 方法,否則新建實例時會報錯
// 這是因為子類沒有自己的 this 對象,而是繼承父類的 this 對象,然后對其加工。如果不調用 super 方法,子類就得不到 this 對象
// props 用于父子組件傳值
super(props);
// react 定義數據
this.state = {
name: '張三',
age: 18,
userinfo: {
username: 'xuxu',
age: 23,
}
}
}
// jsx
render() {
return (
<div>
<h2>react 所有節點要被根節點包裹起來</h2>
<p>這是p標簽 { this.state.name }</p>
<span>{ this.state.age }</span>
<p>{ this.state.userinfo.username }</p>
</div>
)
}
}
// 3. 導出
export default Home;
```
+ 3. 導出
2. 使用組件
+ 引入組件
```js
import Home from './components/Home'
```
+ 直接使用,無需注冊組件
```html
<Home></Home>
```
- 第一章:react 基礎
- 1. 關于 react
- 2. react 工作原理
- 0. 開發環境搭建
- 1. 創建并使用一個組件
- 1. 模塊化與組件化
- 2. 虛擬DOM
- 3. Diff 算法
- React 與 Vue 的使用差異
- 1. 組件創建方式
- 2. data 與 state
- 3. 方法使用方式&this
- 4. 數據雙向綁定
- 5. props
- 6. ref
- 7. for 循環元素
- 8. 生命周期
- create-react-app 改為多頁面應用
- react修改打包路徑,直接查看
- redux
- context
- lazy 實現延遲加載靜態屬性
- Memo實現指定組件進行渲染
- React Hooks
- React Hooks 的概念和意義
- 使用 useState
- axios單次切換formdata和payreload
- react 動態綁定 class
- 高階組件
- react設計模式