五大知識(shí)點(diǎn)帶你梳理react進(jìn)階知識(shí)

• ??前言
• 📧一、props
• • 1、PropTypes與DefaultProps應(yīng)用
  • • （1）PropTypes
    • （2）defaultProps
  • 2、props，state與render函數(shù)
• 📨二、React中的虛擬DOM
• • 1、什么是虛擬DOM
  • • （1）第一種方案
    • （2）第二種方案
    • （3）第三種方案
  • 2、虛擬DOM中的 Diff 算法
• 📩三、React中ref的使用
• 📦四、React中的生命周期
• • 1、生命周期函數(shù)是什么
  • 2、生命周期圖例
• 📪五、React中使用CSS動(dòng)畫(huà)效果
• • 1、普通用法
  • 2、react-transition-group
  • • （1）初次探索
    • （2）進(jìn)階探索
• 📮六、結(jié)束語(yǔ)
• 🗳?彩蛋

??前言

對(duì)于 react 的表層來(lái)說(shuō)，我們可能經(jīng)常聽(tīng)說(shuō)的是聲明式開(kāi)發(fā)、單向數(shù)據(jù)流、組件化方式開(kāi)發(fā)等等。那么，進(jìn)一步來(lái)講的話(huà)，我們還需要了解的是 react 的 props ，虛擬 DOM 、 ref 以及過(guò)渡動(dòng)畫(huà)等更多新的知識(shí)點(diǎn)。

那在下面的這篇文章中，將來(lái)探索關(guān)于 react 的進(jìn)階知識(shí)。

叮，下面開(kāi)始本文的介紹~🤪

📧一、props

1、PropTypes與DefaultProps應(yīng)用

（1）PropTypes

在 react 中，有時(shí)候我們要對(duì)組件中的某個(gè)屬性進(jìn)行格式校驗(yàn)，這個(gè)時(shí)候我們就需要用到 propTypes 。下面給出一些常見(jiàn)的例子：

// 表示要對(duì)TodoItem這個(gè)組件做屬性的校驗(yàn) TodoItem.propTypes = {// isRequired 表示必須有值test: PropTypes.string.isRequired,// 表示content的propTypes必須是string類(lèi)型，那string類(lèi)型的校驗(yàn)是從PropTypes這個(gè)包里面拿到的content: PropTypes.string,// 表示detail可以是一個(gè)number或者string的語(yǔ)法detail: PropTypes.arrayOf(PropTypes.number, PropTypes.string),// 表示deleteItem必須是一個(gè)函數(shù)deleteItem: PropTypes.func,// 表示index必須是一個(gè)數(shù)字類(lèi)型index: PropTypes.number }

（2）defaultProps

有時(shí)候，對(duì)于某個(gè)屬性來(lái)說(shuō)，我們希望給它個(gè)初始值，那這個(gè)時(shí)候就需要用到 defaultProps 。示例如下：

TodoItem.defaultProps = {test: 'hello world' }

上面的代碼表明，當(dāng) test 屬性沒(méi)有被賦值時(shí)，那么它將被賦予一個(gè)初始值，值為 hello world 。

2、props，state與render函數(shù)

在 react 中，定義一個(gè)組件時(shí)，經(jīng)常會(huì)看到 props 、 state 和 render 。那他們?nèi)呤窃趺礃拥年P(guān)系呢？

首先我們要想一個(gè)問(wèn)題：為什么數(shù)據(jù)發(fā)生變化，頁(yè)面就會(huì)跟著變化呢？

原因在于，頁(yè)面是由 render 函數(shù)渲染出來(lái)的，當(dāng)數(shù)據(jù) state 發(fā)生變化時(shí)， render 函數(shù)就會(huì)被重新的執(zhí)行一次。

同時(shí)，當(dāng)父組件的 render 函數(shù)被運(yùn)行時(shí)，它的子組件的 render 都將被重新運(yùn)行。

📨二、React中的虛擬DOM

1、什么是虛擬DOM

（1）第一種方案

傳統(tǒng)實(shí)現(xiàn)虛擬 DOM 的思路：

• 先定義 state ，也就是數(shù)據(jù)；
• 編寫(xiě)JSX 模板內(nèi)容；
• 把數(shù)據(jù)和模板進(jìn)行結(jié)合，生成真是的 DOM ，進(jìn)而將內(nèi)容顯示到頁(yè)面上；
• 如果遇到要替換數(shù)據(jù)時(shí)，則把數(shù)據(jù)和模板進(jìn)行結(jié)合，生成真實(shí)的 DOM ，來(lái)替換原始的 DOM 。

存在缺陷：

• 第一次生成了一個(gè)完整的 DOM 片段；
• 第二次又生成了一個(gè)完整的 DOM 片段；
• 第二次的 DOM 替換第一次的 DOM ，非常耗費(fèi)性能。

