react --hooks

1 useState

import React,{useState} from 'react'

export default () => {
    const [state, setstate] = useState(0)  //初始化state为0
    const [state1, setstate1] = useState(2)  //初始化state1为1

    return 
        <div>
            <p>{state}</p>
            <p>{state1}</p>
            <buttOn onClick = {() => {
                setstate (x = x + 1)
                setstate1 (x = x * 2)
            }}> Add </buttOn>
        </div>
}     //render执行时会合并 不会多次渲染

2 useEffect （ function（）{}，[deps])   依据[deps]变化的作用

import React,{useState , useEffect} from 'react'

export default () => {
    const [state, setstate] = useState(0)  //初始化state为0
    useEffect( ()=>{   //componentDidMount
        setTimeout(()=>{
            setstate(x => x + 1)
        },1000)
        return ()=>{    //componentWillUnMount
            //可以用来回收释放内存
        }
    },[])
　　useEffect( ()=>{

   },[props] )   //可以监听值的变化,变化后进入    componentWillReceive

 //useEffect 记录所有的生命周期,提供变化的条件,第二个参数[]作为变化的依赖 return <div> <p>{state}</p> </div> }

3 useRef

// 待补充cy

 

4

 

5

 

6

 

7