preact的hooks使用-UseEffect

Mr.[先知]

最近在看关于react的hooks机制,学习了很多新的东西
分享一下
1.从class组件向函数式组件的转变,有了useState,useEffect,useCallback 很方便的对状态和组件方法进行使用

[JavaScript] 纯文本查看 复制代码

import { useState, useEffect, useCallback, useContext } from "../libs/hooks";

export default function Counter() {
    const [value, setValue] = useState(0);
//定义一个状态 初始值为0,value是状态名称,setValue是改变状态的方法,其实可以理解为getter和setter
    const increment = useCallback(() => {
        setValue(value + 1);
    }, [value]);
//定义一个回调函数 
    const [time, setTime] = useState(Date.now());
    useEffect(() => {
        let timer = setInterval(() => {
            setTime(Date.now());
        }, 1000);
        console.log('ef1')
        return function cleanup() {
            clearInterval(timer);
        };
//在这个Effect的回调函数中,return 一个函数,名字随意,这个就是清理函数,在组件卸载以后 清理一些不用的函数使用
//SPA的开发中特别是定时器这样的 如果开启了 但是未进行清理, 一直都会在内存中运行
//总之 要将函数运行控制在组件的生命周期之内是相对更优的处理方法
//Hook 允许我们按照代码的用途分离他们， 而不是像生命周期函数那样。React 将按照 effect 声明的顺序依次调用组件中的每一个 effect。


        //return () => {}
    }, []);

    return (
        <div>            <h2>
                当前时间:<span>{new Date(time).toLocaleTimeString()}</span>
            </h2>
            当前计数: {value}
            <br />
            <button onClick={increment}>
                Counter+1
            </button><br />
        </div>
    );
}

useEffect 做了什么？ 通过使用这个 Hook，你可以告诉 React 组件需要在渲染后执行某些操作。React 会保存你传递的函数（我们将它称之为 “effect”），并且在执行 DOM 更新之后调用它。在这个 effect 中，我们设置了 document 的 title 属性，不过我们也可以执行数据获取或调用其他命令式的 API。

为什么在组件内部调用 useEffect？ 将 useEffect 放在组件内部让我们可以在 effect 中直接访问 count state 变量（或其他 props）。我们不需要特殊的 API 来读取它 —— 它已经保存在函数作用域中。Hook 使用了 JavaScript 的闭包机制，而不用在 JavaScript 已经提供了解决方案的情况下，还引入特定的 React API。

useEffect 会在每次渲染后都执行吗？ 是的，默认情况下，它在第一次渲染之后和每次更新之后都会执行。（我们稍后会谈到如何控制它。）你可能会更容易接受 effect 发生在“渲染之后”这种概念，不用再去考虑“挂载”还是“更新”。React 保证了每次运行 effect 的同时，DOM 都已经更新完毕。

好了 先分享在这里
如果有不对的地方 请大佬指出

hong_sun

也是学习了！！

Mr.[先知]

要不要继续写了呀 感觉没有人看
太基础了吗