（2）第二種方案

傳統(tǒng)實(shí)現(xiàn)虛擬 DOM 的思路改進(jìn)版：

• 先定義 state ，即數(shù)據(jù)；
• 編寫(xiě) JSX 模板內(nèi)容；
• 把數(shù)據(jù)和模板進(jìn)行結(jié)合，生成真實(shí)的 DOM ，并展示；
• 當(dāng) state 的數(shù)據(jù)發(fā)生改變；
• 繼續(xù)，把數(shù)據(jù)和模板進(jìn)行結(jié)合，生成真實(shí)的 DOM ，并不是直接替換原始的 DOM
• 將新的 DOM 和原始的 DOM 做比較，并找出差異；
• 找到新的 Dom 中發(fā)生的變化；
• 只用新的 DOM 中變化的數(shù)據(jù)，來(lái)替換掉老的 DOM 中的數(shù)據(jù)。

存在缺陷：

• 性能的提升并不明顯

（3）第三種方案

react 中實(shí)現(xiàn)虛擬 DOM 的思路：

• 先定義 state ，即數(shù)據(jù)；

• 編寫(xiě) JSX 模板內(nèi)容；

• 把數(shù)據(jù)和模板進(jìn)行結(jié)合，生成虛擬 DOM （虛擬 DOM 就是一個(gè) JS 對(duì)象，用它來(lái)描述真實(shí) DOM ）。👉（損耗了性能）

  <div id="abc"><span>hello world</span></div> ['div', {id: 'abc'}, ['span', {}, 'hello world']]

• 用虛擬 DOM 的結(jié)構(gòu)生成真實(shí)的 DOM ，來(lái)進(jìn)行顯示；

• 當(dāng) state 發(fā)生變化時(shí)，數(shù)據(jù) + 模板生成新的虛擬 DOM ；👉（極大的提升了性能）

<div id="abc"><span>monday</span></div> ['div', {id: 'abc'}, ['span', {}, 'monday']]

• 比較 原始虛擬 DOM 和 新的虛擬 DOM 的區(qū)別，找到其中的區(qū)別是 span 中的內(nèi)容；
• 直接操作 DOM ，改變 span 的內(nèi)容；
• 因此， React 的虛擬 DOM 主要經(jīng)歷的過(guò)程是： JSX → createElement → 虛擬 DOM （ JS 對(duì)象 ）→ 真實(shí)的 DOM 。

react 虛擬 DOM 的優(yōu)點(diǎn)：

• 極大的提升了性能；
• 它使得跨端應(yīng)用得以實(shí)現(xiàn)，這要談到 react 中的一個(gè)概念，react native ；
• react 使用可以編寫(xiě)原生應(yīng)用，像 Android 和 IOS 開(kāi)發(fā)，這些都是操作真實(shí) DOM ；
• 而 react 使得編寫(xiě)這些原生應(yīng)用得以使用。

2、虛擬DOM中的 Diff 算法

• react 對(duì) setState 的性能優(yōu)化，它會(huì)把多次 setState 結(jié)合成一次 setState ；
• 虛擬 DOM 使用 diff 算法做比較，只在同層做比較，不跨級(jí)做比較；
• 同層比對(duì)的算法比較簡(jiǎn)單，而算法簡(jiǎn)單帶來(lái)的直接好處就是速度非常快；
• 雖然可能會(huì)造成 DOM 渲染上的一些浪費(fèi)，但是呢，它也極大的減少了兩個(gè)虛擬 DOM 之間進(jìn)行比較時(shí)，性能上的消耗。

📩三、React中ref的使用

react 中建議的是，希望我們可以用數(shù)據(jù)驅(qū)動(dòng)的形式來(lái)編寫(xiě)代碼，盡量不要操作 DOM 。但有時(shí)候，我們?cè)谧鲆恍O其復(fù)雜業(yè)務(wù)的時(shí)候，比如各種震撼動(dòng)畫(huà)，不可避免的還是會(huì)用到一些原生的 DOM 標(biāo)簽。因此， ref 幫助我們?cè)?react 中直接獲取 DOM 元素的時(shí)候來(lái)進(jìn)行使用。

一般情況下，我們盡量不使用 ref 。如果用 ref 時(shí)，會(huì)出現(xiàn)各種各樣的問(wèn)題。同時(shí)，當(dāng)使用 ref 和 setState 時(shí)，要注意一些存在的坑。

