一、簡介（背景）

本文篇幅較多，建議耐心看完，我相信多少會對你有所幫助!

1.1、概念

它是一個將數據渲染為HTML視圖 的js庫

1.2、原生js痛點

• 用dom的API去操作dom，繁瑣且效率低
• 用js直接操作dom，瀏覽器會進行大量的回流和重繪
• 原生js沒有組件化的編程方案，代碼復用性低，哪怕有模塊話的概念，但模塊化也只能拆解一個個js，對樣式和結構也沒辦法拆解，組件化就相當于3劍客整體拆解，成為一個個的小功能

1.3、React特點

• 采用組件化模式，聲明式編碼，提高開發效率和組件復用性
• 在React Native中可以用react預發進行安卓、ios移動端開發
• 使用虛擬dom和有些的diffing算法，盡量減少與真實dom的交互，提高性能

二、React初體驗

2.1、html中使用react

需求：往div中添加一個h1標簽

代碼注解：這里涉及到3個庫文件，一個react（核心庫），react-dom（用于支持react操作dom的）還有一個babel（將jsx語法轉成js語法，因為瀏覽器只能識別js），還有就是script標簽中的type需要寫成text/babel，因為script標簽中要寫jsx的語法，這里再說一點，就是你引入了react-dom庫，就可以使用ReactDOM變量了，跟以前學習jquery一樣，引入jquery文件就可以使用$和jquery是同樣的道理

2.1.1、 創建虛擬dom的方式

①使用原生js的方式去寫（一般不用）

代碼注解：使用原生js來創建虛擬dom時，此時script標簽的type就不需要寫成text/babel，寫成原來的text/javascript就可以了，同時也可以刪除babel庫了，因為不需要它進行轉換，瀏覽器本身就能識別

②使用jsx語法創建（就是最開始的那種方式）

這里可能會有小伙伴會問，為什么不用js來創建dom呢？我看寫起來也還行啊，這是因為你還沒見過結構嵌套的情況，當需求改為h1標簽內再嵌套一個span標簽，你怎么辦？是不是后面還得再繼續套React.createElement(‘span’,{},‘span內容’) ，那如果繼續嵌套呢？是不是廢了。。。，所以這里就能看出jsx的好處了，其實babel將jsx轉換后的代碼就相對于用原生js寫的那樣，只不過這些不用你寫，babel幫你轉換

2.1.2、 關于創建的虛擬dom

1. 本質上其實就是一個object對象；
2. 虛擬dom上的屬性比較少，真實dom屬性多，因為虛擬dom只在recat內部使用，用不到那么多的屬性
3. 虛擬dom最終會被react轉換成真實dom，呈現再頁面上

2.2、JSX語法

• 定義虛擬dom時不要用引號
• 標簽中引入js表達式要用{}
• 如果在jsx要寫行內樣式需要使用style={
  {coler：red}}形式
• 樣式的類名指定不能寫class，要寫className;
• 只有一個根標簽
• 標簽必須閉合
• 標簽首字母
  ①若小寫字母開頭，則會將該標簽轉為html同名標簽，如果沒找到，則會報錯；
  ②若大寫字母開頭，則會認為是組件，它就會去找對應的組件，如果沒找到，就會報組件未定義的錯誤；

三、React面向組件編程

3.1 安裝開發者工具（React Developer Tools ）

這里工具的具體安裝方式就不多說了，由兩種方式，一種是翻墻，直接在chrome瀏覽的商城去下載，還有一種方式是在瀏覽器擴展程序中打開開發者模式，然后導入已下載的插件文件即可

3.2 組件的分類

1. 函數式組件（適用于簡單組件）

2. 類式組件（適用于復雜組件）

3.3 組件實例對象的三大屬性

3.3.1、 state

這里我們用一個小需求來說說state和組件內綁定方法這兩個問題，需求：點擊文本，改變天氣狀態

上述圖片中的例子這樣的寫法并不能實現我們的需求，為什么？因為changeWeather方法中打印的this是undefined，不是該weather組件的實例對象，自然也就無法拿到該實例對象上的state等屬性，更加不用說去改變state中的狀態了。。。那為什么會這樣的？原因就寫在圖中，那我們要怎么處理才能讓該方法拿到該組件的實例對象呢？來，看下面。。

