通过示例了解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 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;