React Hooks理解与运用(1)

转载

mb5ff982de32716 2021-07-16 18:13:00

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

useState(initialState)的第一个参数是初始状态。返回的数组有两项:当前状态和状态更新函数。
useState一般用于简单的状态管理；复杂的可以使用useReducer；
自定义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

二 useEffect:

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