在構造函數中加一句這個語句就可以了，那這行代碼是什么意思呢？
構造函數中的this永遠指向該組件的實例對象，所以=右側意思就是該組件實例對象自身此時還沒有該方法，他就會去原型對象上看有沒有，顯然這里是有的，然后調用bind方法，該方法做兩件事，一、創建一個新的函數；二、函數內的this指向bing（）括號中傳入的，顯然這里是組件實例對象；右側執行完后，將該方法賦值給了實例對象本身的一個方法名（changeWeather），這樣實例對象本身就有一個changeWeather方法了，并且內部this就是組件實例對象，所以此時render中點擊調用的那個方法，實際上是this實例對象自身的一個changeWeather方法，而不是寫在類中的那個原型對象上的changeWeather方法，我們為了不混淆兩個重名的方法，我們區分看一下

好了，接下來我們要做改變狀態這件事了，我們要通過react中的內置API（setState方法），不能直接更改state，就像下面這樣。

好了，到現在需求已經滿足了，但我們要對其簡化。。。

上述將state和自定義方法直接寫在了類中，這樣寫的意思就是說，給類組件的實例對象添加了一個state屬性和自定義方法，而且這里的自定義方法必須寫成箭頭函數的形式，因為箭頭函數內部是沒有this指向的，他會去他外部找this，那此時外部的this就是組件實例對象

總結：

• state是組件實例對象最重要的屬性，必須是對象的形式

• 組件被稱為狀態機，通過更改state的值來達到更新頁面顯示（重新渲染組件）

• 組件render中的this指的是組件實例對象

• 狀態數據不能直接賦值，需要用setState（）

• 組件自定義方法中的this為undefined，怎么解決？

  ①將自定義函數改為表達式+箭頭函數的形式（推薦）
  ②在構造器中用bind（）強制綁定this

3.3.2、 props

props就是在調用組件的時候在組件中添加屬性傳到組件內部去使用

簡單demo：

接下來這里我們想對傳入的props屬性進行一些必傳、默認值、類型的校驗，所以就需要用到一個prop-types庫

下載：npm i prop-types –save
引入：import PropTypes from ‘prop-types’

構造器問題

構造器僅用于以下兩種情況：

• 通過this.state賦值對象來初始化內部的state
• 為事件處理函數綁定實例（就是上面的this.changeWeather=this.changeWeather.bind(this)）

但是上述的這兩個點我們都有簡單的方法來實現，state我們可以用state={name:11}這種直接賦值的方式來實現，自定義事件的話可以通過賦值語句+箭頭函數的方式來實現，所以一般開發過程中都不寫構造器，還有就是如果一定要寫構造器，那么構造器是否接受props，是否傳遞給props，取決于是否要在構造器中通過this訪問props

函數組件中的props

因為函數組件沒有組件實例對象，所以其他兩個state和refs是沒有的，只有props屬性可用，直接在（）中接受props對象即可，函數內部就可以結構使用props中的值了

總結：

• 每個組件都會有props屬性
• 組件標簽的所有屬性都保存在props
• 組件內部不能改變外部傳進來的props屬性值

3.3.3 refs屬性

• 字符串形式的ref（這種方式已過時，不推薦使用，因為效率低）

refs是組件實例對象中的屬性，它專門用來收集那些打了ref標簽的dom元 素，比方說，組件中的input添加了一個ref=“input1”，那么組件實例中的refs就={input1：input（真實dom）}，這樣就可以通過this.refs.input1拿到input標簽dom了，就不需要想原生js那樣通過添加屬性id，然后通過document.getElementById(“id”)的方式拿

• 回調函數形式
  

直接讓ref屬性=一個回調函數，為什么這里說是回調函數呢？因為這個函數是你定義的，但不是你調用的，是react在執行render的時候，看到ref屬性后跟的是函數，他就會幫你調用了，然后把當前dom標簽當成形參傳入，所以上述例子這樣寫，就相當于把當前節點dom賦值給了this.input1，那這個this指的是誰呢？不難理解，這里是箭頭函數，本身沒有this指向，所以這個this得看外層的，該函數外層是render函數體內，所以this就是組件實例對象，所以ref={c=>this.input1=c}意思就是給組件實例對象添加一個input1，最后要取對應節點dom也直接從this（組件實例中?。?/p>

