使用 Effect Hook

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

function HookPage() {

    const [count, setCount] = useState(0)
    const [date, setDate] = useState(Date.now())

    useEffect(() => {
        console.log("count Effect");
        document.title = count;
    }, [count])

    useEffect(() => {
        console.log("date Effect");

        const timeHandle = setInterval(() => {
            setDate(Date.now())
        }, 1000);
        return () => clearInterval(timeHandle);
    }, [])

    return (
        <div>
            <h3>HookPage</h3>

            <button onClick={() => setCount(count + 1)}>count:{count}</button>

            <div>{date}</div>
        </div>
    )
}

• useState 定义数据当数据发生改变，会引起render 函数自动产生副作用，从而更新。
• useEffect 定义自己的副作用,函数初始化，会调用一次，后面，第二个数组里面的参数发生变化，都会引起此副作用的调用
• useEffect return 的函数，会在组件卸载时调用,类似于WillUnmount

自定义Hook

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

function HookPage() {

    const [count, setCount] = useState(0)


    let date = useDate()

    useEffect(() => {
        console.log("count Effect");
        document.title = count;
    }, [count])


    return (
        <div>
            <h3>HookPage</h3>

            <button onClick={() => setCount(count + 1)}>count:{count}</button>

            <div>{date}</div>
        </div>
    )
}


export default HookPage


// 自定义Hook
function useDate(params) {
    const [date, setDate] = useState(Date.now())

    useEffect(() => {
        console.log("date Effect");

        const timeHandle = setInterval(() => {
            setDate(Date.now())
        }, 1000);
        return () => clearInterval(timeHandle);
    }, [])

    return date;
}

• 自定义Hook是一个函数，其名称是以use开头,函数内部可以调用其他的Hook.

• 只能在函数最外层调用Hook,不能再if,for,或者子函数中调用

• 只能在React的函数组件中调用Hook,不能在其他javaScript函数中调用,(自定义Hook中可以调用Hook)

useuseMemo

    const expensive = useMemo(() => {
        console.log("compute");
        let sun = 0;
        for (let index = 0; index < count; index++) {
            sun += index;
        }
        return sun;
    }, [count])

<div>expensive :{expensive}</div>

• 接受两个参数，一个执行函数，一个依赖数组,当依赖数组里面的参数发生变换，才会执行函数,有助与优化
• 完整代码

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

function HookPage() {

    const [count, setCount] = useState(0)

    const expensive = useMemo(() => {
        console.log("compute");
        let sun = 0;
        for (let index = 0; index < count; index++) {
            sun += index;
        }
        return sun;
    }, [count])

    let date = useDate()

    useEffect(() => {
        console.log("count Effect");
        document.title = count;
    }, [count])


    return (
        <div>
            <h3>HookPage</h3>

            <div>expensive :{expensive}</div>

            <button onClick={() => setCount(count + 1)}>count:{count}</button>

            <div>{date}</div>
        </div>
    )
}


export default HookPage



function useDate(params) {
    const [date, setDate] = useState(Date.now())

    useEffect(() => {
        console.log("date Effect");

        const timeHandle = setInterval(() => {
            setDate(Date.now())
        }, 1000);
        return () => clearInterval(timeHandle);
    }, [])

    return date;
}

useCallback

    const addClick = useCallback(() => {
        console.log('useCallback');
        let sun = 0;
        for (let index = 0; index < count; index++) {
            sun += index;
        }
        return sun;
    }, [count])

完整代码

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

function HookPage() {

    const [count, setCount] = useState(0)

    const addClick = useCallback(() => {
        console.log('useCallback');
        let sun = 0;
        for (let index = 0; index < count; index++) {
            sun += index;
        }
        return sun;
    }, [count])

    let date = useDate()

    useEffect(() => {
        console.log("count Effect");
        document.title = count;
    }, [count])


    return (
        <div>
            <h3>HookPage</h3>

            <button onClick={() => setCount(count + 1)}>count:{count}</button>

            <div>{date}</div>

            <Child addClick={addClick} />
        </div>
    )
}


export default HookPage



function useDate(params) {
    const [date, setDate] = useState(Date.now())

    useEffect(() => {
        console.log("date Effect");

        const timeHandle = setInterval(() => {
            setDate(Date.now())
        }, 1000);
        return () => clearInterval(timeHandle);
    }, [])

    return date;
}

class Child extends PureComponent {
    render() {
        console.log("child render")
        const { addClick } = this.props

        return (
            <div>
                <h3>child</h3>
                <button onClick={() => console.log(addClick())}>add</button>
            </div>
        );
    }
}