React Hooks之useState与useEffect

一 useState状态管理：https://www.jianshu.com/p/700777ea9db0

  1 useState(initialState)的第一个参数是初始状态。返回的数组有两项:当前状态和状态更新函数。

•    useState函数式更新与普通更新：函数式更新保证每次更新都是基于最新的值更新：https://www.cnblogs.com/guanghe/p/14177473.html

  2 useState一般用于简单的状态管理；复杂的可以使用useReducer；

  3 自定义Hooks: 适用场景：在两个函数之间共享逻辑时，我们会把它提取到第三个函数中。而组件和 Hook 都是函数，所以也同样适用这种方式。https://zh-hans.reactjs.org/docs/hooks-custom.html

import React, { useState, useEffect, memo, useMemo, createContext, useRef, useContext } from 'react'

// 自定义Hooks需要以use开头
const useToggle = (initial) => {
  const [on, setOn] = useState(initial);
  const handleOn = (value) => {
    console.log(value);
    setOn(value)
  }
  return [on, handleOn]
}

function App () {
  const [on, setOn] = useToggle(false);
  const lightSwitch = () => setOn(!on);
  return (
    <>
      <div className="bulbs">{on?'开':'关'}</div>
      <button onClick={lightSwitch}>开/关</button>
    </>
  );
}

export default App

  4 状态延迟初始化：

• 每当 React 重新渲染组件时，都会执行useState(initialState)。 如果初始状态是原始值（数字，布尔值等），则不会有性能问题。
• 当初始状态需要昂贵的性能方面的操作时，可以通过为useState(computeInitialState)提供一个函数来使用状态的延迟初始化。
• getInitialState()仅在初始渲染时执行一次，以获得初始状态。在以后的组件渲染中，不会再调用getInitialState()，从而跳过昂贵的操作

 

 二 useEffect:

1. 清除effect: useEffect()允许返回一个函数，在组件卸载时，执行该函数，清理副效应。如果不需要清理副效应，useEffect()就不用返回任何值。
2. effect执行时机：默认情况下，它在第一次渲染之后和每次更新之后都会执行；React 保证了每次运行 effect 的同时，DOM 都已经更新完毕。(useEffect Hook 可看做 componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个函数的组合。)
3. effect执行条件：可以给 useEffect 传递第二个参数，它是 effect 所依赖的值数组；
4. useEffect是异步的，useLayoutEffect是同步的，异(同)步是相对于浏览器执行刷新屏幕Task来说；

推荐阅读：

类和钩子函数的理解：https://www.ruanyifeng.com/blog/2020/09/react-hooks-useeffect-tutorial.html

useEffect与useLayoutEffect区别：https://www.cnblogs.com/fulu/p/13470126.html