這里我們再來探討一個小問題，就是這個ref的回調函數會被執行幾次的問題？第一次在頁面剛進來執行render渲染的時候，react會把當前節點當成參數賦值給組件實例，當組件更新的時候（狀態改變時），它又會執行一次render，這個時候，react官方說明了這點，它會執行兩次，第一次是將原先的實例屬性清空，傳入的是null，第二次再把當前節點傳如賦值給組件實例的input1屬性，這個在一般開發過程中無關緊要，所以大家知道下有這個情況就可以了，當然它也有解決辦法：通過將ref的回調函數定義成類的綁定函數的方式，即ref={this.func},func是定義在類中的方法，func=?=>{this.input1=c} ，這種方式就可以解決上述執行兩次的問題，一般開發中我們寫成回調的形式就可以了

• createRef
  

代碼解讀：createRef（）方法是React中的API，它會返回一個容器，存放被ref標記的節點，但該容器是專人專用的，就是一個容器只能存放一個節點；
當react執行到div中第一行時，發現input節點寫了一個ref屬性，又發線在上面創建了myRef容器，所以它就會把當前的節點存到組件實例的myRef容器中

注意：如果你只創建了一個ref容器，但多個節點使用了同一個ref容器，則最后的會覆蓋掉前面的節點，所以，你通過this.ref容器.current拿到的那個節點是最后一個節點

四、 React中的事件處理

1. 通過onXxxx屬性指定事件處理函數（小駝峰形式）
2. 通過event.target可以得到發生事件的Dom元素
3. 使用 JSX 語法時你需要傳入一個函數作為事件處理函數，而不是一個字符串。

4.1 高階函數和函數柯里化

我們寫個用到高階函數和函數柯里化的例子：

...其余代碼省略

saveFormData=(type)=>{  
	return (event)=>{
		this.setState({
			[type]:event.target.value  
		})
	}
}

<form>
	<input onChange={ this.saveFormData('username') } />
	<input onChange={ this.saveFormData('password') } />
	<button>登錄</button>
</form>

上面代碼的saveFormData函數其實就是高階函數，因為它返回的值是一個函數，而且這個函數就是通過函數柯里化的方式在調用（先是saveFormData函數接收一個參數type，隨后返回函數，然后再接收別的參數，然后最終來處理結果（設置state值））

• 提問1：那為什么要寫成這樣呢？我直接在函數saveFormData中同時接收兩個參數不行嗎？
  答：不行，因為你拿不到event，因為這是react幫你處理的

• 提問2：那還有沒有別的方式來實現，不用柯里化處理方式？
  答：有

//將下面函數的調用方式改為這樣就可以了，函數接收方式也改下

saveFormData=（type,value）=>{
	this.setState({
		[type]:value
	})
}
<form>
	<input onChange={ (event)=>{this.saveFormData('username',event.target.value)} } />
	<input onChange={ (event)=>{this.saveFormData('password',event.target.value)} } />
	<button>登錄</button>
</form>

五、 生命周期函數

5.1 老版的生命周期過程：

掛載時：先執行構造器（constructor）=》組件將要掛載（componentWillMount）=》組件掛載渲染（render）=》組件掛載完成（componentDidMount）=》組件銷毀（componentWillUnmount）

組件內部狀態更新：組件是否應該更新（shouldComponentUpdate）=》組件將要更新（componentWillUpdate）=》組件更新渲染（render）=》組件更新完成（componentDidUpdate）

強制更新：調用this.forceUpdate()，這個api和setState一樣都是react自帶的，一般這個強制更新很少用，它的執行流程就是比上述的正常更新流程少一步詢問是否更新（shouldComponentUpdate）

父組件重新render：調用組件將要接收新props（componentWillReceiveProps）=》組件是否應該更新（shouldComponentUpdate）=》組件將要更新（componentWillUpdate）=》組件更新渲染（render）=》組件更新完成（componentDidUpdate）

注意：上述加粗的函數，只有在父組件狀態發生改變了，重新調用render時才會調用子組件的componentWillReceiveProps函數，父組件第一次引用子組件的時時不會調用的

5.2 新版生命周期函數

新版生命周期函數和舊版的差別：新版即將廢棄老的3個鉤子（componentWillMount、componentWillReceiveProps、componentWillUpdate），新增了2個鉤子（getDerivedStateFromProps、getSnapshotBeforeUpdate）

