尚硅谷React學(xué)習(xí)筆記

本文檔為視頻學(xué)習(xí)筆記、需結(jié)合嗶哩嗶哩尚硅谷react教程視頻閱讀使用

react簡介

react是干什么的

react是用于構(gòu)建界面的js庫——只關(guān)注視圖

以往展示信息的步驟

  1. 發(fā)送請求獲取數(shù)據(jù)

  2. 處理數(shù)據(jù)

  3. 操作dom進行渲染

react只關(guān)注第三步。前兩部還需要之前的知識去做，react只幫忙操作dom。

——react是一個將數(shù)據(jù)渲染為html視圖開源js庫

react的好處

原生js的痛點

  1. 原生js操作domfan所、效率低（通過dom-api操作ui）

  2. 使用js直接操作dom，瀏覽器會進行大量的重繪重排

  3. 原生js沒有組件化的編碼方案，代碼復(fù)用率低

react的特點

  1. 采用組件化模式、聲明式編碼，提高開發(fā)效率以及組件復(fù)用率。

    以前用的是命令式編程，也就是每一步都要自己做（獲取dom——改變顏色），但是聲明式編碼只需要說明這個dom應(yīng)該是什么顏色。

  2. 在react native中可以使用react語法進行移動端開發(fā)。

  3. 使用虛擬DOM+優(yōu)秀的Diffing算法，盡量減少與真實DOM的交互。

    虛擬dom存放在內(nèi)存中。

    react使得數(shù)據(jù)變化時，瀏覽器只需要更新變化的部分，不需要整個重繪

    diffing算法是用來進行虛擬DOM比較的

學(xué)習(xí)react之前要掌握的js基礎(chǔ)知識

1.判斷this指向

2.Class類

3.Es6語法規(guī)范

4.Npm包管理器

5.原型、原型鏈

6.數(shù)組常用方法

7.模塊化

hello_react案例

react中js文件作用

  1. babel.js用于es6轉(zhuǎn)es5，在react時用于jsx轉(zhuǎn)js

  2. react.development.js是react核心庫

  3. react-dom.development.js是react的擴展庫。用于操作dom

通過腳手架搭建一個react項目

通過引入js文件搭建一個新的react項目

  1. 新建一個文件夾hello_react。用vscode打開

  2. 在hello_react新建一個js文件夾，將babel.js、react.development.js、react-dom.development.js拖拽到這個js文件夾下面。

注意點

1. <script type="text/babel">

Type是text/babel

2. <script type="text/javascript" src="../js/react.js"></script>

<script type="text/javascript" src="../js/react-dom.js"></script>

先引入react，再引入react-dom

3. //1.創(chuàng)建虛擬dom

const VDOM=<h1>Hello,React</h1>//不寫引號，因為不是字符串

虛擬dom不寫引號，相當于直接放進去

4. ReactDOM.render(VDOM,document.getElementById('test'))

Reder語法

虛擬DOM的兩種創(chuàng)建方式

  1. 用jsx創(chuàng)建虛擬dom

    const VDOM=<h1 id="title">Hello,React</h1>//不寫引號，因為不是字符串

  2. 原生js創(chuàng)建虛擬dom

  3. 原生的js不需要引入babel

    <script type="text/javascript" src="../js/react.js"></script>

    <script type="text/javascript" src="../js/react-dom.js"></script>

所以script type也回歸text/javascript

<script type="text/javascript">

  1. 用React.creatElement()函數(shù)來創(chuàng)建虛擬DOM

    const VDOM=React.createElement(標簽名，標簽屬性，標簽內(nèi)容)

    示例如下：

const
VDOM=React.createElement('h1',{id:'title',className:'tclass'},'hello,React')//不寫引號，因為不是字符串

示例2：

const
VDOM=React.createElement('h1',{id:'title',className:'tclass'},React.createElement('span',{},'he11llo,React'))//不寫引號，因為不是字符串

4.虛擬DOM與真實DOM

1.虛擬DOM就是一個普通的JS對象

2.虛擬DOM比較輕，真實DOM上面的屬性比較多。因為虛擬DOM是react內(nèi)部使用，無需那么多屬性。

3.虛擬DOM會被react轉(zhuǎn)化為真實DOM，渲染到瀏覽器中。

5.JSX的語法規(guī)則

Js+xml js的一種擴展語法 標簽名任意：html標簽或其他標簽

作用

用來簡化虛擬DOM的創(chuàng)建

