摘要：經(jīng)典案例此例子中是最新的語(yǔ)法其中是他的值是用來設(shè)置值的函數(shù)是初始值該初始值可以接受任何參數(shù)但是記得當(dāng)他接受為一個(gè)函數(shù)時(shí)就變成了延遲初始化該函數(shù)返回值即為這兩種初始化方式是相等的但是在函數(shù)為初始值時(shí)會(huì)被執(zhí)行一次這里只會(huì)在初始化的時(shí)候執(zhí)行中的
useState
經(jīng)典案例:
import { useState } from "react";
function Example() {
const [count, setCount] = useState(0);
return (
You clicked {count} times
setCount(count + 1)}>
Click me
)
}
此例子中, useState(0) 是最新的 hooks api; 語(yǔ)法:
function useState(initialState: S | (() => S)): [S, Dispatch>];
其中 state 是他的值, setState 是用來設(shè)置值的函數(shù), initialState 是初始值
useState-initialState
該初始值可以接受任何參數(shù),但是記得當(dāng)他接受為一個(gè)函數(shù)時(shí),就變成了Lazy initialization (延遲初始化)
const [count, setCount] = useState(0);
const [count, setCount] = useState(()=>0);
// 這兩種初始化方式 是相等的,但是在函數(shù)為初始值時(shí)會(huì)被執(zhí)行一次
const [count, setCount] = useState(()=>{
console.log("這里只會(huì)在初始化的時(shí)候執(zhí)行")
// class 中的 constructor 的操作都可以移植到這里
return 0
});
// 當(dāng)?shù)谝淮螆?zhí)行完畢后 就和另一句的代碼是相同的效果了
useState-setState
也許很多人 在使用 class 的 setState 時(shí)候,會(huì)經(jīng)常使用他的回調(diào)函數(shù),
useEffect
語(yǔ)法:
function useEffect(effect: EffectCallback, deps?: DependencyList): void;
經(jīng)典案例:
useEffect(() => {
console.log("在 dep 改變時(shí)觸發(fā),若無 dep 則,每次更新組件都會(huì)觸發(fā)")
return () => {
console.log("在組件 unmount 時(shí)觸發(fā)")
};
});
deps 必須是一個(gè)數(shù)組,但是如果是一個(gè)空數(shù)組時(shí):
useEffect(() => {
console.log("效果的等于 componentDidMount")
}, [])
即使有 deps ,他在初始化時(shí)也會(huì)觸發(fā)一次
與 setState 形成回調(diào)函數(shù):
在useState-setState 中提到, class 中 setState 都是有回調(diào)的,而在 hooks 中 通過 useEffect 同樣也可以實(shí)現(xiàn)它的效果
關(guān)于回調(diào)值的探秘:
說起回調(diào)值,他能接受很多值,但是我們要搞清楚一點(diǎn) 他到底可以接受什么值,而他的變化的檢測(cè):
首先我們應(yīng)該清楚, string,number,undefined,null 他的值都是能夠正常檢測(cè)的,
關(guān)于 object 的試驗(yàn):
將回調(diào)值設(shè)置為一個(gè)在 function 外面的 object:
let deps = {grewer: 1}
在點(diǎn)擊按鈕時(shí):
deps.grewer = deps.grewer + 1;
console.log(deps)
可以發(fā)現(xiàn): 但是 effect 卻沒有觸發(fā)
而這樣設(shè)置值時(shí):
deps = {grewer: deps.grewer + 1};
每次都會(huì)觸發(fā) effect 函數(shù)
再次試驗(yàn):
deps = Object.assign({}, deps)
同樣地 每次都會(huì)觸發(fā) effect 函數(shù)
得出結(jié)論:
當(dāng)依賴值為 object 時(shí),他的值引用發(fā)生變化就會(huì)觸發(fā) effect 的更新
但是如果只是對(duì)象里某個(gè)值變化而引用不變化,effect 依舊不會(huì)觸發(fā)
關(guān)于 function 的試驗(yàn)結(jié)論:
如果初始值為 function, 而將其改為數(shù)字等,會(huì)觸發(fā) effect
function 也是一個(gè)對(duì)象,當(dāng)我們添加一個(gè)值在上面時(shí),他的 effect 也不會(huì)觸發(fā)
引用為一個(gè)新函數(shù)時(shí),他每次都會(huì)觸發(fā);
試驗(yàn)完畢,相信大家對(duì)于 effect 也有了許多的了解
后續(xù)還會(huì)講述其他 hooks api 與 redux 的全面轉(zhuǎn)換, eslint 的新配置等
相關(guān)文章:
react hooks 全面轉(zhuǎn)換攻略(一) react本篇之useState,useEffect
react hooks 全面轉(zhuǎn)換攻略(二) react本篇剩余 api
react hooks 全面轉(zhuǎn)換攻略(三) 全局存儲(chǔ)解決方案
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/103301.html
