reactHook_useState、useCallback

import React,{useCallback, useState} from 'react';
import ReactDOM from 'react-dom';
class Counter extends React.Component{
    state={
        count:10
    }
    add=()=>{
        this.setState({
            count:this.state.count+1
        })
    }
    minus=()=>{
        this.setState({
            count:this.state.count-1
        })
    }
    render(){
        return <div className=''>
            <h2>当前的数字是{this.state.count}</h2>
            <button onClick={this.add}>+</button>
            <button onClick={this.minus}>-</button>
        </div>
    }
}
function Counter2(){
    // var count=20;
    //useState  返回值是一个数组，数组第一项对应的是数据；第二个是用来更改这个数据的函数
     //          参数是这个数据的初始值
    var [count,setState]=useState(20);
    function add(){
        setState(count+1) //参数是数据的新值
    }
    function minus(){
        setState(count-1)
    }
    return <>
    <h2>当前的数字是{count}</h2>
    <button onClick={add}>+</button>
    <button onClick={minus}>-</button>
    </>
}
function Counter3(){
    let [state,setState]=useState({count:10,name:'lly'})
    function add(){
        setState({...state,count:state.count+1}) //参数是数据的新值
    }
    function minus(){
        //每次点击的时候都出现name属性，需要添加
        setState({...state,count:state.count-1})
    }
    return <>
    <h2>{state.name}当前的数字是{state.count}</h2>
    <button onClick={add}>+</button>
    <button onClick={minus}>-</button>
    </>
}
function Counter4(){
    //在函数执行的时候，每一个函数都会形成一个闭包；里面用到的变量都是在执行的时候对应的值
    let [state,setState]=useState({count:10,name:'lly'})
    function add(){
        setState({...state,count:state.count+1}) //参数是数据的新值
    }
    function log(){
        //每次点击的时候都出现name属性，需要添加
        // console.log(state.count)
        //log什么时候执行，那么这里的state对应的就是执行时候的那个state不一定是最新的值
        setTimeout(()=>{
            console.log(state.count)
        },3000)
    }
    return <>
    <h2>{state.name}当前的数字是{state.count}</h2>
    <button onClick={add}>+</button>
    <button onClick={log}>log</button>
    </>
}
function Counter5(){
    let [state,setState]=useState({count:10,name:'lly'})
    function add(){
        setState({...state,count:state.count+1}) //参数是数据的新值
    }
    function lazy(){
        //每次点击的时候都出现name属性，需要添加
        setTimeout(()=>{
            setState({count:state.count+1})
        },3000)
    }
    function lazyFn(){
        setTimeout(()=>{
            setState((state)=>{
                console.log(state);
                return {count:state.count+1}
            })
        },3000)
    }
    return <>
    <h2>{state.name}当前的数字是{state.count}</h2>
    <button onClick={add}>+</button>
    <button onClick={lazy}>lazy</button>
    <button onClick={lazyFn}>lazyFn</button>
    </>
}
function Counter6(){
    //惰性初始化state，初始化操作只会在第一次执行；更新后就不再执行当前的初始化操作了
    //控制台只会弹出一次“初始化”，每次点击都会出现"render"
    let [state,setState]=useState(function(){
        console.log('初始化')
        return {count:100}
    })
    console.log('render')
    function add(){
        setState({...state,count:state.count+1}) //参数是数据的新值
    }
    return <>
    <h2>{state.name}当前的数字是{state.count}</h2>
    <button onClick={add}>+</button>
    </>
}

//使用useCallback的好处是当其中一个数据更新只会更新这一个，不会将所有的函数都重新执行，
//也就是点击那个就会更新哪个
var oldAdd=null;
function Counter7(){
    //惰性初始化state，初始化操作只会在第一次执行；更新后就不再执行当前的初始化操作了
    //控制台只会弹出一次“初始化”，每次点击都会出现"render"
    let [count,setCount]=useState(10);
    let [name,setName]=useState('lly');
    console.log('render')
//结果是点击两次之后控制台就不出现任何结果，出现的结果是true
    const add=useCallback(()=>{
        setCount(count+1) 
    },[]) //告诉useCallback当前的传进去的这个回调函数没有任何依赖
//结果都是false
    // const add=useCallback(()=>{
    //     setCount(count+1) 
    // },[count]) //告诉useCallback当前的传进去的这个回调函数依赖count
    console.log(add==oldAdd);
    oldAdd=add;
    const changeName=useCallback(()=>{
        setName('lingyan');
    })
    return <>
    <h2>{name}当前的数字是{count}</h2>
    <button onClick={add}>+</button>
    <button onClick={changeName}>changeName</button>
    </>
}
ReactDOM.render(<>
<Counter7/>
</>,document.getElementById('root'))