四、【react】useState

useState是一个react hook函数，它允许我们向组件添加一个状态变量，从而控制影响组件的渲染结果

const [count,setCount] = useState(0)

1. useState是一个函数，返回值是一个数组
2. 数组的第一个参数是状态变量，第二个参数是set函数用来修改状态变量
3. useState的参数将作为初始值

import { useState } from "react";
function App() {
  // 1、调用useState添加一个状态变量count，初始值为0,setCount是更新状态变量的函数
  const [count,setCount] = useState(0);
  // 2、定义一个函数handleClick，点击按钮时，将count加1
  const handleClick = () => {
    setCount(count + 1);
  }
  return (
    <div className="App">
      <button onClick={handleClick}>{count}</button>
    </div>
  );
}
export default App;

对象和数组

import { useState } from "react";
function App() {
  // 1、调用useState添加一个状态变量count，初始值为0,setCount是更新状态变量的函数
  const [count,setCount] = useState(0);
  // 2、定义一个函数handleClick，点击按钮时，将count加1
  const handleClick = () => {
    // 3、调用setCount更新状态变量，这个地方不能直接写count=count+1，因为只有调用setCount才能触发重新渲染
    setCount(count+1);
  }

  // 对象的替换
  const [form,setForm] = useState({name:'jack',age:'10'});
  const handleFormClick = () => {
    setForm({...form,name:'lily',age:'12'});
    console.log('form:',form)
  }
  
  // 数组
  const [list,setList] = useState([1,2,3]);
  const handleListClick = () => {
    const len = list.length + 1
    setList([...list,len]);
  }

  return (
    <div className="App">
      <button onClick={handleClick}>{count}</button>
      <button onClick={handleFormClick}>{'my name is '}{form.name}</button>
      <button onClick={handleListClick}>{'check me list add one'}</button>
      <ul>
        {list.map(item => <li key={item}>{item}</li>)}
      </ul>
    </div>
  );
}
export default App;

import { useState } from "react"

function MyApp() {
  const [count,setCount] = useState(0)
  const [person,setPerson] = useState({name: "John", age: 30}
  const [arr,setArr] = useState([1,2,3])


  const clickHandler = () =>{
    setCount(count+1)
  }
  const changePersonHandler = () => {
    setPerson({name: person.name+"1", age: person.age+1})
  }
  const popArr = () => {
    setArr([...arr,6])
  }

  return (
    <div>
      <button onClick={clickHandler}>{count}</button>
      <div>{person.name}, {person.age}</div>
      <button onClick={changePersonHandler}>change person</button>
      <ul>
        {arr.map((item,index)=><li key={index}>{item}</li>)}
      </ul>
      <button onClick={popArr}>pop</button>
    </div>
  )
}
export default MyApp