比如，當(dāng) ref 與 setState 相關(guān)聯(lián)使用時(shí)，要注意， setState 是一個(gè)異步函數(shù)，往往會(huì)在同步代碼執(zhí)行完畢后再執(zhí)行異步代碼。因此，如果我們希望同步代碼執(zhí)行順序在 setState 之后時(shí)，可以在 setState 接受的第二個(gè)參數(shù)中，再增加一個(gè)回調(diào)函數(shù)來(lái)進(jìn)行調(diào)用，這樣就可以達(dá)到我們的效果啦！

render() {return (<ul ref={(ul) => this.ul = ul}>{this.getTodoItem()}</ul>) }this.setState((prevState) => ({list: [...prevState.list, prevState.inputValue],inputValue: '' }), () => {console.log(this.ul.querySelectorAll('div').length) });

📦四、React中的生命周期

1、生命周期函數(shù)是什么

所謂生命周期函數(shù)，指的是在某一個(gè)時(shí)刻，組件會(huì)自動(dòng)調(diào)用執(zhí)行的函數(shù)。那 react 的生命周期都有哪一些呢？

階段生命周期含義

Mounting	componentWillMount	①當(dāng)組件即將被掛載到頁(yè)面的時(shí)刻時(shí)自動(dòng)執(zhí)行，即在頁(yè)面掛在之前執(zhí)行；②只在組件被第一次掛在到頁(yè)面上才會(huì)執(zhí)行；
Mounting/Updation	render	頁(yè)面掛載時(shí)被執(zhí)行
Mounting	componentDidMount	會(huì)在組件被掛載到頁(yè)面之后，自動(dòng)被執(zhí)行；只在組件被第一次掛在到頁(yè)面上才會(huì)執(zhí)行
Updation	componentWillReceiveProps	①當(dāng)一個(gè)組件從父組件接收參數(shù)；②只要父組件的render函數(shù)被執(zhí)行了，子組件的這個(gè)生命周期函數(shù)就會(huì)被執(zhí)行；③如果這個(gè)組件第一次存在于父組件中，不會(huì)執(zhí)行；④如果這個(gè)組件之前已經(jīng)存在于父組件中，才會(huì)被執(zhí)行；
Updation	componentWillUpdate	①組件被更新之前，她會(huì)自動(dòng)執(zhí)行；②但是它是在shouldComponentUpdate之后被執(zhí)行，如果shouldComponentUpdate返回true時(shí)，它才執(zhí)行；如果返回false，這個(gè)函數(shù)就不會(huì)被執(zhí)行了。
Updation	componentDidUpdate	組件更新完成之后，它會(huì)被執(zhí)行。
Updation	shouldComponentUpdate	組件被更新之前，它會(huì)被自動(dòng)被執(zhí)行；此生命周期返回一個(gè)布爾值
Unmounting	componentWillUnmount	當(dāng)這個(gè)組件即將被從頁(yè)面中剔除的時(shí)候，會(huì)被執(zhí)行。

2、生命周期圖例

下面用一張圖來(lái)展示 react 中生命周期的執(zhí)行效果：

📪五、React中使用CSS動(dòng)畫(huà)效果

1、普通用法

我們來(lái)看一下，在 react 中，如何使用 css3 所提供的動(dòng)畫(huà)效果。具體代碼如下：

.show {animation: show-item 2s ease-in forwards; }.hide {animation: hide-item 2s wase-in forwards; }@keyframes show-item {0% {oppacity: 0;color: red;}50% {opacity: 0.5;color: green;}100% {opacity: 1;color: blue;} }

2、react-transition-group

（1）初次探索

有時(shí)候，我們可能會(huì)想要實(shí)現(xiàn)一些很復(fù)雜的動(dòng)畫(huà)，這個(gè)時(shí)候 css3 提供的是不夠的。因此，我們還需要一點(diǎn) js 來(lái)加以輔助實(shí)現(xiàn)更為復(fù)雜的動(dòng)畫(huà)。這個(gè)時(shí)候就有談到 react 中的 react-transition-group 動(dòng)畫(huà)。

假設(shè)我們想要實(shí)現(xiàn)，當(dāng)點(diǎn)擊一個(gè)按鈕時(shí)，一行文字漸隱漸顯的實(shí)現(xiàn)，那該怎么處理呢？

首先，我們?cè)陧?xiàng)目的 src 文件夾下新增一個(gè)組件，命名為 App.js 。具體代碼如下：

import React, { Component, Fragment } from 'react'; import { CSSTransition } from 'react-transition-group'; import './style.css';class App extends Component {constructor(props) {super(props);this.state = {show: true}this.handleToggle = this.handleToggle.bind(this);}render() {return (<Fragment>{/* onEntered指的是在某一個(gè)時(shí)刻會(huì)自動(dòng)執(zhí)行的一個(gè)函數(shù)當(dāng)入場(chǎng)動(dòng)畫(huà)結(jié)束時(shí)，onEntered將會(huì)被執(zhí)行*/}<CSSTransitionin={this.state.show}timeout={1000}classNames='fade'unmountOnExitonEntered={(el) => { el.style.color = "blue" }}appear={true}><div>hello</div></CSSTransition><button onClick={this.handleToggle}>toggle</button></Fragment>)}handleToggle() {this.setState({show: this.state.show ? false : true})} }export default App;

