html界面構建，react - Hook基礎：useState、useEffect簡述

hook基礎：useState、useEffect;

useState

用與聲明組件狀態與修改狀態的方法，例：

const [cards, setCards] = useState('current cards');

const [profile, setProfile] = useState({name: 'liaoxinyu', status: 'writing'});

1.cards爲組件狀態，初始值爲：current cards
2.setCards爲修改cards數據的方法，如：setCards('new cards')，cards將更新爲'new cards'
3.申明多個狀態即多寫幾個useState

useEffect

在函數組件中執行代碼，比如網絡請求、修改組件狀態等，例：

import React, { useEffect, useState } from 'react';

const Example = () => {
    const [count, setCount] = useState(0)
    const [title, setTitle] = useState('original title')
    const [profile, setProfile] = useState({name: 'liaoxinyu', status: 'writing'});
    
    useEffect(() => {
        setTitle('new title...' + count)
        // 將在組件創建時執行某些代碼
        // 這裏修改了標題
        
        return () => {
            setTitle('original title')
        }
        // useEffect中的return，會在組件銷燬時執行，用於銷燬某些副作用代碼
        // 比如將數據還原
    }, [count]);
    // 這裏設置了 [count] ，即當count變更後，會自動執行 setTitle('new title...' + count)
    // 如果設置 [] 空數組，這條useEffect將只執行一次
    
    return (
        <div>
            <p>{ title }</p>
            <p>current count: { count }</p>
            <p>author: { profile.name }</p>
            <button onClick={() => setCount(count + 1)}>modify count</button>
        </div>
    )
    // 渲染 title、count
    // 點擊button按鈕，調用setCount，將count加1
}