Jsx語法

  1. 定義虛擬DOM的時候不能寫引號

  2. 標簽中混入js表達式時要用花括號，例如：

const myId='TiTLEd'

const myContent='hEllO,ReaCT11111'

//1.創(chuàng)建虛擬dom

const VDOM=(

<h1 id={myId.toLowerCase()}>

<span>{myContent.toLowerCase()}</span>

</h1>

)

  1. js里面的樣式類名不要用class（因為es6里面class是類，重復(fù)了）

    要用className

  2. 內(nèi)嵌的css樣式，要用雙括號括起來{{}}

    外層{}表示接下來要加入的是js語句

    內(nèi)層括號是因為style的值一般是鍵值對，是一個對象

    background-color 要用backgroundColor

font-size要用fontSize ——小駝峰

const VDOM=(

<h1 id={myId} style={{backgroundColor:'black'}}>

<span
style={{color:'yellow',fontSize:'15px'}}>{myContent.toLowerCase()}</span>

</h1>

)

  1. 虛擬dom只能有一個根標簽

  2. 標簽必須閉合

  3. 標簽首字母

    1. 小寫字母開頭，會將標簽轉(zhuǎn)換成html中的同名標簽。如果html里面沒有同名標簽，則報錯

    2. 如果是大寫字母開頭，React就會渲染對應(yīng)的組件，如果沒有定義，就會報錯

6.JSX小練習(xí)

1.VDOM中放入數(shù)組會直接遍歷

2.可以通過{{}}放入表達式，但是不能放入語句或者代碼。

什么是表達式：

表達式是會產(chǎn)生值?？梢苑旁谌魏我粋€需要的地方

a a+b a==b demo()return undefined arr.map() function tese(){}

但是語句往往是一個操作?；蛘哒f控制代碼走向。

If(){} for(){} switch(){case: xxx}

3.每個child要有一個唯一的key

7.組件和模塊

模塊：即為js模塊，拆分js

組件：全都拆—— 一拆到底

模塊化、組件化工程化

安裝插件

下載安裝包——解壓——加載已解壓程序

當打開用react寫的網(wǎng)頁的時候，reactDeveloperTools的圖標才會亮起，紅色表示該網(wǎng)站尚未打包，藍色表示已經(jīng)打包了。

F12開發(fā)者模式中，會多出兩個選項components和profiler。前者用于查看組件、數(shù)據(jù)等。后者用于查看網(wǎng)站性能，入組件加載速度等。

本文檔為視頻學(xué)習(xí)筆記、需結(jié)合嗶哩嗶哩尚硅谷react教程視頻閱讀使用

9.組件之函數(shù)式組件

一個組件中應(yīng)當包括，結(jié)構(gòu)、樣式、行為、資源（html，css，js，資源）

函數(shù)式組件

  1. 首字母必須大寫

  2. 渲染時要寫成標簽渲染進去的形式

<div id="content">79789 </div>

<script type="text/javascript" src="../js/react.js"></script>

<script type="text/javascript" src="../js/react-dom.js"></script>

<script type="text/javascript" src="../js/babel.min.js"></script>

<script type="text/babel">

function Demo(){

return <h2>我是用函數(shù)定義的組件</h2>

}

//渲染組件到頁面

ReactDOM.render(<Demo />,document.getElementById("content"))

</script>

babel經(jīng)過翻譯之后，默認開啟嚴格模式，嚴格模式下，Demo里面的this不指向window。是個undifined

執(zhí)行ReactDOM.render(<demo /> , …….)之后發(fā)生了什么

  1. React解析組件標簽，找到Demo組件

② 發(fā)現(xiàn)組件是使用函數(shù)定義的，隨后調(diào)用該函數(shù)，把返回的虛擬dom轉(zhuǎn)換成真實DOM渲染到頁面上

復(fù)習(xí)類的相關(guān)知識

1.基本創(chuàng)建

1.用class創(chuàng)建關(guān)鍵字

<script type="text/babel">

//用關(guān)鍵字class創(chuàng)建一個類

class Person{

}

//創(chuàng)建一個類的實例對象

const p1=new Person();

console.log(p1);

</script>

  1. 用構(gòu)造函數(shù)實例化類

  2. 輸出結(jié)果為：

image.png
前面的Person表示的是這個類由誰實例化出來的。

后面的{ }就是我們的p1，打印出的對象p1

2.構(gòu)造器方法constructor（）。該函數(shù)中的this指向?qū)嵗龑ο?/h4>

<script type="text/babel">

//用關(guān)鍵字class創(chuàng)建一個類

