一 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
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来说;
推荐阅读:
类和钩子函数的理解:https://www.ruanyifeng.com/blog/2020/09/react-hooks-useeffect-tutorial.html
useEffect与useLayoutEffect区别:https://www.cnblogs.com/fulu/p/13470126.html