react hooks 周全转换攻略(一) react本篇之useState,useEffect

2024年4月20日 368次阅读 来源: Grewer

useState

典范案例:

import { useState } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  )
}

此例子中, useState(0) 是最新的 hooks api;
语法:

function useState<S>(initialState: S | (() => S)): [S, Dispatch<SetStateAction<S>>];

个中 state 是他的值, setState 是用来设置值的函数, initialState 是初始值

useState-initialState

该初始值可以接收任何参数,然则记妥当他接收为一个函数时,就变成了Lazy initialization (耽误初始化)
该函数返回值即为initialState

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

const [count, setCount] = useState(()=>0);
// 这两种初始化体式格局 是相称的,然则在函数为初始值时会被实行一次

const [count, setCount] = useState(()=>{
    console.log('这里只会在初始化的时刻实行')
    // class 中的 constructor 的操纵都可以移植到这里
    return 0
});
// 当第一次实行终了后 就和另一句的代码是雷同的结果了

useState-setState

或许很多人 在运用 class 的 setState 时刻,会常常运用他的回调函数,
然则这里很遗憾,他只接收新的值,假如想要对应的回调,可以运用useEffect,这个题目等会会供应一个跳转链接

useEffect

语法:

function useEffect(effect: EffectCallback, deps?: DependencyList): void;

典范案例:

useEffect(() => {
  console.log('在 dep 转变时触发,若无 dep 则,每次更新组件都邑触发')
  return () => {
    console.log('在组件 unmount 时触发')
  };
});

deps 必需是一个数组,然则假如是一个空数组时:

  useEffect(() => {
    console.log('结果的即是 componentDidMount')
  }, [])

纵然有 deps ,他在初始化时也会触发一次

与 setState 构成回调函数:

在useState-setState 中提到, class 中 setState 都是有回调的,而在 hooks 中 经由过程 useEffect 一样也可以完成它的结果

关于回调值的探秘:

提及回调值,他能接收很多值,然则我们要搞清晰一点 他究竟可以接收什么值,而他的变化的检测:

起首我们应当清晰, string,number,undefined,null 他的值都是可以一般检测的,
题目的症结照样在于 object 和 function

关于 object 的实验:

将回调值设置为一个在 function 表面的 object:

let deps = {grewer: 1}

在点击按钮时:

deps.grewer = deps.grewer + 1;
console.log(deps)

可以发明:
deps.grewer 的值在变化,然则 effect 却没有触发

而如许设置值时:

deps = {grewer: deps.grewer + 1};

每次都邑触发 effect 函数

再次实验:

deps = Object.assign({}, deps)

一样地 每次都邑触发 effect 函数

得出结论:

  • 当依靠值为 object 时,他的值援用发生变化就会触发 effect 的更新
  • 然则假如只是对象里某个值变化而援用不变化,effect 照旧不会触发

关于 function 的实验结论:

  • 假如初始值为 function, 而将其改成数字等,会触发 effect
  • function 也是一个对象,当我们增加一个值在上面时,他的 effect 也不会触发
  • 援用为一个新函数时,他每次都邑触发;

实验终了,置信人人关于 effect 也有了很多的相识

后续还会报告其他 hooks api 与 redux 的周全转换, eslint 的新设置等

相干文章:

    原文作者：Grewer
    原文地址: https://segmentfault.com/a/1190000018781083
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