class Person{

//構(gòu)造器方法

constructor(name,age){

this.name=name;

this.age=age;

}

}

//創(chuàng)建一個類的實例對象

const p1=new Person("make",18);

const p2=new Person("jane",19);

console.log(p1);

console.log(p2);

</script>

輸出結(jié)果：

image.png

3.類的一般方法（除了構(gòu)造器方法以外的方法）

  1. 類里面的一般方法的前面不寫function關(guān)鍵字

    1. 方法中的this指向的是對象

      1. 類的一般方法，放在原型對象上。供實例使用

      2. 通過person實例調(diào)用speak時，speak中的this指向就是person的實例對象

<script type="text/babel">

let name = "pppp";

//用關(guān)鍵字class創(chuàng)建一個類

class Person{

//構(gòu)造器方法

constructor(name,age){

this.name=name;

this.age=age;

}

//一般方法

speak(){

console.log(我的名字是${name},我的年齡是${this.age})

}

};

//創(chuàng)建一個類的實例對象

const p1=new Person("make",18);

const p2=new Person("jane",19);

console.log(p1);

console.log(p2);

p1.speak();

p2.speak();

</script>

注意這里的名字輸出出來是ppp不是make

4.原型鏈

當調(diào)用了屬性不存在的屬性或者方法，會沿著原型鏈去找，看他的原型鏈上有沒有誰有這個屬性或者方法。

<script type="text/babel">

let name = "pppp";

//用關(guān)鍵字class創(chuàng)建一個類

class Person{

//構(gòu)造器方法

constructor(name,age){

this.name=name;

this.age=age;

}

//一般方法

speak(){

console.log(我的名字是${name},我的年齡是${this.age})

}

};

//創(chuàng)建一個類的實例對象

const p1=new Person("make",18);

const p2=new Person("jane",19);

console.log(p1);

console.log(p2);

p1.speak();

p2.speak();

</script>

比如這里，p1和p2的speak都是原型上的方法。

所以在proto里面去找

image.png

類的繼承

  1. 什么時候不用寫構(gòu)造器？

    當構(gòu)造方法與父類一致的時候

  2. 什么時候要寫構(gòu)造器

    與父類不一致，或者有新的東西要添加的時候

  3. 必須調(diào)用super

    定義一個類child繼承parent的時候，并且要在child里面寫構(gòu)造函數(shù)的時候，必須調(diào)用super

    例如：

class Person{

//構(gòu)造器方法

constructor(name,age){

this.name=name;

this.age=age;

}

//一般方法

speak(){

console.log(我的名字是${name},我的年齡是${this.age})

}

};

//創(chuàng)建一個Student類集成Person

class Student extends Person{

constructor(name,age,grade){

this.name=name

this.age=age

this.grade=grade

}

}

會報錯說你沒使用super。、

image.png

正確寫法：

class Student extends Person{

constructor(name,age,grade){

super(name,age)

this.grade=grade

}

}

也就是說supre相當于調(diào)用父類的構(gòu)造函數(shù)。

注意：super要放在最前面

  1. 原型鏈的查找

    在上面的例子中，實例化一個sd并調(diào)用sd.speak()方法，會發(fā)現(xiàn)調(diào)用成功。

const sd=new Student("張三","15","高一");

sd.speak();

image.png
image.png

其查找邏輯為：

首先sd這個對象它自己沒有speak方法，所以要找它的原型也就是Student類。Student類也沒有speak方法，所以只能繼續(xù)沿著原型鏈向上找，直到找到Person

  1. 子類重寫從父類繼承的方法

//創(chuàng)建一個Student類集成Person

class Student extends Person{

constructor(name,age,grade){

super(name,age)

this.grade=grade

}

speak(){

console.log(我的名字是${this.name},我的年齡是${this.age},我正在讀${this.grade})

}

}

const sd=new Student("張三","15","高一");

sd.speak();

這里會直接調(diào)用Student里面的speak()函數(shù)

總結(jié)

  1. 類中的構(gòu)造器不是必須寫的。要對實例進行一些初始化的操作，如添加指定屬性時才寫。

  2. 如果Child類繼承了Parent類。而且Child類中寫了構(gòu)造器，那么Child類構(gòu)造器中必須要調(diào)用super

  3. 類中所定義的方法，都是放在類的原型對象上。供實例使用。

11類式組件(適用于復(fù)雜組件的定義)

創(chuàng)建類式組件

函數(shù)式組件中函數(shù)名就是組件名

類式組件中類名就是組件

