前面知識點(diǎn)補(bǔ)充
setState不可變的力量
官方文檔.png
案例.png
-
在開發(fā)中不要這樣做
image.png 性能優(yōu)化, SCU, shouldComponentUpdate生命周期函數(shù)判斷有沒有變化, 要不要刷新
引用類型, 真正創(chuàng)建出來的數(shù)組在內(nèi)存空間里面, friends僅僅是一個引用, 保存了這塊空間的內(nèi)存地址
引用類型.png
-
往內(nèi)存里面push
不會刷新的原因.png
推薦做法:
// ES6中的展開運(yùn)算符, 放到一個新的數(shù)組中
const newFriends = [...this.state.friends];
newFriends.push({name: "tom", age: 30});
this.setSate({
friends: newFriends
})
重新更新內(nèi)存表現(xiàn).png
- 沒寫SCU優(yōu)化怎么寫都行
- 寫SCU太麻煩 => 繼承自PureComponent
- 引用了Component卻沒使用會出現(xiàn)一個警告, 換成引用PureComponent
講兩個小東西
- context跨組件通信, 假如按照模塊化開發(fā)的方式, 單獨(dú)文件, 代碼組織, export導(dǎo)入導(dǎo)出
- 一個函數(shù)式組件里面用了多個context, 類組件中如何使用多個context? jsx -> 嵌套的方式, Consumer的方式多層嵌套, context是一個對象只保存一個
全局事件傳遞
- 事件總線: event bus, 本質(zhì)上是一個全局對象, 發(fā)出一些事件
- 依賴一個第三方庫, yarn安裝, 終端'yarn add events'
- 導(dǎo)入, 本地文件跟上一個相對路徑, node_modules文件夾中的庫, 直接寫上庫的名字
import { EventEmitter } from 'events'; - 在固定的函數(shù)中監(jiān)聽事件
componentDidMount() {} - 取消事件監(jiān)聽
componentWillUnmount() {} - ...展開運(yùn)算符, 用多個變量進(jìn)行接收
emitEvent() {
eventBus.emit("syaHello", "Hello Home", 123);
}
事件總線的使用.png
打包過的代碼.png
如何使用ref
- React前面學(xué)習(xí)的坡度很陡峭, 后面不是特別難
- 在React的開發(fā)模式中, 通常情況下不需要, 也不建議直接操作DOM原生, 但使某些特殊的情況, 確實(shí)需要獲取到DOM進(jìn)行某些操作:
- 管理焦點(diǎn), 文本選擇或媒體播放;
- 觸發(fā)強(qiáng)制動畫;
- 繼承第三方DOM庫;
- 如何創(chuàng)建refs來獲取對應(yīng)的DOM呢? 目前有三種方式:
- 使用方式一: 字符串(不推薦, 后續(xù)的更新可能會刪除)
- 使用方式二: 對象方式
- 使用方式三: 回調(diào)函數(shù)方式
ref的類型- ref的值根據(jù)節(jié)點(diǎn)的類型而有所不同:
ref的類型.png
- 函數(shù)式組件獲取不到對應(yīng)的對象, 沒有組件的實(shí)例
案例.png
認(rèn)識受控組件
- 一般都是跟表單元素有關(guān)系
-
在React中, HTML表單的處理方式和普通的DOM元素不太一樣: 表單元素通常會保存在一些內(nèi)部的state.
image.png
受控組件基本演練
-
在HTML中, 表單元素(如<input>、<textarea>和<select>)之類的表單元素通常自己維護(hù)state, 并根據(jù)用戶輸入進(jìn)行更新.
image.png -
受控組件-select的使用
select的使用.png 受控組件-多輸入
密碼輸入、驗(yàn)證碼輸入
</br>標(biāo)簽做換行, 不推薦, 推薦包裹一個<div>獨(dú)占一行
-
有什么公共的代碼是可以抽取的? 固定的格式封裝成一個獨(dú)立的組件
image.png
handleChange(event) {
this.setState({
// 計算屬性名
[event.target.name]: event.target.value
})
}
- MDN上學(xué)習(xí)JavaScript MDN官網(wǎng)
image.png
非受控組件
-
React推薦大多數(shù)情況下使用 受控組件 來處理表單數(shù)據(jù):
image.png
費(fèi)受控組件.png
coderwhy的React核心技術(shù)與開發(fā)實(shí)戰(zhàn)課程鏈接
少年~來做同學(xué)呀~.png
