浅谈react hook （useState hook）

import React, { useState } from "react";

import ReactDOM from "react-dom";

import "./index.css";

// useState hook

function App() {

    const [count, set] = useState(0)

    const [obj, setObj] = useState({ name: '翠花' })

    const [arr, setArr] = useState( [1,2,3 ])

    const [fun, setFun] = useState((res)=>{

        console.log(res);

        return '我的老baby'

    })

 

    return (

        <div>

            <h1>{count}</h1>

            <button onClick={() => {

                set(count + 1)

            }}>快点我</button>

            <br/>

            <h1>{obj.name}---{obj.age}</h1>

            <button onClick={() => {

                setObj({ name: '小芳',age:'70大寿' }) //必须是新对象

                // setObj(Object.assign( obj,{name: '小芳'} )) 

                // setObj(...obj,name: '小芳',age:70 )) 

            }}>找富婆</button>

              <br/>

            <h1>{arr}</h1>

            <button onClick={() => {

                setArr(()=>{

                    arr.push(4)

                    return  [...arr]

                })

            }}>生孩几</button>

              <br/>

            <h1>{fun}</h1>

           

          

 

        </div>

    );

}

ReactDOM.render(<App />, document.getElementById("root"));