React - useState的基本使用

import React, { Component, useState } from 'react'
import { useControl } from './hooks/useControl'
import ReactDOM from 'react-dom/client'
import { nanoid } from 'nanoid'
import {
  // 🤴🏻🟨 推荐使用as将路由重命名为Router
  HashRouter,
  BrowserRouter as Router,
  Route,
  Link,
  NavLink,
  Switch,
  Redirect,
} from 'react-router-dom'

const root = ReactDOM.createRoot(document.getElementById('root'))
// 🌰[useState的基本使用]
// const [数据变量, 更新变量的函数] = useState(初始值)
// 导入useState函数
function AppCom01() {
  // count类似于this.state.count
  // 调用useState函数,解构数组
  const [count, setCount] = useState(99)
  const [msg, setMsg] = useState('Hello React')
  const handleAdd = () => {
    // setCount 类似于 this.setState({count: 新值})
    setCount(count + 1)
  }

  const handleAddMsg = () => {
    setMsg(msg + '~~~')
  }

  return (
    <>
      <h1>
        App - {count} - {msg}
      </h1>
      <button onClick={handleAdd}>点击 + 1</button>
      <button onClick={handleAddMsg}>点击+~</button>
    </>
  )
}

// 🍧[useState的注意事项]
// 🪔 规范写法:快捷键 useState
// const [数据变量名, set+驼峰变量名] = useState(初始值)
function AppCom02() {
  // 🧿1. useState可以被调用多次,声明多个变量
  let [count, setCount] = useState(99)
  const [msg, setMsg] = useState('we are the world!')

  // 🧿2. useState可以声明任意数据类型
  const [list, setList] = useState([1, 2, 3, 4, 5])
  const [person, setPerson] = useState({
    name: 'wangzz',
    age: 24,
    info: 'we are the world',
  })

  // 🧿3. 遵循不可变数据原则,新值覆盖旧值
  const handleAdd = () => {
    // ❌ count = count + 1
    setCount(count + 1)
  }

  const handleAddMsg = () => {
    setMsg(msg + '~')
  }

  return (
    <>
      <div>
        <h1>
          App - count: {count} - msg: {msg} - list: {list} - person:
          {person.name}
        </h1>
        <button onClick={handleAdd}>plus1</button>
        <br />
        <button onClick={handleAdd}>plus~</button>
      </div>
    </>
  )
}

// 🐉学习目标:hooks三个使用限制
// 1.❌ 不能在if else语句中使用hooks
// 2.❌ 不能在for语句中使用hooks
// 3. ❌ 不能在普通函数中使用hooks

// 什么是React中的特殊函数
// 1. 函数式组件
// 2. useXxx命名的自定义hooks函数

let isShow = true

function AppCom03() {
  let [count, setCount] = useState(99)

  // 👹不能在if else语句中使用hooks
  // if (isShow) {
  //   const [msg, setMsg] = useState('we are the world ~ wangzz')
  // }

  const [title, setTitle] = useState('Everything will be bright!')

  const scores = [99, 66, 77, 12]

  // 👹不能在for语句中使用hooks
  // for (let i = 0; i < list.length; i++) {
  //   const [title, setTitle] = useState('123')
  // }

  const handleAdd = () => {
    setCount(count + 1)
  }

  return (
    <>
      <h1>App - {count}</h1>
      <button onClick={handleAdd}> plus1</button>
    </>
  )
}

// hooks版 - 受控组件
function AppCom04() {
  const { value, onChange } = useControl()
  const password = useControl()

  return (
    <>
      <div>
        // 表单元素的value或checked,受到state控制 //
        onChange配合setState修改数据
        <input type="text" value={value} onChange={onChange} />
        <input {...password} type="text" placeholder="输入密码" />
      </div>
    </>
  )
}

const divNode = (
  <div>
    <AppCom04 />
  </div>
)

root.render(divNode)