之后新增一個(gè) CSS 文件，命名為 style.css 。具體代碼如下：

/* 入場(chǎng)動(dòng)畫(huà)執(zhí)行的第一個(gè)時(shí)刻，即剛要入場(chǎng)的這個(gè)瞬間 */ /* fade-appear用于實(shí)現(xiàn)漸隱漸現(xiàn)的效果 */ .fade-enter, .fade-appear {opacity: 0; }/* 入場(chǎng)動(dòng)畫(huà)執(zhí)行的第二個(gè)時(shí)刻，到入場(chǎng)動(dòng)畫(huà)執(zhí)行完成之前的一個(gè)時(shí)刻 */ .fade-enter-active, .fade-appear-active {opacity: 1;transition: opacity 1s ease-in; }/* 當(dāng)整個(gè)入場(chǎng)動(dòng)畫(huà)執(zhí)行完成之后 */ .fade-enter-done {opacity: 1; }/* 表示出場(chǎng)動(dòng)畫(huà)執(zhí)行的第一個(gè)時(shí)刻 */ .fade-exit {opacity: 1; }/* 整個(gè)出場(chǎng)的過(guò)程 */ .fade-exit-active {opacity: 0;transition: opacity 1s ease-in; }/* 當(dāng)整個(gè)出場(chǎng)動(dòng)畫(huà)執(zhí)行完成時(shí) */ .fade-exit-done { }

此時(shí)我們來(lái)看下瀏覽器的顯示效果：

（2）進(jìn)階探索

上面我們只是改變了一項(xiàng)數(shù)據(jù)。現(xiàn)在，如果我們想要點(diǎn)擊就新增一項(xiàng)過(guò)渡效果，這又該如何處理呢？

我們來(lái)改造下 App.js 文件的代碼。具體代碼如下：

import React, { Component, Fragment } from 'react'; import { CSSTransition, TransitionGroup } from 'react-transition-group'; import './style.css';class App extends Component {constructor(props) {super(props);this.state = {show: true,list: []}this.handleToggle = this.handleToggle.bind(this);}render() {return (<Fragment>{/* onEntered指的是在某一個(gè)時(shí)刻會(huì)自動(dòng)執(zhí)行的一個(gè)函數(shù)當(dāng)入場(chǎng)動(dòng)畫(huà)結(jié)束時(shí)，onEntered將會(huì)被執(zhí)行*/}<TransitionGroup>{this.state.list.map((item, index) => {return (<CSSTransitionin={this.state.show}timeout={1000}classNames='fade'unmountOnExitonEntered={(el) => { el.style.color = "blue" }}appear={true}key={index}><div>{item}</div></CSSTransition>)})}</TransitionGroup><button onClick={this.handleToggle}>toggle</button></Fragment>)}handleToggle() {this.setState((prevState) => {return {list: [...prevState.list, 'item']}})} }export default App;

此時(shí)瀏覽器的運(yùn)行效果如下：

對(duì)于這種類(lèi)型的動(dòng)畫(huà)來(lái)說(shuō)，我們通過(guò) TransitionGroup 對(duì)外層進(jìn)行包裹，之后通過(guò) CSSTransition 對(duì)里層進(jìn)行包裹，進(jìn)而達(dá)到我們最終的效果。

📮六、結(jié)束語(yǔ)

在上面這篇文章中，我們講解了 react 中的 props ，同時(shí)，還簡(jiǎn)單的了解了虛擬 DOM 的內(nèi)容。除此之外呢，還學(xué)習(xí)了 ref 的使用，以及 react 中的酷炫的過(guò)渡動(dòng)畫(huà)。當(dāng)然，最為重要的一點(diǎn)是， react 中的生命周期函數(shù)。

那到這里， react 的進(jìn)階知識(shí)講到這里就結(jié)束了。不知道小伙伴們對(duì) react 是否又有進(jìn)一步的認(rèn)識(shí)呢？

🗳?彩蛋

• 關(guān)注公眾號(hào)星期一研究室，第一時(shí)間關(guān)注優(yōu)質(zhì)文章，更有面試專(zhuān)欄待你解鎖~
• 如果您覺(jué)得這篇文章有幫助到您的的話(huà)不妨點(diǎn)贊支持一下喲~~😉
• 以上就是本文的全部?jī)?nèi)容！我們下期見(jiàn)！🥂🥂🥂

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的react只停留在表层？五大知识点带你梳理进阶知识的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。