// Hooks 16.8版本后引入的一个钩子 主要解决：函数组件中数据修改的 
import { useState } from "react";

// function Demo() {
//     // hooks钩子写在函数组件顶部
//     // 可以定义多个钩子
//     let [name,setName] = useState("LiLi");
//     let [age,setAge] = useState(10)
//     let [address,setAddress] = useState("哈尔滨")
  
//     return (
//         <div>
//             <p>我的名字：{name},今年{age}岁,我住在{address}</p>
//             <button onClick={()=>{
//                 setName("Lucy")
//                 setAge(20)
//                 setAddress("沈阳")
//             }}>
//                 修改
//             </button>
//         </div>
//     )
// }

function Demo() {
    let [user,setUser] = useState({
        name:'小明',
        age: 20
    })
    return (
        <div>
            <p>
                我的名字：{user.name}
            </p>
            <p>
                我的年龄：{user.age}
            </p>
            <button onClick={()=>{
                setUser({...user, name:"小红",age:18})
            }}>
                修改
            </button>
        </div>
    )
}




export default Demo;