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