React-hook-踩坑1

1. render（第一次创建） --- 初始化值 state
2. re-render (更新的时候) --- 只恢复初始化的state的值,不会重新设置值。只能通过setName修改
3. 组件Demo const [name,setName] = useState(userInfo.name)的name更新的时候会恢复上次的值。而不是 执行useState(userInfo.name)重新赋值

import React, { useState } from "react";

function Demo({userInfo}){
    //render --- 初始化值 state
    //re-render --- 只恢复初始化的state的值,不会重新设置值。只能通过setName修改
    const [name,setName] = useState(userInfo.name)
    console.log('userInfo',userInfo);
    console.log('name',name);
    return <div>
        userInfo:{JSON.stringify(userInfo)}
        <hr/>
        name:{name}
    </div>
}

function App(){
    const [name,setName] = useState('fuxing')
    const userInfo = {name}
    return <>
        <button onClick={()=>setName(name+1)}>修改name</button>
        <Demo userInfo={userInfo}/>
    </>
}

export default App