六、 DOM的Diff算法

虛擬DOM中的key的作用：

當狀態中的數據發生改變時，react會根據【新數據】生成【新虛擬DOM】，隨后react會進行【新虛擬DOM】和【舊虛擬DOM】的diff算法比較，具體的比較規則如下：

• 若【舊DOM】中找到了與【新DOM】相同的key，則會進一步判斷兩者的內容是否相同，如果也一樣，則直接使用之前的真實DOM，如果內容不一樣，則會生成新的真實DOM，替換掉原先的真實DOM
• 若【舊DOM】中沒找到與【新DOM】相同的key，則直接生成新的真實DOM，然后渲染到頁面

用index作為key可能引發的問題

1. 若對數據進行：逆序添加、逆序刪除等破壞順序的操作時會產生不必要的真實DOM更新，造成效率低下
2. 如果結構中還包含輸入類的dom，會產生錯誤dom更新，出現界面異常

開發中如何選擇key

1. 最好選中標簽的唯一標識id、手機號等
2. 如果只是簡單的展示數據，用index也是可以的

七、 腳手架

使用create-react-app（腳手架工具）創建一個初始化項目

1、下載腳手架工具：npm i -g create-react-app

2、創建引用：create-react-app my-app

3、運行應用：cd my-app（進入應用文件夾），npm start（啟動應用）

7.1 React腳手架配置代理

• 方法一

在package.json中追加如下配置

"proxy":"http://localhost:5000"

說明：

1、優點：配置簡單，前端請求資源可以不加任何前綴
2、缺點：不能配置多個代理（如果請求的不同服務器就不行）
3、工作方式：當請求了自身3000端口不存在的資源時，那么會轉發給5000端口（優先會匹配自身的資源，如果自己有就不會請求5000端口了）

• 方法二

1、第一步：創建代理配置文件

在src下創建配置文件：src/setupProxy.js

2、編寫代理配置規則

說明：

1、優點：可以配置多個代理，可以靈活控制請求是否走代理
2、缺點：配置繁瑣，前端請求資源時必須加前綴

八、 消息訂閱-發布機制

背景：

原先react傳遞數據基本用的是props，而且只能父組件傳給子組件，如果子組件要傳數據給父組件，只能先父組件傳一個函數給子組件，子組件再調用該方法，把數據作為形參傳給父組件，那考慮一個事情，兄弟間組件要如何傳遞數據呢？這就要引出下面這個消息訂閱-發布機制

工具庫：PubSubJs

下載：npm install pubsub-js --save

使用：

1. 先引入：import PubSub from “pubsub-js”
2. 要接收數據方訂閱：PubSub.subscribe('消息名'，（data）=>{ console.log(data) })
3. 傳遞數據方發布：PubSub.publish('消息名',data)

九、React路由

9.1 相關理解

9.1.1.SPA理解

• 單頁面應用（single page web application SPA）
• 整個頁面只有一個完整的頁面（html文件）
• 點擊頁面的鏈接不會刷新頁面，只會做頁面的局部更新
• 數據都需要通過ajax請求獲取，并在前端異步展示

9.1.2.路由的理解

1、 什么是路由？

• 一個路由就是一個映射關系
• key永遠為路徑，value可能是function或者component

2、 路由分類

• 后端路由

  a ）理解：后端路由的key還是路徑，只不過value是上述說的function，這個在學習node和Express的時候應該看到過，如下圖
  
  b) 注冊路由：router.get(path,function(req,res){…})
  c) 工作過程：當node接收到一個請求時，會根據請求路徑去匹配對應的路由，然后調用對應路由中的函數來處理請求，返回響應數據

• 前端路由

  a) 瀏覽器端路由，value是對應組件（component），用于展示頁面內容
  b) 注冊路由：<Route path='/test',component={Test}>
  c) 工作過程：當瀏覽器path變為/test時，當前路由組件就會變成Test組件

9.2 react-router-dom

9.2.1 理解

• 它是react的一個插件庫
• 專門用來實現一個SPA單頁面應用
• 基于react的項目基本都用它

9.2.2 常用API

1、內置組件

• <BrowserRouter>
• <HashRouter>
• <Route>
• <Redirect>
• <Link>
• <NavLink>
• <Switch>

