初步学习 useState,useEffect 以及自定义 Hook

1. 代码

import React, { useState, useEffect } from "react";
import Text from "./Text";
import Background from "./Background";

// Hook 是为了在无状态组件中使用 state 状态和生命周期等，使之成为 函数组件
// react 本身一种函数式编程，Hook 的存在使之更能称之为函数式编程

//1. 实现一个通过 props 传递颜色并改变字体颜色的，以及一个改变背景颜色的
//2. 两个组件分别实现通过 button 能够切换颜色的功能
//3. 需要引入 state，并且此时在无状态组件中，我们就需要 useState 的存在
//4. 实现颜色变化时 console.log。因此需要生命周期的存在，所以需要引入 useEffect
//5. 因为功能相同，所以考虑抽出功能部分，这时就需要了自定义 Hook 的存在

function useChangeColor(myColor) {
    const [color, setColor] = useState(myColor);
    // useEffect 视作 componentDidMount、componentDidUpdate 和 componentWillUnmount 的结合
    // useEffect 会在每次 render 之后调用
    useEffect(() => {
        console.log(`颜色变成${color} 色啦！`);
        return () => {
            // 里面的内容相当于 componentWillUnmount
            console.log('溜啦溜啦')
        };
    },[color]);
    //1. 没有可选参数 --- 等价于 componentDidMount 和 componentDidUpdate
    //2. [] --- 代表只在 componetDidMount 时执行
    //3. [xxx] --- 代表在 xxx 发生变化时候会自动触发 effect 里面的方法，如果 xxx 无变化，则 effect 里的方法不作用

    return [color, setColor];
}

function ChangeColor() {
    const [color, setColor] = useChangeColor("#00E5EE");
    return (
        <>
            <Text color={color}></Text>
            <button onClick={() => setColor("#00E5EE")}>变蓝色</button>
            <button onClick={() => setColor("#4EEE94")}>变绿色</button>
        </>
    );
}
function ChangeBackground() {
    const [color, setColor] = useChangeColor("#4EEE94");
    return (
        <>
            <Background color={color}></Background>
            <button onClick={() => setColor("#00E5EE")}>变蓝色</button>
            <button onClick={() => setColor("#4EEE94")}>变绿色</button>
        </>
    );
}
export default { ChangeColor, ChangeBackground };
2. 整理图片

今日 Hook.png
最后编辑于：2020.05.06 01:52:04