1.必須繼承React.Component

2.內(nèi)部必須有render()

//創(chuàng)建類式組件

class MyComponent extends React.Component{

render(){

return <h2>我是類定義的組件</h2>

}

}

//渲染類式組件

ReactDOM.render(<MyComponent />,document.getElementById("content"))

3. 執(zhí)行ReactDOM.render(<demo /> , …….)之后發(fā)生了什么

①React解析組件標簽，找到MyComponent組件

②發(fā)現(xiàn)組件是類定義的，隨后new出該類的實例對象，并通過該實例調(diào)用原型上的render()方法。

③將render()返回的虛擬DOM轉(zhuǎn)化成真實DOM渲染到頁面上。

④render中的this指向的是React幫忙創(chuàng)建的這個實例對象——MyComponent組件實例對象

12.對state的理解——組件實例的三大核心屬性之一

什么是簡單組件。什么是復(fù)雜組件：

有state（狀態(tài)）的是復(fù)雜組件，沒有state的是簡單組件。

組件的狀態(tài)state驅(qū)動什么：

組件的狀態(tài)里面存著數(shù)據(jù)，數(shù)據(jù)的變化驅(qū)動著頁面展示的改變。

State在組件的實例上

所以只有class可以有。函數(shù)式組件都沒有實例。另外兩大核心屬性也是一樣

13.初始化state

想對類的實例對象進行衣蛾寫初始化的操作，比如增加一個屬性或者修改一個屬性的值，就需要借助類里面的構(gòu)造器了。

14.react中的事件綁定

1.原生事件綁定

1.addEventListener

  1. onclick

  2. 內(nèi)嵌事件函數(shù)

<button id=”btn1” click=”onclick()”></button>

2.react中的事件綁定

建議使用內(nèi)嵌事件函數(shù)

①首先onclick要寫成onClick

②首先不能用引號

render(){

const {isHot}=this.state;

return <h2 onClick="btn()">今天天氣很{isHot?"炎熱":"涼爽"}</h2>

}

這是錯的

然后不能加小括號，因為時把btn（）返回值給onclick了，為undefined

render(){

const {isHot}=this.state;

return <h2 onClick={btn()}>今天天氣很{isHot?"炎熱":"涼爽"}</h2>

}

這也是錯的

以下這樣才正確：

render(){

const {isHot}=this.state;

return <h2 onClick={btn}>今天天氣很{isHot?"炎熱":"涼爽"}</h2>

}

15.類中的方法中的this

class MyComponent extends React.Component{

constructor(props){

super(props)

this.state={

isHot:false

}

}

render(){

const {isHot}=this.state;

return <h2 onClick={this.btn}>今天天氣很{isHot?"炎熱":"涼爽"}</h2>

}

btn(){

console.log(this)

}

}

打?。簎ndefined

①btn()定義在類中，也即是放在MyComponent的原型對象上。供實例使用

②由于btn時作為onClick的回調(diào)，也就是說只是見到那的賦值給了onClick。所以這時再使用onclick已經(jīng)不是通過實例對象調(diào)用，而是直接對存放在堆里面的方法btn進行調(diào)用。所以this應(yīng)該指向window

③但是，但是，由于類里面的方法默認開啟嚴格模式，嚴格模式的代碼塊中，this禁止指向window。所以this為undefined

16.解決類中的this的指向問題、

Render()中的this指向是組件的實例對象。

在構(gòu)造函數(shù)中：

constructor(props){

super(props)

this.state={isHot:false}

this.btn=this.btn.bind(this)

}

①先看右邊。構(gòu)造器中的this指向的是實例對象，找實例對象的btn()方法；

②但是函數(shù)掛載在原型對象上，所以實例對象中此時此刻還沒btn()函數(shù)，順著原型鏈找到原型對象的btn()函數(shù)。通過bind函數(shù)傳遞進去this。

③這個this指向誰呢？還是那句話，構(gòu)造器中的this指向的是實例對象。所以這個bind會返回一個和btn()函數(shù)一樣的函數(shù)，區(qū)別只在于函數(shù)內(nèi)部的this指向了實例對象

④看左邊，賦值給了掛載在實例對象上的btn()函數(shù)。如此一來，每次通過實例對象調(diào)用的函數(shù)btn()是直接調(diào)用的函數(shù)左邊的這個。找到了，自然也不會去原型鏈里面找了。

本文檔為視頻學(xué)習(xí)筆記、需結(jié)合嗶哩嗶哩尚硅谷react教程視頻閱讀使用

