useEffect与useState的使用

const App=props=>{
    const [n, setN] = React.useState(0);  //useState()返回一个数组，第一个是读，第二个是写
    const addN = () => {                  //声明state和函数就相当于类组件的constructor生命周期
        setN(n+1);
    }
    useEffect(() => {    //useEffect()第一个参数是一个回调，第二个参数指明要模拟什么生命周期
        console.log(' use effect')
    }, [])               //如果第二个参数为[ ] 空数组，则表示 conponentDidMount()
    useEffect(() => {
        console.log('n 被修改了')
    }, [n])             //如果第二个参数为一个变量，则表示改变量变了会执行，它模拟conponentDidUpdate()
                        //如果要看多个变量是否变化，可以写一个数组，如 [n, m]
                        //如果不传递第二个参数，则表示改组件中任意的一个state变化都会执行
    useEffect(() => {
        console.log(' use effect')
        return ()=>{
            console.log('组件要 G');    //useEffect()在第一个回调中的返回函数会在组件将死时调用
        }                               //这是用来模拟类组件的 componentWillUnMount()
    })
    return (            //相当于类组件的render生命周期
        <div>{n}
        <button onclick={ addN }>+1</button></div>
    }
}

useState小结

1. useState传入一个值，作为初始化的值
2. useState返回一个数组，第一个元素为获取值，第二个元素为设置值的一个函数

useEffect小结

1. useEffect()第一个参数是一个回调函数，第二个参数是一个数组指明要模拟什么生命周期
2. 模拟生命周期:
3. 如果第二个参数为[] 空数组，则表示 componentDidMount()
4. 如果第二个参数为一个有值的数组，则表示数组内的元素改变了会执行，它模拟componentDidUpdate()
5. 如果第一个参数的回调函数，返回了一个函数，则该函数会在组件卸载时执行，它模拟componentWillUnmount()
6. 函数式组件函数的返回值用来模拟render()
7. 如果需要模拟shouldComponentUpdate()需要使用memo与useMemo()