React-State Hook的应用简单示例

通过示例了解State Hook的简单用法以及useState()函数的应用

import { useState } from "react";
const infoMap = {
    beginInfo : '您已经单击了',
    endInfo : '次按钮。',
    btnInfo: '计数器'
}

function HookExampleOne() {
    const [count, setCount] = useState(0);
    return (
        <div>
            <p>{infoMap.beginInfo}{count}{infoMap.endInfo}</p>
            <button onClick={() => setCount(count+1)}>
                {infoMap.btnInfo}
            </button>
        </div>
    );
}

export default HookExampleOne;

import React from "react";
const infoMap = {
    beginInfo : '您已经单击了',
    endInfo : '次按钮。',
    btnInfo: '计数器'
}

export default class HookExampleTwo extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            count: 0
        };
    }
    render(){
        return (
            <div>
                <p>{infoMap.beginInfo}{this.state.count}{infoMap.endInfo}</p>
                <button onClick={() => this.setState({count: this.state.count + 1})}>{infoMap.btnInfo}
                </button>
            </div>
        )
    }
}

import { useState } from "react";
const infoMap = {
    beginInfo: '您已经单击了',
    endInfo: '次按钮。',
    btnInfo: '计数器',
    beforeInfo: '猴子已经吃了',
    afterInfo: '个桃子。',
    ageInfo: '年龄',
    fruitInfo: '水果',
    doInfo: '待办事项：',
}

export default function HookExampleThree() {
    // 声明一个新的state变量count
    const [count, setCount] = useState(0);
    // 声明多个state变量
    const [peach, setPeach] = useState(0);
    const [age, setAge] = useState(18);
    const [fruit, setFruit] = useState('peach');
    const [todos, setTodos] = useState([
        { text: '学习React Hook' }
    ]);

    function handleOrangeClick() {
        if (fruit === 'peack'){
            setFruit('orange')
        } else {
            setFruit('peach')
        }
    }

    function handleDoClick() {
        alert('学习React Hook')
    }

    return (
        <div>
            <div>{infoMap.beforeInfo}{count}{infoMap.endInfo}</div>
            <button onClick={() => setCount(count + 1)}>{infoMap.btnInfo}</button>
            <div>{infoMap.beginInfo}{peach}{infoMap.afterInfo}</div>
            <button onClick={() => setPeach(peach + 1)}>{infoMap.btnInfo}</button>
            <div>{infoMap.ageInfo}{age}</div>
            <button onClick={() => setAge(age + 1)}>{infoMap.btnInfo}</button>
            <div>{infoMap.fruitInfo}{fruit}</div>
            <button onClick={handleOrangeClick}>{infoMap.fruitInfo}</button>
            <p>{infoMap.doInfo}</p>
            <button onClick={handleDoClick}>{infoMap.doInfo}</button>
        </div>
    );
}

import { useState } from "react";
const infoMap = {
    beginInfo: '您已经单击了',
    endInfo: '次按钮。',
    btnInfo: '计数器',
    beforeInfo: '猴子已经吃了',
    afterInfo: '个桃子。',
    ageInfo: '年龄',
    fruitInfo: '水果',
    doInfo: '待办事项：',
}


export default function HookExampleFour() {
    // 返回一个包含两个元素的数组
    let fruitStateVariable = useState('peach');
    // 数组里的第一个值
    let fruit = fruitStateVariable[0];
    // 数组里的第二个值
    let setFruit = fruitStateVariable[1];
    function handlePeachClick(){
        if (fruit === 'peach'){
            setFruit('orange')
        } else {
            setFruit('peach')
        }
        
    }

    return (
        <div>
            <p>{infoMap.fruitInfo}{fruit}</p>
            <button onClick={handlePeachClick}>{infoMap.fruitInfo}</button>
        </div>
    )
}

import React from "react";
import HookExampleOne from "./HookExampleOne";
import HookExampleTwo from "./HookExampleTwo";
import HookExampleThree from "./HookExampleThree";
import HookExampleFour from "./HookExampleFour";
const HookExample = () => {
    return (
        <div>
            <h1>State Hook的综合示例</h1>
            <hr/>
            <HookExampleOne/>
            <hr/>
            <h1>等价实现计数器</h1>
            <HookExampleTwo/>
            <hr/>
            <h1>多个state值的应用开发</h1>
            <HookExampleThree/>
            <hr/>
            <h1>state Hook的数组解构实现</h1>
            <HookExampleFour/>
        </div>
    )
}

export default HookExample;