《React基礎(chǔ)教程》教案

課時安排：2.5學(xué)時教學(xué)課型：專業(yè)課

題目(教學(xué)章、節(jié)或主題)：

React基礎(chǔ)

教學(xué)目標(biāo)(分掌握、熟悉、了解三個層次)

1、了解React的誕生和優(yōu)缺點；

2、掌握React基本結(jié)構(gòu)；

3、掌握如何編寫第一個React程序；

4、掌握React的DOM更新機制；

5、掌握J(rèn)SX;

6、了解React開發(fā)中的約定。

教學(xué)內(nèi)容：

1、React概述(10分鐘)：

(1)介紹React的誕生、定位和意義。

(2)介紹React的優(yōu)點和缺點，為后續(xù)更深入了解其特點和內(nèi)涵打下基礎(chǔ)。

2、React基本結(jié)構(gòu)(25分鐘)：

(1)虛擬DOM

介紹瀏覽器DOM是什么，通過對比引導(dǎo)介紹虛擬DOM及其作用，讓學(xué)

生初步了解虛擬DOM的含義和重要性。

(2)組件

介紹React開發(fā)中最基本的功能單元一組件，及其開發(fā)的3個過程。讓

學(xué)生通過程序員最熱愛的“HelloWorld"實例認(rèn)識最基礎(chǔ)的React組件。

(3)ReactElement(React元素)

對ReactElement的要素、創(chuàng)建以及屬性進行簡單介紹，并以此為實例培

養(yǎng)學(xué)生對ReactElement的概念和使用有初步了解。

(4)React中的渲染

介紹React是如何調(diào)用函數(shù)將虛擬DOM渲染轉(zhuǎn)換成瀏覽器DOM。

3、第一個React程序(15分鐘)：

(1)介紹React的基本運行環(huán)境，包括基礎(chǔ)環(huán)境和引入文件。

(2)手把手引導(dǎo)學(xué)生參考實例寫出第一個”HelloWorld"程序，感受面向組

件的編程思想。

4、React的DOM更新機制(25分鐘):

介紹瀏覽器DOM的渲染方法及其缺點，引導(dǎo)講解虛擬DOM和虛擬

DOM的局部渲染。

(1)差異比較算法

介紹React的局部更新算法，也就是差異比較算法。重點講解如何進行節(jié)

點和子節(jié)點列表的差異比較。

(2)ReactFiber架構(gòu)

重點講解ReactV16版本中使用的新底層核心架構(gòu)一Fiber架構(gòu)更新過程

的兩個階段，比較階段和提交階段。

5、JSX(20分鐘)：

講解基于模板的前端組件化，通過實例讓學(xué)生了解其特點。

(1)JSX介紹

通過實例介紹JSX的含義、特點和屬性等。特別是讓學(xué)生了解到JSX不

是一種新的語言，而是基于JavaSchpt的一種擴展特性。

(2)JSX使用方法

重點通過實例讓學(xué)生掌握J(rèn)SX的使用方法，包括表達式、條件渲染、列表

渲染，以及DOM屬性、延展屬性和注釋的使用方法。

(3)JSX轉(zhuǎn)義工具

介紹了JSX的轉(zhuǎn)義過程和工具。

6、React開發(fā)中的約定(15分鐘)：

通過實例講解React開發(fā)中的一些特殊用法約定，比如單一根節(jié)點、組件

名約定、class和for的保留字、行內(nèi)樣式、HTML轉(zhuǎn)譯等，并讓學(xué)生嘗試使

用，加深印象。

教學(xué)方式：

根據(jù)學(xué)生實際，注重引導(dǎo)自學(xué)，注重啟發(fā)思維

教學(xué)媒介：

課程PPT講義

教學(xué)重難點：

1、React的基本結(jié)構(gòu)

2、熟練掌握React的DOM更新機制以及JSX的使用方法

討論、思考題、作業(yè)：

1、虛擬DOM中ReactNode有哪幾種類型，哪種是最常見的？

2、請構(gòu)建一個包含3個子組件的組件，組件可以是任意形式。

3、請將124節(jié)中每秒更新顯示時間的例子實現(xiàn)并運行，通過瀏覽器的調(diào)試工

具觀察瀏覽器

DOM的變化情況，理解虛擬DOM的更新機制。

4、下面這段JSX語句是否正確，如不正確，有哪些問題？

class={if(Ips.login)return'hide'}

5、JSX和JavaScript是什么關(guān)系,它們是如何轉(zhuǎn)換的？6.使用JSX實現(xiàn)顯示

一個整數(shù)數(shù)組中大于10的數(shù)字。

參考書目：

1、深入React技術(shù)棧，陳屹，人民郵電出版社

2、React+Node.js開發(fā)實戰(zhàn)：從入門到項目上線，袁林，尹皓，陳寧，機械工

業(yè)出版社

3、深入淺出React和Redux,程墨，機械工業(yè)出版社

《React基礎(chǔ)教程》教案

課時安排：1.5學(xué)時教學(xué)課型：專業(yè)課

題目（教學(xué)章、節(jié)或主題）：

React組件

教學(xué)目標(biāo)（分掌握、熟悉、了解三個層次）

7、掌握組件的定義；

8、熟悉有狀態(tài)組件與無狀態(tài)組件；

9、掌握refs引用；

10、了解props屬性驗證；

11、了解組件的其他成員。

教學(xué)內(nèi)容：

7、組件的定義（15分鐘）：

（3）介紹組件在React開發(fā)中的重要性以及React組件的定義。

（4）介紹React組件中的props屬性集合、state狀態(tài)集合和render。核心

函數(shù)，并通過實例加深學(xué)生的印象。

