React中状态提升

代码案例

function A({ onGetAName }) {
    const name = `> ${new Date().getTime()} <`;
    return (
        <div>
            This is A component !
            {/*箭头函数形式来调用事件函数*/}
            <button onClick={() => onGetAName(name)}>sendAName</button>
        </div>
    )
}

function B({name}) {
    return (
        <>
            Transfer Data from A: {name}
            This is B component !
        </>
    )
}


// 1. 通过子传父 A -> App
// 2. 通过父传子 App -> B

function App() {
    const [name, setName] = useState('');
    const getAName = (name) => {
        console.log('【print】name: ', name)
        setName(name)
    }

    return (<>
        This is App
        <A onGetAName = {getAName}/>
        <B name={name}/>
    </>)
}

export default App;

useEffect依赖项参数说明

• useEffect使用案例

function App() {
    // 1. 没有依赖项 - 每次都会更新
    useEffect(() => {
        console.log('每次更新都会触发！', )
    })

    let [count, setCount] = useState(0);

    const changeCount = () => {
        setCount(++count);
    }

    useEffect(() => {
        console.log('空数组的时候只会在初始渲染的时候触发', )
    }, [])

    useEffect(() => {
        return () => {
            console.log('初始渲染以及count发生变化的时候触发', )
        };
    }, [count]);

    return (<>
        <button onClick={changeCount}>change count</button>
    </>)
}
// 每次更新都会触发！
// 空数组的时候只会在初始渲染的时候触发
// 初始渲染以及count发生变化的时候触发
// 每次更新都会触发！
// 初始渲染以及count发生变化的时候触发
// 每次更新都会触发！

export default App;

useEffect清除副作用代码案例

function Son() {
    // 渲染的时候开启一个定时器
    useEffect(() => {
            const timer = setInterval(() => {
                console.log('每隔1s触发一次',)
            }, 1000)
        return (() => {
            clearInterval(timer)
        })
        },
        [])
    return (<>

    </>)
}

function App() {
    // 通过条件渲染模拟组件卸载
    const [show, setShow] = useState(true);

    return (<>
        <div>
            {show && <Son/>}
            <button onClick={() => setShow(false)}>
                卸载Son组件
            </button>
        </div>
    </>)
}


export default App;