本文講述react hooks中的useState和useEffect的使用。

useState

useState是React的一個Hook，它是一個方法，可以傳入值作為state的預設值，返回一個數組，陣列的第一項是對應的狀態(預設值會賦予狀態)，陣列的第二項是更新狀態的函式。

實現一個加1的元件

   import React,{useState} from 'react';        const UseState = () => {      const  [count,setCount] = useState(1) // 1是初始值,setCount是設定count的方法      const [istrue,setIstrue] = useState(true) // true 是初始值            // 設定count      const add = () => {        setCount(count+1)      }            return (        <>        {/* 這裡直接使用state */}        {istrue ?<h1>{count}</h1>:'' }          <button onClick={() => {setIstrue(!istrue)}}>change</button>          // 第一種：函式直接寫在dom中          <button onClick={() => setCount(count + 1)}>+</button>          // 第二種：函式寫在add ，dom外          <button onClick={add}>+</button>        </>      )    }        export default UseState;

點選直接執行：https://codesandbox.io/s/zen-ramanujan-5wq7h

useEffectReact Hooks 提供了 Effect Hook，可以在函式元件中執行副作用操作，並且是在函式渲染DOM完成後執行副作用操作useEffect這個方法傳入一個函式作為引數，在函數里面執行副作用程式碼，並且useEffec的第一個引數還支援返回值為一個函式，這個函式執行相當於元件更新和解除安裝。

效果1：最常見的做法就是就是在函式引數中寫事件註冊，在函式的返回函式中寫事件銷燬。當改變瀏覽器寬度的適合，width值會隨之改變。

    import React,{useState,useEffect} from 'react';    const UseEffect = () => {        // React Hooks 提供了 Effect Hook，可以在函式元件中執行副作用操作，並且是在函式渲染DOM完成後執行副作用操作        // useEffect這個方法傳入一個函式作為引數，在函數里面執行副作用程式碼，並且useEffec的第一個引數還支援返回值為一個函式，這個函式執行相當於元件更新和解除安裝。                // 最常見的做法就是就是在函式引數中寫事件註冊，在函式的返回函式中寫事件銷燬        const [width,setWidth ] = useState(window.innerWidth)        const resizeHandle = () => {            setWidth(window.innerWidth)        }            useEffect(() => {            // 相當於componentDidMount和componentDidUpdate            window.addEventListener('resize',resizeHandle)            // 相當於componentWillUnmount            return () => {                window.removeEventListener('resize',resizeHandle)            }        })        return (            <h1>{width}</h1>        )    }        export default UseEffect;

useEffect第二個引數效果：

useEffect的第二個引數是一個數組，表示以來什麼state和props來執行副作用。陣列為空的時候，useEffect就相當於componentDidMoubt和componentWillUnmount這兩個生命週期，只在首次渲染和解除安裝的時候執行當陣列中值是狀態的時候，就會只監聽這一個狀態的變化。當然陣列中可以多個值，監聽存放state的變化

  import React,{useState,useEffect} from 'react';    const UseEffect = () => {        // useEffect的第二個引數,useEffect的第二個引數是一個數組，表示以來什麼state和props來執行副作用。        // 陣列為空的時候，useEffect就相當於componentDidMoubt和componentWillUnmount這兩個生命週期，只在首次渲染和解除安裝的時候執行        // 當陣列中值是狀態的時候，就會只監聽這一個狀態的變化。當然陣列中可以多個值，監聽存放state的變化。        const [count, setCount] = useState(1);        const [num, setNum] = useState(2);        useEffect(() => {            console.log("count狀態更新");            return () => {                console.log("useEffect解除安裝")            }        },[count])        return (            <>                <h1>{count}</h1>                <button onClick={() => {setCount(count + 1)}}>+</button>                <h1>{num}</h1>                <button onClick={() => {setNum(num + 1)}}>+</button>            </>        );    }        export default UseEffect;

從程式碼中看出useEffect的第二個引數是count，也就是當count變化的時候，console.log才會執行.

多個useEffect

React Hook 允許函式式元件中定義多個useEffect(和useState類似)，多個useEffect互相不受干擾。

import React,{useState,useEffect} from 'react';    const UseEffect = () => {        // 寫多個useEffect        // React Hook 允許函式式元件中定義多個useEffect(和useState類似)，多個useEffect互相不受干擾。        const [count, setCount] = useState(1);        const [num, setNum] = useState(2);        useEffect(() => {            console.log("count狀態更新");            return () => {                console.log("count解除安裝")            }        },[count])        useEffect(() => {            console.log("num狀態更新");            return () => {                console.log("num解除安裝")            }        },[num])        return (            <>                <h1>{count}</h1>                <button onClick={() => {setCount(count + 1)}}>+</button>                <h1>{num}</h1>                <button onClick={() => {setNum(num + 1)}}>+</button>            </>        );        return (            <>                <h1>{count}</h1>                <button onClick={() => {setCount(count + 1)}}>+</button>                <h1>{num}</h1>                <button onClick={() => {setNum(num + 1)}}>+</button>            </>        );    }        export default UseEffect;

下篇文章 將講述useRef 、 useCallback 、useContext 、useReducer

如果這篇文章對你有幫助，感謝關注。