react hooks 全面轉換攻略(一) react本篇之useState,useEffect

useState

經典案例:

import { useState } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  )
}

此例子中, useState(0) 是最新的 hooks api;
語法:

function useState<S>(initialState: S | (() => S)): [S, Dispatch<SetStateAction<S>>];

其中 state 是他的值, setState 是用來設置值的函數, initialState 是初始值

useState-initialState

該初始值能夠接受任何參數,可是記得當他接受爲一個函數時,就變成了Lazy initialization (延遲初始化)
該函數返回值即爲initialState,

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,這個問題等會會提供一個跳轉連接

---

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 的試驗:

將回調值設置爲一個在 function 外面的 object:

let deps = {grewer: 1}

在點擊按鈕時:

deps.grewer = deps.grewer + 1;
console.log(deps)

能夠發現:
deps.grewer 的值在變化,可是 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 的新配置等