17.setState的使用

狀態(tài)state不能直接更改，而是要使用一個api明教setState進行更改，React才會認可，才會幫我們刷新頁面

18.簡寫方法

1.構(gòu)造方法的簡寫

類里面可以直接寫賦值語句，例如：

class MyComponent extends React.Component{

a=1

}

前面不用寫let之類的，直接寫賦值語句

含義為：在該類的實例對象上追加一個屬性，屬性名為a，值為1

注意：是實例對象，而不是原型對象，這個變量實際掛載在實例對象身上，原型對象身上沒有

但是傳遞進來的數(shù)據(jù)需要構(gòu)造器來接

類里面可以寫的東西有：構(gòu)造器、render()、一般方法、賦值語句

2.bind函數(shù)的省略

//創(chuàng)建類式組件

class MyComponent extends React.Component{

constructor(props){

super(props)

this.state={isHot:false}

}

render(){

const {isHot}=this.state;

return <h2 onClick={this.btn}>今天天氣很{isHot?"炎熱":"涼爽"}</h2>

}

btn=()=>{

const isHot=this.state.isHot;

this.setState({isHot:!isHot});

}

}

//渲染類式組件

ReactDOM.render(<MyComponent />,document.getElementById("content"))

注意這一部分：

btn=()=>{

const isHot=this.state.isHot;

this.setState({isHot:!isHot});

}

①首先這個btn不再是一個聲明函數(shù)，而是一個賦值語句。根據(jù)上面一小節(jié)我們知道，類里面的賦值語句的含義是，給實例對象追加一個屬性btn，它的內(nèi)容是一個函數(shù)

②也就是說這個btn是掛載在實例對象身上的

③btn是一個箭頭函數(shù)，箭頭函數(shù)內(nèi)部沒喲自己的this，從上下文捕獲this。

④btn追加在實例對象上，所以這個this指向的是實例對象。

⑤所以之前的bind函數(shù)就可以省略掉了，btn（）函數(shù)此時不會丟失this了。效果不變

3.總結(jié)：

類的經(jīng)典格式：

class MyComponent extends React.Component{

state={isHot:false}

render(){

const {isHot}=this.state;

return <h2 onClick={this.btn}>今天天氣很{isHot?"炎熱":"涼爽"}</h2>

}

btn=()=>{

const isHot=this.state.isHot;

this.setState({isHot:!isHot});

}

}

初始化狀態(tài)state={}

不用放在構(gòu)造器中，直接直接寫state={isHot:false}作為代替

類中的一般屬性都要寫成

賦值語句+箭頭函數(shù)的形式

19.state總結(jié)：

①state的值是對象，包含多個key:value

②組件被稱為狀態(tài)機，通過更新組件的state來更新與渲染對應(yīng)組件

③組件中的render的方法中的this指向?qū)嵗龑ο?/p>

④組件中自定義的一般方法中的this為undefined

解決方法：

1.強制綁定bind

2.賦值語句+箭頭函數(shù)

⑤狀態(tài)數(shù)據(jù)必須用setState

20.props的基本使用

如何傳遞

ReactDOM.render(<Child name="123" />,document.getElementById("content"))

以這種形式書寫，react會直接把name和123作為key:value對 傳給組件的實例對象，（注意類比原生html的屬性書寫方法），存放在它的props里面。

在render中打印出this，如圖可以看到props里面已經(jīng)有了


image.png

如何拿到并使用

class Child extends React.Component{

render(){

console.log(this);

return(

<ul>

<li>姓名{this.props.name}</li>

<li>性別{this.props.sex}</li>

<li>年齡{this.props.age}</li>

</ul>

)

}

}

ReactDOM.render(<Child name="123" age="456" sex="789"/>,document.getElementById("content"))

直接用this.props.name

簡化一下：

render(){

console.log(this);

const {name,sex,age}=this.props

return(

<ul>

<li>姓名{name}</li>

<li>性別{sex}</li>

<li>年齡{age}</li>

</ul>

)

}

21.批量傳遞props（批量傳遞標簽屬性）

不定參數(shù)的方法：

const p={name:'1773',sex:'***',age:'+++'}

ReactDOM.render(<Child {...p}/>,document.getElementById("content"))

要求同名

展開運算符…的知識復(fù)習(xí)：

1.對數(shù)組使用——展開數(shù)組

將數(shù)組按展開

let arr1=[1,3,5,7,9]

console.log(...arr1)

console.log(arr1)

image.png

