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