useState

初始化两种两种赋值方式直接赋值和箭头函数里加return
修改setState两种方式
useState都是异步

    
    // 1 两种赋值方式
    const [x, setX] = useState(0)
    const [y, setY] = useState(() => {
        // 必须有return
         return
    })
    // 2 修改setState两种方式
    const onClick = () => {
        setX(x + 1)//异步 所以会等代码块全部执行完 再执行
        console.log(x, '同步');
        
        // 如果想打印最新的值
        setX(pre => {
            console.log(pre, '异步');
            // return pre + 1//这里也可以进行加减
            return pre
        })
        
        // 相同方法调用多次，只有最后一次有效 （前面也都执行了 只是没有效果 不生效）
        // setX(x + 1)
        // setX(x + 1)
        // setX(x + 1)

        // 如果是不同方法 不可能页面刷新我所调用set的次数 它会合并成一次 去刷新render 
        // setZ(z + 1)
        // setY(y + 1)
        
    }
 
    return (
        <div>hooks2
            <h1 onClick={onClick}>点击</h1>
        </div>
    )

useEffect

    // 当依赖为空时  模拟componentDidMount 挂载实例生命周期 
    useEffect(() => { }, [])
    
    // 当依赖有值时 (依赖就是第二个参数)  模拟componentDidUpdate 加载中更新生命周期
    useEffect(() => { }, [x])
    
    //这里模拟componentWillUnMount 卸载生命周期 
    useEffect(() => {
        return (() => {
            // 当页面 路由跳转 页面更新就会执行 
            console.log("我被卸载了");
        })
    }, [])

react生命周期

react 生命周期目前分为三个阶段

react 16.4 之前类组件

加载阶段：constructor render componentDidMount
更新阶段：shouldComponentUpdate(nextProps, nextState) return false 组件不渲染 return true 组件才会渲染、render 、 componentDidUpdate
卸载阶段：componentWillUnmount

react 16.4 之后类组件

加载阶段：constructor、render、componentDidMount、getDerivedStateFromProps(从更新后的props中获取State 获取数据状态的)、
更新阶段：shouldComponentUpdate(nextProps, nextState) return false 组件不渲染 return true 组件才会渲染、 getDerivedStateFromProps、 render、componentDidUpdate、getSnapshotBeforeUpdate(获取render渲染之前的dom状态获取dom的)、
卸载阶段： componentWillUnmount

React 16.8 更新了 Hooks 之后

常用有8个hooks 目前已知(useState、useEffect、useRef、useContext、useCallback、useMemo、useImperativeHandle) 这7个hook 和forward、 memo 两个搭配的高阶函数

useState | useEffect | react生命周期

useState

useEffect

react生命周期

react 生命周期 目前分为三个阶段

react 生命周期目前分为三个阶段