html界面构建react-Hook基础useStateuseEffect简述

jiezi

5 年前

hook 基础：useState、useEffect;

用与声明组件状态与修改状态的方法，例：

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

在函数组件中执行代码，比如网络请求、修改组件状态等，例：

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
}