8、有狀態(tài)組件與無狀態(tài)組件（15分鐘）：

（5）有狀態(tài)組件與無狀態(tài)組件

介紹有狀態(tài)組件與無狀態(tài)組件的定義，并通過實例講解其特點。

（6）設(shè)計組件的state

介紹React開發(fā)中哪些組件應(yīng)該有state,哪些數(shù)據(jù)應(yīng)放在state中，哪

些數(shù)據(jù)不應(yīng)該放在state中。

9、refs引用（15分鐘）：

介紹React中refs引用的場景，并通過實例介紹引用的三種創(chuàng)建方式，包

括createRef()方式、回調(diào)方式和字符串方式，分別都通過實例加深學(xué)生的印象。

10、props屬性驗證(10分鐘)：

介紹了React引入的propTypes的定義，并通過實例介紹了props的屬

性驗證方法。

11、組件的其他成員(10分鐘)：

介紹了React提供的其他屬性和函數(shù)，包括displayName、

getlnitialState()>getDefaultProps()>mixin()o

教學(xué)方式：

根據(jù)學(xué)生實際，注重引導(dǎo)自學(xué)，注重啟發(fā)思維

教學(xué)媒介：

課程PPT講義

教學(xué)重難點：

1、React組件中props、state和render。函數(shù)的定義和使用方法

2、React組件refs引用的使用方法

討論、思考題、作業(yè)：

1、請實現(xiàn)一個父子組件，其中父組件為有狀態(tài)組件，子組件為無狀態(tài)組件，父

組件通過props把它的state傳給子組件。

2、使用setState()時應(yīng)該注意什么，在哪些地方可以使用，哪些地方不可以?

參考書目：

4、深入React技術(shù)棧，陳屹，人民郵電出版社

5、React+Node.js開發(fā)實戰(zhàn)：從入門到項目上線，袁林，尹皓，陳寧，機械工

業(yè)出版社

6、深入淺出React和Redux,程墨，機械工業(yè)出版社

《React基礎(chǔ)教程》教案

課時安排：1學(xué)時教學(xué)課型：專業(yè)課

題目（教學(xué)章、節(jié)或主題）：

組件的生命周期

教學(xué)目標(biāo)（分掌握、熟悉、了解三個層次）

12、了解React的生命周期；

13、掌握掛載函數(shù);

14、掌握更新函數(shù)；

15、掌握卸載函數(shù)；

16、了解一個簡單的示例。

教學(xué)內(nèi)容：

12、React的生命周期（10分鐘）：

（1）介紹了React的生命周期中掛載、更新、卸載的三個階段，以及對應(yīng)的

三種React組件類型和函數(shù)使用中的注意事項。

（2）回顧ReactFiber架構(gòu)和DOM更新的兩個階段，引導(dǎo)學(xué)生對應(yīng)生命周

期函數(shù)進行深入討論。

13、React掛載函數(shù)（10分鐘）：

詳細(xì)介紹了組件實例在創(chuàng)建階段中掛載函數(shù)的調(diào)用順序以及調(diào)用方法的

具體內(nèi)容，通過實例增加學(xué)生的印象和理解。

14、React更新函數(shù)（10分鐘）：

詳細(xì)介紹了組件在更新階段中生命周期函數(shù)的調(diào)用順序以及調(diào)用方法的

具體內(nèi)容，通過實例增加學(xué)生的印象和理解。

15、React卸載函數(shù)（5分鐘）：

詳細(xì)介紹了在卸載階段，回調(diào)函數(shù)的具體內(nèi)容，通過實例增加學(xué)生的印象

和理解。

16、簡單示例（10分鐘）：

通過數(shù)字時鐘的例子，介紹了如何使用生命周期函數(shù)結(jié)合state來實現(xiàn)。

教學(xué)方式：

根據(jù)學(xué)生實際，注重引導(dǎo)自學(xué)，注重啟發(fā)思維

教學(xué)媒介：

課程PPT講義

教學(xué)重難點：

1、熟練掌握React的生命周期函數(shù)如何使用

討論、思考題、作業(yè)：

1.通過AJAX從服務(wù)器為組件請求數(shù)據(jù)，應(yīng)該如何實現(xiàn)？2.卸載事件通常用于內(nèi)

存清理，如果不清理會怎樣？

3.請了解V15版React中有哪些生命周期事件，與本書中vl6版對比，并解

釋React為何做

出這些改進。

參考書目：

7、深入React技術(shù)棧，陳屹，人民郵電出版社

8、React+Node.js開發(fā)實戰(zhàn)：從入門到項目上線，袁林，尹皓，陳寧，機械工

業(yè)出版社

9、深入淺出React和Redux,程墨，機械工業(yè)出版社

《React基礎(chǔ)教程》教案

課時安排：1學(xué)時教學(xué)課型：專業(yè)課

題目（教學(xué)章、節(jié)或主題）：

組件事件管理

教學(xué)目標(biāo)（分掌握、熟悉、了解三個層次）

17、了解React的事件處理；

18、掌握React的事件綁定；

19、掌握React的事件代理機制；

20、掌握React的合成事件；

21、熟悉React如何響應(yīng)其他事件。

教學(xué)內(nèi)容：

17、事件處理（15分鐘）：

（5）介紹React的事件處理程序的內(nèi)容、命名方式和重要性，并通過實例與

傳統(tǒng)HTMLDOM事件處理進行對比，引導(dǎo)學(xué)生加深理解。

（6）逐一介紹React支持的常用事件，可引導(dǎo)學(xué)生自己編寫實現(xiàn)部分事件。

18、事件綁定（10分鐘）：