2、知識點

• 路由的基本使用
  

• 路由組件和一般組件
  

• NavLink的使用
  

• Switch的使用
  

• 路由的模糊匹配和精準匹配
  

• Redirect的使用
  

• 嵌套路由
  

• 向路由組件傳遞參數
  

• 路由跳轉的兩種模式（push、replace）

默認開啟的是push模式，push模式就是說每次的點擊跳轉改變路徑，都是往瀏覽器歷史記錄的棧中不斷追加一條記錄，然后你點回退按鈕時，它會指向當前棧頂記錄的前一條，replcae模式就是說替換掉當前的那條記錄，然后你點回退的時候，就不會顯示上次被替換掉的那條記錄了，只會顯示上上條記錄，那要怎么設置為replace模式呢？直接在<Link replace to='XXX'>標簽上添加一個replace屬性即可

• 編程式路由導航（不借助link或者navLink這種手動點觸發路由跳轉）

就是借用history對象的api來操作路由的跳轉、前進、后退

• withRouter的使用

作用：它就是專門解決在一般組件中想要使用路由組件的那幾個API的這個問題的，它接收一個一般組件，然后調用后，該一般組件身上也有了路由組件的history、match等屬性

如何使用：
1、先引入import { withRouter} from "react-router-dom"
2、定義一般組件class XX extends ...
3、export default withRouter( XX )

• BrowserRouter和HashRouter的區別
  

10、redux

10.1 redux理解

10.1.1 redux是什么？

1. 它是專門做狀態管理的js庫，不是react插件庫
2. 它可以用在angular、vue、react等項目中，但與react配合用到最多
3. 作用：集中式管理react應用中多個組件共享的狀態

10.1.2 什么情況下需要使用它

1. 某個組件的狀態需要讓其他組件也能拿到
2. 一個組件需要改變另一個組件的狀態（通信）
3. 總體原則：能不用就不用，如果不用比較吃力，就可以使用

redux的工作流程

11、react-redux

原先redux是獨立公司創建的，后來react公司發現開發者都這么喜歡在react項目中使用redux，所以就自己開發了一個react的插件叫react-redux

11.1、react-redux模型圖

11.2、react-redux基本使用

11.2、純函數

11.3、react-redux開發者工具

1. 打開chrome網上商店，下載開發者工具Redux DevTools
2. 下載完后右上方的插件圖標還是不會亮的，因為它還識別不了你寫的redux，所以還需要下載一個庫（redux-devtools-extension）
3. 然后再你的store文件中引入該庫文件import {composeWithDevTools} from redux-devtools-extension
4. 然后再createStore（）的第二個參數位置調用composeWithDevTools()，將之前放在這個位置的中間件傳到該方法中
   export default createStore(allReducer,composeWithDevTools(applyMiddleware(thunk)))

12、項目打包運行

在react腳手架中通過npm run start 來運行啟動項目并打開頁面，打包生成靜態文件就要用到另一個命令（npm run build），它會生成一個build文件夾，一般這個生成的靜態文件都是放到服務器上去運行的，那么問題來了，服務器要怎么搭建呢？

方法一：用node+express可以搭建一個簡單的服務器
方法二：需要用到一個庫serve，使用前需要先下載npm i serve -S，然后直接在對應文件夾中執行serve即可，比方在這里，當前文件路徑是項目根目錄，直接serve build即可，就可以開啟一個5000端口的服務器了

13、Hooks

13.1、React Hook /Hooks是什么？

1、Hook是React 16.8新推出的新特性/新語法
2、可以讓你在函數式組件中使用state或其他特性

13.2、三個常用Hook

1、React.useState（）
2、React.useEffect（）
3、React.useRef（）

13.3、useState

Demo：

import React,{useState} from 'react';

export default ()=>{

  //useState()中接收的是state的默認值，前面是數組解構，第一個是state變量，第二個是改變state的方法，類似于setState（）
  const [count,setCount] =useState( 0 )
  	render(
  		<div>{count}</div>
  		<button onClick={()=>{setCount(count+1)}}>點我+1</button>
  	)
}

這里思考個問題，當你點擊按鈕+1時，狀態改變的時候，整個函數組件就會執行，所以第四行也自然會執行，那它的狀態不就又變成0了嗎？還能正常+1嗎？

