react hook

@[TOC](react hook (useState和useEffect))

react hook (useState和useEffect)

不废话，先上干货

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

function A () {
    const [a, b] = useState(1)
    useEffect(() => {
        document.title = `You clicked ${a} times`
        return () => {document.title = `react`}
    });
    // useEffect拆解，更方便理解
    // const f = function () {
    //     document.title = `You clicked ${a} times` // 加载组件时执行
    //     const f2 = function () {
    //         document.title = `react`
    //     }
    //     return f2 // 在卸载组件时或者退出这个组件时执行f2函数
    // }
    // useEffect(f)
    return <Fragment>
        <div onClick={() => b(a + 1)}>{a}</div>
    </Fragment>
}

function B () {
    return <div>B</div>
}

function Suibian () {
    const [a, b] = useState(true)
    setTimeout(() => {
        b(false)
    }, 3000)
    return <Fragment>{
        a ? <A /> : <B />
    }</Fragment>
}

export default Suibian

useState不说了，没啥说的

主要说一下useEffect吧，useEffect接受一个函数f(下面把这个函数简称为f), f里面可以返回自己的写的另一个函数（下面把这个f执行返回函数的简称为f2），加载组件时执行f，并且在卸载组件时或者退出这个组件时执行f2函数。（在代码中注释的部分就是这段话要表达的意思）