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

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 的新配置等