答案：是可以正常+1，為什么呢？因為這行代碼底層做了處理，當狀態改變重新調用整個函數組件時，這句話是會執行，但它不會去覆蓋count值，所以count值還是會正常+1

13.4、useEffect

總結：這個鉤子函數相當于類組件三個鉤子函數的集合，當你想用做componentDIdMount時，可以在第二個參數中加上[]，表示誰都不監聽，只會在第一次掛載時調用，這就相當于didMount函數了，如果你想當componentDidUpdate函數用，那么你可以在第二個參數加上你要監聽更新的state值，注意是數組，如果你要當componentWillUnmount函數，則在useEffect（）接收的第一個函數中返回一個函數，這個返回的函數就相當于willUnMount

13.5、useRef

14、React擴展知識

14.1、setState的兩種寫法

Demo:

//這里我們先統一不考慮第二個參數回調

對象式寫法：
const {count} =this.state;
this.setState({ count:count+1})    //setState（）方法接收一個對象

函數式寫法：
this.setState((state,props)=>{    //函數式寫法可以接收老的state和props數據
	return {count:1}
})
簡寫：this.setState(state=>({count+state}))

14.2、lazyload（懶加載）

這里我們要講的懶加載主要是針對路由組件的懶加載，就是你點擊路由導航菜單，加載對應組件的時候懶加載，具體來看下面code。。。

//原先的路由組件引入：
import Demo1 from "./Demo1"
import Demo2 from "./Demo2"

<Route path='/demo1',component={Demo1}/>
<Route path='/demo2',component={Demo2}/>

//現在使用lazyload:
import React,{component,lazy} from "react    // 需要用到react中的lazy函數

// 引入路由組件方式通過調用lazy（），然后接收一個函數的方式，import 引入文件也可以通過函數調用的方式
const Demo1 = lazy(()=>{import('./Demo1')})  
const Demo2 = lazy(()=>{import('./Demo2')})  

//路由配置那邊也要改動，用Suspense標簽包裹下，再傳一個fallback屬性，接收一個組件，你可以自定義一個加載過程中的簡單組件，再資源沒回來之前會顯示這個傳入的簡單加載組件，就是為了再網速慢得情況下，頁面不至于白屏，提高用戶體驗
<Suspense fallback={組件}>
	<Route path='/demo1',component={Demo1}/>
	<Route path='/demo2',component={Demo2}/>
</Suspense>

**注意：**這里引入得加載組件必須通過直接引入的方式import Loading from "./Loading"`

14.3、Fragment標簽

簡單一句話概括：這個標簽就是用在有時頁面結構層級太多，而且有些都是語法要求，實際沒意義的結構層級（return（）中的根節點就是這個情況），這時你就可以用Fragment標簽，當然<></>在一般情況下和Fragment標簽作用相同，當時有一點不一樣，就是Fragment標簽能接收一個key屬性，而<></>什么屬性都不能接收

14.4、Context

理解：這里說的Context其實就是類組件中實例對象中的一個屬性，它和state、props、ref是同一級的；
作用：它可以解決多層組件之間，祖先組件要往后代組件傳遞數據的情況，不用再一層一層的props傳
使用原理： 舉個例子，要把父組件中state的值傳遞給孫子組件，那么在父組件的全局位置創建一個容器對象，然后用這個容器對象的Provider標簽包裹父組件，同時傳value={state數據}，注意，這里的value字段名不能改，只能是value，然后孫子組件可以用下面的兩種方式去接收數據

14.5、PureComponent（純組件）

具體的使用：就是原先extends Component=》extends PureComponent 即可

14.6、錯誤邊界

所謂的錯誤邊界就是說，在實際開發過程中，組件復用是很正常的，但你很難避免調用的子組件出現錯誤（語法錯誤，或者是因為數據格式不對導致的報錯，你不可能兼容到各個位置），如果沒有錯誤邊界，當子組件出現問題的時候，整個頁面就都會掛掉，所以為了用戶體驗，讓錯誤不影響整個頁面，所以要用這個錯誤邊界，注意：這個錯誤邊界時要在父組件中進行處理的

總結

以上是生活随笔為你收集整理的React教程（详细版）(react该如何学习)的全部內容，希望文章能夠幫你解決所遇到的問題。

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