2.最數(shù)組使用——鏈接兩個數(shù)組

let arr1=[1,3,5,7,9]

let arr2=[2,4,6,8,10]

let arr3=[...arr1,...arr2]

console.log(arr3)

相當于把arr1和arr2展開放在一起，然后賦值給arr3


image.png

3.函數(shù)傳參——不定參數(shù)

4.不能展開對象——babel+react可以

原生情況下展開運算符不允許展開對象

React+babel中，可以展開對象———但是只能用于標簽屬性的傳參

5.知識復(fù)習(xí)——如何復(fù)制一個對象

let person={name:'123',age:'456'}

let person2=person

這種形式只是一個引用的傳遞，而不是復(fù)制對象的本身。

當person內(nèi)部的值變化的時候，通過person2獲取到的值也變化了。

應(yīng)該這樣：

let person={name:'123',age:'456'}

let person2={...person}

如此一來，person2只是初始值和person一樣。之后就各是各的了

注意一定外面要加{}，因為原生狀態(tài)下展開運算符不能展開對象，這里是在構(gòu)建對象字面量

6.構(gòu)建對象字面量的同時修改其屬性值

let person={name:'123',age:'456'}

let person2={...person}

let person3={...person2,name:"老王",address:"隔壁"}

console.log(person2)

console.log(person3)

image.png

22.為React添加props的規(guī)則限制

使用propsTypes

class Child extends React.Component{

render(){

console.log(this);

const {name,sex,age}=this.props

return(

<ul>

<li>姓名{name}</li>

<li>性別{sex}</li>

<li>年齡{age}</li>

</ul>

)

}

}

Child.propTypes={

name:PropTypes.string

}

const p={name:789798798,sex:'***',age:'+++'}

ReactDOM.render(<Child {...p}/>,document.getElementById("content"))

①首先，porpTypes要寫在類的外面，否則報錯（這個在下一節(jié)會處理）

②嚴格按照這個格式來寫：

Child.propTypes={

name:PropTypes.string

}

外面Child.propTypes的p小寫，里面PropTypes.string的p大寫，string這里的s也要小寫。

③前面要引入prop-type.js

④react的版不能太舊。

isRequired

限制名字為String且為必填項：

Child.propTypes={

name:PropTypes.string.isRequired

}

defaultProps

限制性別為String型，且默認值為“不男不女”

沒填性別的話，性別就默認為 不男不女

Child.propTypes={

sex:PropTypes.string

}

Child.defaultProps={

sex:"不男不女"

}

傳一個函數(shù)：

Child.propTypes={

sex:PropTypes.string,

speak:PropTypes.func

}

注意這里要寫func，不能寫function

23.props簡寫

Props是只讀的

不能修改

把propTypes放到class內(nèi)部里面去

class Child extends React.Component{

static propTypes={

sex:PropTypes.string,

speak:PropTypes.func

}

static defaultProps={

sex:"不男不女"

}

render(){

console.log(this);

const {name,sex,age}=this.props

return(

<ul>

<li>姓名{name}</li>

<li>性別{sex}</li>

<li>年齡{age}</li>

</ul>

)

}

}

注意要在前面加一個static

因為下面這種寫法是給類的實例對象添加屬性

class Child extends React.Component{

propTypes={

sex:PropTypes.string,

speak:PropTypes.func

}

defaultProps={

sex:"不男不女"

}

}

必須要加上static才能把屬性直接加載原型對象上。

24.類組件中的構(gòu)造器與props

①構(gòu)造函數(shù)完全可以不寫

②如果要寫構(gòu)造器函數(shù)，要接props，并且調(diào)用super（props）

形如：

constructor(props){

super(props)

}

否則構(gòu)造器內(nèi)部的this.props為undifined。無法通過this.的形式找到props

一般來說用不到。構(gòu)造器能省就省略

25.函數(shù)式組件使用props

function Child(props){

const {name,sex,age}=props

return(

<ul>

<li>姓名{name}</li>

<li>性別{sex}</li>

<li>年齡{age}</li>

</ul>

)

}

const p={name:"8",age:'+++',speak:p}

ReactDOM.render(<Child {...p}/>,document.getElementById("content"))

<Child {...p}/>傳進來的值會默認被收集成一個對象，并將這個對象作為函數(shù)組件的參數(shù)傳進去 func Child(props){

給函數(shù)式組件設(shè)置propType

Child.propTypes={

sex:PropTypes.string

}

Child.defaultProps={

sex:"不男不女"

}

直接寫在函數(shù)的外面。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容