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

 1 import React, { useState, useEffect, memo, useMemo, createContext, useRef, useContext } from 'react'
 2 
 3 // 自定义Hooks需要以use开头
 4 const useToggle = (initial) => {
 5   const [on, setOn] = useState(initial);
 6   const handleOn = (value) => {
 7     console.log(value);
 8     setOn(value)
 9   }
10   return [on, handleOn]
11 }
12 
13 function App () {
14   const [on, setOn] = useToggle(false);
15   const lightSwitch = () => setOn(!on);
16   return (
17     <>
18       <div className="bulbs">{on?'开':'关'}</div>
19       <button onClick={lightSwitch}>开/关</button>
20     </>
21   );
22 }
23 
24 export default App

View Code

4 状态延迟初始化：

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

二 useEffect:

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