（1）回顧介紹4.1節(jié)中的例子，介紹bind。事件綁定的重要性。

（2）介紹事件綁定的定義以及不需要綁定的場景，通過實例加深學(xué)生的理

解。

19、事件代理（5分鐘）

介紹事件代理機制的定義以及具體使用方法。

20、合成事件（5分鐘）

介紹React針對跨瀏覽器的兼容問題給出的解決方案一合成事件，以及

合成事件的屬性。

21、響應(yīng)其他事件（10分鐘）：

通過實例詳細(xì)介紹了對于React不支持的事件如何進行響應(yīng)，引導(dǎo)學(xué)生自

己用代碼實現(xiàn)。

教學(xué)方式：

根據(jù)學(xué)生實際，注重引導(dǎo)自學(xué)，注重啟發(fā)思維

教學(xué)媒介：

課程PPT講義

教學(xué)重難點：

1、React對事件處理的原理和方法

2、React建立的獨立的事件系統(tǒng)

討論、思考題、作業(yè)：

1、通過鼠標(biāo)事件實現(xiàn)個可拖放的＜div＞。

2、通過props的傳遞，將父組件定義的狀態(tài)和事件處理函數(shù)傳遞給子組件。

參考書目：

10、深入React技術(shù)棧，陳屹，人民郵電出版社

11、React+Nodejs開發(fā)實戰(zhàn)：從入門到項目上線，袁林，尹皓，陳寧，機械工

業(yè)出版社

12、深入淺出React和Redux,程墨，機械工業(yè)出版社

《React基礎(chǔ)教程》教案

課時安排：1.5學(xué)時教學(xué)課型：專業(yè)課

題目(教學(xué)章、節(jié)或主題)：

React表單

教學(xué)目標(biāo)(分掌握、熟悉、了解三個層次)

22、掌握React表單的使用方法；

23、掌握React表單元素；

24、掌握表單事件響應(yīng)；

25、了解可控組件；

26、了解不可控組件。

教學(xué)內(nèi)容：

22、使用表單(15分鐘)：

(1)介紹HTML表單的定義和使用方法，通過實例加深學(xué)生的印象。

(2)通過實例詳細(xì)介紹在React中表單的使用方法，特別是表單的事件處理

程序。

23、表單元素(15分鐘):

(1)介紹HTML中用于用戶輸入的表單元素，通過實例加深學(xué)生的印象。

(2)講解React對上述表單元素提供的特別支持，即可變屬性。

(3)講解同樣的表單元素，在HTML和React中不同的表現(xiàn)，并通過實例加

深學(xué)生的印象。

24、表單事件響應(yīng)(15分鐘)：

介紹React事件響應(yīng)是什么，以及表單組件如何使用，特別是若多個元素

調(diào)用同一個事件處理程序時如何復(fù)用。

(3)bind復(fù)用

通過實例介紹了bind()函數(shù)如何標(biāo)注事件源實現(xiàn)復(fù)用。

(4)name復(fù)用

通過實例詳細(xì)介紹了name復(fù)用的方法。

25、可控組件(10分鐘):

(1)深入介紹如何判斷組件是否可控。

(2)通過實例介紹可控組件及其優(yōu)點。介紹針對可控組件如何獲取表單中用

戶的輸入內(nèi)容。

26、不可控組件(10分鐘)：

(1)講解不可控組件的判斷方法。

(2)通過實例詳細(xì)介紹針對不可控組件，如何通過「ef引用獲取用戶輸入的

值。

教學(xué)方式：

根據(jù)學(xué)生實際，注重引導(dǎo)自學(xué)，注重啟發(fā)思維

教學(xué)媒介：

課程PPT講義

教學(xué)重難點：

1、掌握React對表單中的事件響應(yīng)函數(shù)的復(fù)用。

2、熟練掌握React的表單處理。

討論、思考題、作業(yè)：

1、React推薦使用onChange事件而不是onlnput事件，這是為什么？

2、用程序?qū)崿F(xiàn)使用受控毋件方式和非受控組件方式，在表單提交時，獲取表單

的值并提交至服務(wù)器。

3、使用本地數(shù)據(jù)或者使用Mockjs庫模擬遠程請求，實現(xiàn)一個省、市、區(qū)/縣

聯(lián)動的地址選擇組件。

參考書目：

13、深入React技術(shù)棧，陳屹，人民郵電出版社

14、React+Nodejs開發(fā)實戰(zhàn)：從入門到項目上線，袁林，尹皓，陳寧，機械工

業(yè)出版社

15、深入淺出React和Redux,程墨，機械工業(yè)出版社

《React基礎(chǔ)教程》教案

課時安排：1學(xué)時教學(xué)課型：專業(yè)課

題目（教學(xué)章、節(jié)或主題）：

組件嵌套和動態(tài)組件

教學(xué)目標(biāo)（分掌握、熟悉、了解三個層次）

27、掌握組件嵌套的形式和內(nèi)在邏輯關(guān)系；

28、掌握動態(tài)組件的表達形式和應(yīng)用場景；

29、掌握動態(tài)組件與靜態(tài)組件的區(qū)別。

教學(xué)內(nèi)容：

27、組件嵌套（10分鐘）:

classLessonextendsReact.Component{

render(){

return(ul(LessonList組件)

<li>{}</li>屬性傳遞

(Lesson組件)

)；

(lesson組件)

classLessonListextendsReact.Component{

render(){

return(

<Lessonname="大學(xué)語文"></Lesson>

<Lessonname="i^j等數(shù)學(xué)”></Lesson>

</ul>

)；

結(jié)合代碼和圖形講解組成關(guān)系和屬性傳遞關(guān)系。

28、動態(tài)組件（25分鐘）:

（5）表現(xiàn)形式

classStudentListextendsReact.Component{

render(){

return(

<ul>

{ps.children}

ReactDOM.renderf

<StudentList>

〈Student〉張三〈/Student〉

(Student〉李四〈/Student〉

</StudentList>,

document.getElementByld('reactContainer')

)；

結(jié)合源代碼和圖形講解聲明方法和組成關(guān)系。

classStudentListextendsReact.Component{

render(){

return(

<ul>

分析動態(tài)組件的屬性傳遞關(guān)系。

講解注意事項,key值要聲明,其背后原理涉及重新創(chuàng)建dom還是修改已有dom。

29、動態(tài)組件和靜態(tài)組件的區(qū)別（10分鐘）：

表現(xiàn)形式

使用條件

應(yīng)用場景

教學(xué)方式：

根據(jù)學(xué)生實際，注重引導(dǎo)自學(xué)，注重啟發(fā)思維

教學(xué)媒介：

課程PPT講義

教學(xué)重難點：

1、*動態(tài)組件聲明、封裝關(guān)系和屬性傳遞邏輯

2、#動態(tài)組件和靜態(tài)組件的對比分析

討論、思考題、作業(yè)：

1、*動態(tài)組件為什么要聲明key,不聲明有什么后果

參考書目：

16、深入React技術(shù)棧，陳屹，人民郵電出版社

17、React+Node.js開發(fā)實戰(zhàn)：從入門到項目上線，袁林，尹皓，陳寧，機械工業(yè)出

版社

18、深入淺出React和Redux,程墨，機械工業(yè)出版社

《React基礎(chǔ)教程》教案

課時安排：1學(xué)時教學(xué)課型：專業(yè)課

題目（教學(xué)章、節(jié)或主題）

組件間通信

教學(xué)目標(biāo)（分掌握、熟悉、了解三個層次）

30、了解組件間通信的各種形式；

31、掌握事件回調(diào)、公開組件功能的通信方式；

32、掌握動態(tài)參數(shù)傳遞的使用方法。

教學(xué)內(nèi)容：

30、事件回調(diào)機制(15分鐘)：

classChildComponentextendsReact.Component{

constructor(props){

super(props);

this.handleClick=this.handleClick.bind(this);

}

父組件...

handleClick(){

屬性

if(ps.onClick){onClick

ChildComponent組件

ps.onClick();

)handleClick響應(yīng)函數(shù)

}用戶Click事件

Button元素

t=>

render(){

return(

<buttononClick={this.handleClick}>點擊我通知父組件〈/button〉);

}

}

classParentcomponentextendsReact.Component{

onChildClicked(){

alertC父組件收到了從子組件的點擊事件。

)

render(){

return(

<div>父組件父組件…

<ChildComponent

onClick={this.onChildClicked}/>onClick屬性

Childcomponent組件

</div>

)；”handleClick響應(yīng)函|數(shù)

)用戶Click事件

})Button元素

結(jié)合代碼和圖形講解組成關(guān)系和事件激發(fā)流程。事件回調(diào)是基本機制。

復(fù)習(xí)前面以講過的bind函數(shù)原理。

事件的激發(fā)源頭通常是DOM元素。

31、公開組件功能（25分鐘）：

父組件通過ref屬性獲得子組件實例的引用，從而直接調(diào)用子組件的成員函數(shù)

父組件通過ref屬性獲得子組件實例的引用，從而直接調(diào)用子組件的成員函數(shù)

classTodosextendsReact.Component{

constructor(props){

super(props);render(){

this.state={items:['Apple','Banana']};return(<div>

){this.state.items.map(function(itemzi){

varboundClick=

handleClick(index){this.handleClick.bind(this,i);

varitems=this.state.items.filter(return(

function(itemzi){returnindex!==i;});<TodoltemonClick={boundClick}key={i}

this.setState({items:items},function(){title={item}ref={'item'+i}/>

if(items.length===1){)；

〃此處調(diào)用了組件的animate函數(shù)},this))

this.refs.itemO.animate();</div>

))；

}.bind(this));1

)

})；

分析動態(tài)組件的屬性傳遞關(guān)系。

講解注意事項,key值要聲明。其背后原理涉及重新創(chuàng)建dom還是修改已有dom。

32、動態(tài)參數(shù)傳遞

父組件向子組件傳遞參數(shù)時，有時參數(shù)名稱是作為變量出現(xiàn)的，無法預(yù)先明確

下來，這就是動態(tài)的參數(shù)傳遞。

動態(tài)參數(shù)傳遞的方法是使用屬性展開方法，注意需要加入特殊的“…”標(biāo)識符。

直接傳遞一個屬性對象。

return<Component{...ps}more="values"/>

使用ES6規(guī)范中解構(gòu)賦值

中的剩余屬性特性來把未知

屬性批量提取出來。下面的

var{checked,...other}=ps;

示例將ps中除了return<Component{...other}attrMore="values"/>

checked屬性之外的其他屬性

復(fù)制到other變量中再傳遞給

組件。如果上面的other對象中也含有atlrMore屬性,

則會被覆蓋。這里的順序很重要，把{...other}

注意：這里的“…”表示剩余屬性,放到JSXprops前面可以保證它不被覆蓋。

與上例中出現(xiàn)的…展開屬性是不一

樣的。

教學(xué)方式：

根據(jù)學(xué)生實際，注重引導(dǎo)自學(xué)，注重啟發(fā)思維

教學(xué)媒介：

課程PPT講義

教學(xué)重難點：

1、*組件間各種通信方式的對比和應(yīng)用場景

2、#結(jié)合JavaScript解構(gòu)語法理解動態(tài)參數(shù)傳遞

3、#理解動態(tài)組件為什么需要Key值

討論、思考題、作業(yè)：

1、*動態(tài)組件為什么要聲明key,不聲明有什么后果

參考書目：

19、深入React技術(shù)棧，陳屹，人民郵電出版社

20、React+Node.js開發(fā)實戰(zhàn)：從入門到項目上線，袁林，尹皓，陳寧，機械工業(yè)出

版社

21、深入淺出React和Redux,程墨，機械工業(yè)出版社

《React基礎(chǔ)教程》教案

課時安排：1學(xué)時教學(xué)課型：專業(yè)課

題目（教學(xué)章、節(jié)或主題）：

組件邏輯復(fù)用

教學(xué)目標(biāo)（分掌握、熟悉、了解三個層次）

33、了解組件邏輯復(fù)用的各種形式、優(yōu)劣點和使用場景；

34、了解mixins復(fù)用的基本原理和使用流程；

35、熟悉渲染屬性的用法。

36、掌握Context機制。

37、了解Hook、Store等其他邏輯復(fù)用方法。

教學(xué)內(nèi)容：

33、邏輯復(fù)用介紹（5分鐘）

邏輯復(fù)用是指組件之間共享的業(yè)務(wù)邏輯和流程，區(qū)分業(yè)務(wù)層面和技術(shù)層面的邏

輯復(fù)用。邏輯復(fù)用是簡化維護的方式之一，但并不一定在所有的場景都要追求邏輯復(fù)

用，需要根據(jù)不同的應(yīng)用場景分析。

組件是React中復(fù)用代碼的最佳方式，但有時一些復(fù)雜的組件間也需要共用一

些功能或具有一些共同的行為，如輸出日志等，有時這也稱為跨切面關(guān)注點。

34、mixins機制（15分鐘）:

varTickTock=React.createClass({ComponentA組件

mixins:[SetlntervalMixin],//MJmixin

getlnitialState:function(){

return{seconds:0};mixins

},

componentDidMount:function(){ComponentB組件

〃調(diào)用mixin中的方法

this.setlnterval(this.tick,1000);varSetlntervalMixin={

},componentWillMount:function(){

tick:function(){

ervals=(];

this.setState({seconds:this.state.seconds+1});

},

},setinterval:functionf){

render:function(){ervals.push(setlnterval.apply(null,

return(

arguments));

<P>

己經(jīng)運行了秒.}.

React{this.state.seconds}componentW川Unmount:function。{

</p>ervals.map(clearlnterval);

)；

)

n：

混入次序問題：SetlntervalMixin混入器中也定義了componentWillMount()函

數(shù)。在這種情況下，React會優(yōu)先執(zhí)行mixin混入器中的componentWillMount()函

數(shù)。如果組件的mixins屬性中定義了多個mixin混入器，則按聲明的順序依次執(zhí)行,

最后執(zhí)行組件本身的函數(shù)。

如果一個組件使用了多個mixin混入器，并且有多個mixin混入器定義了同樣的

生命周期方法(例如，多個mixin混入器都需要在組件銷毀時做資源清理操作)，那

么所有這些生命周期方法都會被執(zhí)行。執(zhí)行方法是首先在mixin屬性中引入順序執(zhí)行

mixin混入器中的方法，最后執(zhí)行組件內(nèi)定義的方法。

缺點：多個組件在共享邏輯的同時，多個mixin混入器也共享了同一個對象的數(shù)

據(jù)狀態(tài)，這很容易導(dǎo)致這個數(shù)據(jù)狀態(tài)被不同mixin混入器改變，產(chǎn)生沖突。

35、渲染屬性(5分鐘)

渲染屬性是組件的一種屬性，但與普通屬性不同的是，渲染屬性的值為函數(shù)，這

個函數(shù)在組件渲染時被調(diào)用。利用渲染屬性，也可以在組件間共享代碼邏輯。通過渲

染屬性傳遞特殊的函數(shù)，可以達到給原有組件“注入”代碼邏輯的目的。

渲染屬性主要注入的是渲染邏輯，這也大大限制了其使用場合。

這是一種特殊機制，了解即可。

classDataProviderextendsReact.Component{

constructor(props){

super(props);

this.state={name:'test'};

)

render(){

return(

<div>{ps.renderprop(this.state)}</div>

)

)

)

<DataProviderrenderp,op={

data=>(

〃這里渲染的內(nèi)容獨立「DataProvider組件

<MyCompname={}/>

)

)

</DataProvidpr>

36、Context機制

Context：跨級通信組件之間可共享的數(shù)據(jù)結(jié)構(gòu)。

Conlexl生產(chǎn)者

Context生產(chǎn)者(Provider),

父組件…

通常是一個父級組件,

Context

Childcomponent組件

Context消費者(Consumer),

通常是一個或者多個子孫組件。

AscendCorrponent*(onUxt消費者

組件

生產(chǎn)者消費者模式

classButtonextendsReact.Component{

constructor(props){

super(props);

//使用context時予級組件必須指定context的數(shù)據(jù)類型Context生產(chǎn)者

Button.contextTypes={

color:React.PropTypes.string

)

)

render{){

return(

〃使由this.context來獲取context數(shù)據(jù)

<buttonstyle={{background:this.context.color}}>

{ps.children}

</button>

)；

)生產(chǎn)者消費者模式

)

理解：Context可以看作跨級通信組件之間可共享的數(shù)據(jù)結(jié)構(gòu)。在Context機制

中，有兩類組件協(xié)同發(fā)揮作用，一類稱為Context的生產(chǎn)者（Provider）,通常是一個

父組件；另一類稱為Con:ext的消費者（Consumer）,通常是一個或者多個子孫組件。

從這個意義上來說，Context基于生產(chǎn)者/消費者模式。

限制條件：生產(chǎn)者與消費者之間要建立約定的關(guān)系

37、其他通信方式（5分鐘）：

Hook技術(shù)、Store機制

教學(xué)方式：

根據(jù)學(xué)生實際，注重引導(dǎo)自學(xué)，注重啟發(fā)思維

教學(xué)媒介：

課程PPT講義

教學(xué)重難點：

1、Context機制的使用場景、先決條件和需要滿足的約束

2、#渲染屬性

討論、思考題、作業(yè)：

1>"Context機制是如何實現(xiàn)的

參考書目：

22、深入React技術(shù)棧，陳屹，人民郵電出版社

23、React+Node.js開發(fā)實戰(zhàn)：從入門到項目上線，袁林，尹皓，陳寧，機械工業(yè)出

版社

24、深入淺出React和Redux,程墨，機械工業(yè)出版社

《React基礎(chǔ)教程》教案

課時安排：1學(xué)時教學(xué)課型：專業(yè)課

題目（教學(xué)章、節(jié)或主題）：

高階組件

教學(xué)目標(biāo)（分掌握、熟悉、了解三個層次）

38、熟悉高階組件的概念和出發(fā)點；

39、掌握高階組件的原理和寫法；

40、掌握高階組件的典型應(yīng)用場景。

教學(xué)內(nèi)容：

38、高階組件

高階組件是“包裹”現(xiàn)有組件生成新組件的一種方式，即以組件為參數(shù)的組件,

可以達到不影響原組件而增加業(yè)務(wù)邏輯的目的。

高階組件具有種種優(yōu)點，在實際開發(fā)中應(yīng)用廣泛C

事實上，高階組件不僅是一種機制，更是一種組件聲明風(fēng)格。

（1）概念

需求：對現(xiàn)有某個組件增加或修改功能

條件：這種改動不應(yīng)該影響到現(xiàn)有的其它依賴于原組件的組件。

classNewWrapComponentextendsReact.Component{

extendFunc(){

〃增加或修改的功能實現(xiàn)

新組件

}NewWrapComponent

OldComponent組件

render(){

return<OldComponent{...ps}/>

)

)

特點：定于OldComponent組件的

問題:如果有更多而組■件，如OldComponent2、OldComponent3H'I,我們都

要在這些組件中每個都增加extendFunc邏輯嗎？

假想：如果將OldComponent作為一個變量呢，是不是就可以達到一次聲明，

多次使用的效果？

利用JavaScript語言提供的動態(tài)特性，將組件類型作為變量，通過函數(shù)完成封裝

functionhnc(Cnmp){

returnclassNewCcmponentextendsReact.Component{

extendFunc(){

高階組件

render(){Comp組件

return(

<Comp{...ps}/>

)

高階組件：以組件作為變量的組件，可以

)

看作是更高層次組件的生成器。

}

)

組件樹的嵌套雖然多了一層或多層，但是

使用(組件名首字母大寫)：實際渲染出來的DOM結(jié)構(gòu)并沒有改變。使

用多層高階組件不會影響輸出的DOM結(jié)構(gòu)，

constNewComponent=hoc(Comp)；

對性能也沒有影響。

使用高階組件技術(shù)重寫mixins,對比：

Mixins例子重寫

functionmixin(comp){

高階組件

returnfunction(Coinp){

returnclassextendsReact.Component{

Comp組件

componentWillMount:function(){

ervals=[];

)

setinterval:function(){

ervals.push(setlnterval.apply(null,arguments));

)

componentWillUnmount:function(){

ervals.map(clearlnterval);

)

render(){

return<Comp{...ps}/>使用(組件名首字母大寫)：

}

}constNewMixinsComp=mixin(OldComp);

)

)

(2)應(yīng)用：屬性轉(zhuǎn)換器

為組件增加屬性轉(zhuǎn)換特性，轉(zhuǎn)換函數(shù)作為參數(shù)傳入

functiontransProps(transFn){

returnfunction(Comp){

returnclassextendsReact.Component{

高階組件

renderf){

return<Comp{...transFn(ps)}/>

Comp組件

)

)

)

使用(組件名首字母大寫)：

constNewAdapter=transProps(transPropsFu)(OldComp);

此寫法在函數(shù)的基礎(chǔ)上又增加了一階函數(shù)，以此將transPropsFu屬性轉(zhuǎn)換邏輯

與QdComp組件邏輯分離開，各階函數(shù)各司其職，代碼關(guān)注點更明確?？梢?，

借助高階組件，代碼的結(jié)構(gòu)、邏輯更清晰。

(3)應(yīng)用：異步數(shù)據(jù)請求

通過例子引入問題:

classStudentListextendsReact.Component{

constructor(props){

superf);

this.state={

listData:[]

)高階組件

}

componentDidMount(){Comp組件

loadStudents()

.then(data=>

this.setState({listData:data.studentList})

)問題？

)數(shù)據(jù)請求方式可不止Fetch一種

render(){

return(結(jié)果數(shù)據(jù)格式也可能不?樣

<Listlist={this.state.listData}/>

)

)

)

使用高階組件解決：

functionhocListWithCata({dataLoader,getListFromResultData}){

returnComp=>{

returnclassextendsReact.Component{

constructor(props){高階組件

super();

this.state={Comp組件

resultData:undefined

}

)

componentDidMount(){

dataLoader(data->this.setState({resultData:data}))

)

render(){

return(

<Comp{...getListFromResultData(this.state.resultData)}{...ps}/>

)

)

)

functionhocListWithData({dataLoader,getListFromResultData}){

returnComp=>{

returnclassextendsReact.Component{constStudentList=hocListWithData({

constructor(props){dataLoader:loadstudents,

super();

getListFromResultData:result=>({listData:

this.state={result.studentList})

resultData:undefined})(List);

)

}constLessonList=hocListWithData({

componentDidMountO{

dataLoader:loadLessons,

dataLoader(

getListFromResultData:result=>({listData:

data=>this.sctStatc({rcsultDato:dota}))

result.lessonList})

)})(List);

render(){

return(

<Comp{...getListFromResultData(this.state.resultData)}{...ps}/>

}

)

)

39、小結(jié)

主要內(nèi)容重點

參數(shù)傳遞

React組件復(fù)用事件回調(diào)

原理與應(yīng)用

重點掌握根據(jù)不同的應(yīng)用場景采取對應(yīng)的解決方法

教學(xué)方式：

根據(jù)學(xué)生實際，注重引導(dǎo)自學(xué)，注重啟發(fā)思維

教學(xué)媒介：

課程PPT講義

教學(xué)重難點：

1、*高階組件的概念和出發(fā)點

2、#函數(shù)式編程的特點

3、#異步數(shù)據(jù)請求的高階組件實現(xiàn)

討論、思考題、作業(yè)：

1、*高階組件與架構(gòu)思想

參考書目：

25、深入React技術(shù)棧，陳屹，人民郵電出版社

26、React+Nodejs開發(fā)實戰(zhàn)：從入門到項目上線，袁林，尹皓，陳寧，機械工業(yè)出

版社

27、深入淺出React和Redux,程墨，機械工業(yè)出版社

《React基礎(chǔ)教程》教案

課時安排：1學(xué)時教學(xué)課型：專業(yè)課

題目(教學(xué)章、節(jié)或主題)：

組件嵌套和動態(tài)組件

教學(xué)目標(biāo)(分掌握、熟悉、了解三個層次)

41、掌握組件嵌套的形式和內(nèi)在邏輯關(guān)系；

42、掌握動態(tài)組件的表達形式和應(yīng)用場景；

43、掌握動態(tài)組件與靜態(tài)組件的區(qū)別。

44、掌握模態(tài)對話框組件設(shè)計。

教學(xué)內(nèi)容：

40、組件嵌套(20分鐘)：

(7)按鈕的HTML表示

介紹按鈕的三種HTML表示的發(fā)展背景，簡要分析特點，講解事件掛接

方法和this指針問題。

(8)按鈕設(shè)計的需求分析

對按鈕的需求進行分析，以此為實例培養(yǎng)學(xué)生建立需求分析的概念和基

本思路。

(9)按鈕組件控制屬性和約束

對本課程前面部分的復(fù)習(xí)和回顧，通過實例加深學(xué)生的印象，并強調(diào)組件

封裝的黑箱概念。

(10)按鈕組件的事件響應(yīng)

對本課程前面部分的復(fù)習(xí)和回顧，通過實例加深學(xué)生的印象，并強調(diào)組件

封裝的黑箱概念。

(11)按鈕組件設(shè)計小結(jié)

強調(diào)組件封裝的黑箱概念，通過入口(屬性)、出口(事件)、組件結(jié)構(gòu)(聲

明，關(guān)系)形成體系性的思路和概念。

(12)延伸設(shè)計，開拓思路

按鈕組件的增強設(shè)計，商業(yè)按鈕組件的拓展。

41、對話框組件設(shè)計(25分鐘)：

(6)對話框基本實現(xiàn)原理

介紹遮罩思路和控制邏輯。

(7)對話框組件設(shè)計的需求分析

介紹界面交互中對話框的使用場景，結(jié)合手機AFP界面進行對比分析。

(8)對話框組件控制屬性和約束

將需求分析落地為設(shè)計，建立學(xué)生的思維轉(zhuǎn)換模型。

(9)對話框組件的事件響應(yīng)

將需求分析落地為設(shè)計，結(jié)合前面學(xué)到的知識，建立學(xué)生的思維轉(zhuǎn)換模型。

(10)對話框組件的控制邏輯實現(xiàn)

將需求分析落地為設(shè)計，結(jié)合前面學(xué)到的知識，體現(xiàn)封裝思想。

(11)對話框組件設(shè)計小結(jié)、分析和延伸設(shè)計

對話框組件的增強設(shè)計，介紹商業(yè)對話框組件的拓展。

教學(xué)方式：

根據(jù)學(xué)生實際，注重引導(dǎo)自學(xué)，注重啟發(fā)思維

教學(xué)媒介：

課程PPT講義

教學(xué)重難點：

1、*對話框?qū)?yīng)的Div元素掛接對象及實現(xiàn)

2、#組件的基本封裝方式

討論、思考題、作業(yè)：

1、*對話框?qū)?yīng)的Div元素掛接對象為什么是Body,如何實現(xiàn)

參考書目：

28、深入React技術(shù)棧，陳屹，人民郵電出版社

29、React+Nodejs開發(fā)實戰(zhàn)：從入門到項目上線，袁林，尹皓，陳寧，機械工

業(yè)出版社

30、深入淺出React和Redux,程墨，機械工業(yè)出版社

《React基礎(chǔ)教程》教案

課時安排：1學(xué)時教學(xué)課型：專業(yè)課

題目（教學(xué)章、節(jié)或主題）：

樹形組件設(shè)計

教學(xué)目標(biāo)（分掌握、熟悉、了解三個層次）

45、熟悉樹形組件的使用場景；

46、掌握父子組件關(guān)系邏輯；

47、掌握嵌套組件關(guān)系邏輯；

48、掌握樹形組件使用。

教學(xué)內(nèi)容：

42、樹形組件的使用場景

具有層級關(guān)系的二維數(shù)組表示常用。

43、樹形組件的需求分析

對樹形組件的需求進行分析，以此為實例培養(yǎng)學(xué)生建立需求分析的概念

和基本思路。

44、樹形組件控制屬性和約束

對本課程前面部分的復(fù)習(xí)和回顧，通過實例加深學(xué)生的印象，并強調(diào)組件

封裝的黑箱概念。

45、樹形組件的事件響應(yīng)

對本課程前面部分的復(fù)習(xí)和回顧，通過實例加深學(xué)生的印象，并強調(diào)組件

封裝的黑箱概念。

46、樹形組件設(shè)計小結(jié)

強調(diào)組件封裝的黑箱概念、組件嵌套和父子組件的概念與區(qū)別，形成體系

性的思路和概念。

47、延伸設(shè)計，開拓思路

樹形組件的增強設(shè)計，商業(yè)樹形組件的拓展。

教學(xué)方式：

根據(jù)學(xué)生實際，注重引導(dǎo)自學(xué)，注重啟發(fā)思維

教學(xué)媒介：

課程PPT講義

教學(xué)重難點：

1、*組件嵌套的概念及實現(xiàn)

2、#父子組件的關(guān)系邏輯和通信方式

討論、思考題、作業(yè)：

1、*組件嵌套，組件實例包含的區(qū)別

2、查看商業(yè)樹形組件實現(xiàn)的源代碼

3考慮實現(xiàn)個樹形列表組件

參考書目：

31、深入React技術(shù)棧，陳屹，人民郵電出版社

32、React+Node.js開發(fā)實戰(zhàn)：從入門到項目上線,袁林，尹皓，陳寧，機械工

業(yè)出版社

33、深入淺出React和Redux,程墨，機械工業(yè)出版社

《React基礎(chǔ)教程》教案

課時安排：1學(xué)時教學(xué)課型：專業(yè)課

題目（教學(xué)章、節(jié)或主題）：

表格及分頁組件設(shè)計

教學(xué)目標(biāo)（分掌握、熟悉、了解三個層次）

49、熟悉表格組件的使用場景；

50、掌握復(fù)雜復(fù)合組件的關(guān)系邏輯梳理和設(shè)計；

51、掌握表格組件使用。

教學(xué)內(nèi)容：

48、表格組件的使用場景

二維數(shù)組表示常用，許多行時考慮配合分頁組件使用。分頁實現(xiàn)的兩種形

式。

49、表格組件的需求分析

對表格組件的需求進行分析并對復(fù)雜的需求進行分解，并最終對應(yīng)到組

件，以此為實例培養(yǎng)學(xué)生建立需求分析和復(fù)雜問題分解的概念和基本思路。

50、表格組件的組成要素

對表格組件的組成進行分析，明確組件的邊界，貫徹組件職責(zé)應(yīng)單一的設(shè)

計理念，以此為實例培養(yǎng)學(xué)生分析復(fù)雜問題的概念和基本思路“

51、表格組件控制屬性的傳遞和約束

組件控制屬性的傳遞，區(qū)分內(nèi)外部邏輯，通過實例加深學(xué)生的理解，并再

次強調(diào)組件封裝的黑箱概念。

52、表格組件的事件響應(yīng)

區(qū)分內(nèi)外部事件，外部事件是設(shè)計時未知的，而內(nèi)部事件是設(shè)計時已知和

明確的。

53、表格組件設(shè)計小結(jié)

強調(diào)組件封裝的黑箱概念、復(fù)雜組件的設(shè)計思路，組件邊界分析、組件職

責(zé)分析，形成體系性的思路和概念。

54、延伸設(shè)計，開拓思路

表格的增強設(shè)計，蔻業(yè)表格組件的拓展。

教學(xué)方式：

根據(jù)學(xué)生實際，注重引導(dǎo)自學(xué)，注重啟發(fā)思維

教學(xué)媒介：

課程PPT講義

教學(xué)重難點：

1、*復(fù)雜組件的關(guān)系邏輯梳理

2、#內(nèi)部組件的邊界分析和職責(zé)分析

討論、思考題、作業(yè)：

1、*如何分解和設(shè)計內(nèi)部組件

2、查看商業(yè)表格組件實現(xiàn)的源代碼

3、考慮實現(xiàn)一個樹形列表組件

參考書目：

34、深入React技術(shù)棧，陳屹，人民郵電出版社

35、React+Node.js開發(fā)實戰(zhàn)：從入門到項目上線，袁林,尹皓，陳寧,機械工

業(yè)出版社

36、深入淺出React和Redux,程墨，機械工業(yè)出版社

《React基礎(chǔ)教程》教案

課時安排：1學(xué)時教學(xué)課型：專業(yè)課

題目（教學(xué)章、節(jié)或主題）：

綜合示例

教學(xué)目標(biāo)（分掌握、熟悉、了解三個層次）

52、熟悉常用典型組件使用場景；

53、掌握聯(lián)動組件的控制邏輯。

教學(xué)內(nèi)容：

55、聯(lián)動組件的使用場景

對各個組件的組合使用，通過控制邏輯形成聯(lián)動。

56、左樹右表示例的需求分析

左邊的樹形組件用于從體系中選擇對象（班級），右邊顯示對象的數(shù)據(jù)（學(xué)

生）。通過節(jié)點選擇變更事件驅(qū)動界面更新。

57、左樹右表示例的實現(xiàn)邏輯