react hook

React Hooks

  • 每次render 都有獨(dú)立的變量和Effects

1. useState

  • vue - data 
data() {
    return {
        count: 0
    }
}
  • react類組件里面的 state 
interface CounterStateObj {
    count: number
}
export class Counter extends React.Component <any, CounterStateObj>{
    constructor(props) {
        super(props);
        this.state = {
            count: 0
        };
    }
}
  • hook
function Counter() {
    const [count, setCount] = useState<number>(0);
    const log = () => {
        setTimeout(() => {
            console.log('2秒后', count)
        }, 2000)
        console.log(count)
    }
    const clickHandler = () => {
        log()
        setTest(count + 1)
    }
    return (
        <div>
            <p>clicked {count} times</p>
            <button onClick={clickHandler}>Click me</button>
        </div>
    );
}
  • Capture Value
頁面 log函數(shù)
1 0
2 1
3 2
... ...
  • 類比照相機(jī)對著一個(gè)杯子拍照惠桃，第二張杯子碎了氨距，但第一張照片永遠(yuǎn)是好的（每次setState就是新拍了一張照片，它不會影響前一個(gè)capture的狀態(tài)）
function Example2() {
    const [count, setCount] = useState(0);

    const handleClick = () => {
        setTimeout(() => {
            setCount(count + 1);
        }, 3000);
    };

    return (
        <div>
            <p>{count}</p>
            <button onClick={() => setCount(count + 1)}>
                setCount
            </button>
            <button onClick={handleClick}>
                Delay setCount
            </button>
        </div>
    );
}

操作 先點(diǎn)擊第二個(gè)按鈕， 然后在3秒內(nèi)連續(xù)點(diǎn)擊兩次第一個(gè)按鈕

頁面結(jié)果 0 -> 1 -> 2 -> 1

問題 --- 接著再重復(fù)操作呢麻诀？

  • 拿到最新的值
setCount(data => data + 1)

2. useRef

  • useRef 返回的 ref 對象在組件的整個(gè)生命周期內(nèi)保持不變献酗，也就是說每次重新渲染函數(shù)組件時(shí)，返回的ref 對象都是同一個(gè)（使用 React.createRef 偎窘，每次重新渲染組件都會重新創(chuàng)建 ref）
function Counter() {
    const count = useRef<number>(0);
    const domRef = useRef<HTMLDivElement>()
    const clickHandler = () => {
        count.current++
    }
    return (
        <div>
            <p>You clicked {count.current} times</p>
            <div ref='domRef'></div>
            <button onClick={clickHandler}>Click me</button>
        </div>
    );
}
  • 訪問dom
    • vue
      <div ref='aa'></div>
  this.$refs['aa']
    • react class
    class MyComponent extends React.Component {
    constructor(props) {
        super(props);
        this.myRef = React.createRef();
    }
    render() {
        return <div ref={this.myRef} />;
    }
}

3. useCallback

  • 依賴不變乌助，返回的是同一個(gè)函數(shù)
const [contentClassName, setContentClassName] = useState<string>('')
const resizeHandler = useCallback(() => {
         if (contentClassName) {
             setH(contentClassName)
         }
 }, [contentClassName])

    useEffect(() => {
        let event: UEventEmitter = Ioc(UEventEmitter)
        event.on('fullScreenChange', () => {
            resizeHandler()
        })
        window.addEventListener('resize', resizeHandler)
        return () => {
            window.removeEventListener('resize', resizeHandler)
            event.delete('fullScreenChange')
        }
    }, [contentClassName, resizeHandler])

4. useEffect

  • 只要狀態(tài)更新，它就會根據(jù)傳入的依賴項(xiàng)決定是否執(zhí)行陌知， 可以拿到最新的狀態(tài)
  • react 類組件 里面的 componentDidMount + componentDidUpdate
  • Vue created + updated
  • 與 componentDidMount 或 componentDidUpdate 不同他托， useEffect 調(diào)度的 effect 不會阻塞瀏覽器更新屏幕，這讓你的應(yīng)用看起來響應(yīng)更快
// 變化執(zhí)行
useEffect(() => {

})
// 變化不執(zhí)行
useEffect(() => {

}, [])

// 只有 test 變化才會執(zhí)行
useEffect(() => {
  return () => {}
}, [test])

5. useMemo

  • 類比 Vue 的 computed
  • 適合大量計(jì)算仆葡，緩存值赏参，依賴不變不會重新更新
const [value, setValue] = useState(0);
const increase = useMemo(() => {
    if(value > 2) return value + 1;
}, [value]);
  • 和React.memo()、React.PureComponent區(qū)別沿盅？

React.memo()適用函數(shù)組件把篓，僅僅淺比較props
React.PureComponent類組件，淺比較props和state腰涧，根據(jù)結(jié)果決定是否重新渲染組件

function Parent({ a, b }) {
  // Only re-rendered if `a` changes:
  const child1 = useMemo(() => <Child1 a={a} />, [a]);
  // Only re-rendered if `b` changes:
  const child2 = useMemo(() => <Child2 b=韧掩 />, [b]);
  return (
    <>
      {child1}
      {child2}
    </>
  )
}

6. useContext

  • 獲取context值

7. useReducer

  • 像 redux一樣管理數(shù)據(jù)和行為

8. useLayoutEffect

  • 瀏覽器 layout 之后，painting 之前執(zhí)行
  • 可以獲取元素樣式

react hooks詳解實(shí)戰(zhàn)

輪子

1.實(shí)現(xiàn)類似類組件的生命周期

  • componentDidMount
export function useOnMount(fn: () => void, destoryCallBack?: () => void) {
    useEffect(() => {
        fn()
        if (destoryCallBack) {
            return () => {
                destoryCallBack()
            }
        }
    // eslint-disable-next-line
    }, [])
}
  • componentDidUpdate
export function useOnUpdate(fn: () => void, dep?: any[]) {
    const ref = useRef({ fn, mounted: false })
    ref.current.fn = fn
  
    useEffect(() => {
        // 首次渲染不執(zhí)行
        if (!ref.current.mounted) {
            ref.current.mounted = true
        } else {
            ref.current.fn()
        }
    // eslint-disable-next-line
    }, dep)
}
  • forceUpdate
export function useForceUpdate() {
    const [, setValue] = useState(0)
    return useCallback(() => {
        // 遞增state值窖铡，強(qiáng)制React進(jìn)行重新渲染
        setValue(val => (val + 1) % (Number.MAX_SAFE_INTEGER - 1))
      }, [])
}

2.實(shí)現(xiàn)多語言

  • 當(dāng)語言變化的時(shí)候 觸發(fā)一次render
  • 根據(jù)當(dāng)前語言返回對應(yīng)的值
import { store } from '../store/redux';   // redux
import { sysLanguage } from '../config/langulate';  // 語言配置文件
import { useState, useEffect } from 'react';  
import { LangValue } from '../interface/common';  // 接口
export function useLanguage() {
    const [lang, setLang] = useState<LangValue>(store.getState().user.lang)
    useEffect(() => {
        let unsubscribe = store.subscribe(() => {
            setLang(store.getState().user.lang)
        })
        return () => {
            unsubscribe()
        }
    // eslint-disable-next-line
    }, [])
    return [(cn: string) => {
            if (cn && sysLanguage[lang] && sysLanguage[lang][cn]) {
                return sysLanguage[lang][cn]
            } else {
                return cn || ''
            }
        }
    ]
}

優(yōu)化

    1. 大量計(jì)算 適用useMemo,
    1. 為避免子組件的不必要渲染疗锐，useMemo + React.memo() 或 React.PureComponent

例1

function Test() {
    console.log('test render')
    return (
        <div className="test">
            呵呵呵
        </div>
    )
}

export function App() {
    const [test, setTest] = useState(1)
    console.log('app render')
    return (
        <div className='app-container' onClick={() => setTest(test + 1)}>
            { test }
            <Test/>
        </div>
    )
}

每次點(diǎn)擊 App 和 Test 各重新渲染一次

例1優(yōu)化

function TestTem() {
    console.log('test render')
    return (
        <div className="test">
            呵呵呵
        </div>
    )
}
const Test = React.memo(TestTem)
export function App() {
    const [test, setTest] = useState(1)
    console.log('app render')
    return (
        <div className='app-container' onClick={() => setTest(test + 1)}>
            { test }
            <Test/>
        </div>
    )
}

每次點(diǎn)擊 只有 App 重新渲染

例2

type ConfigObj = {
    name: number
}
function TestTem(props: {
    config: ConfigObj
}) {
    console.log('test render')
    return (
        <div className="test">
            呵呵呵
            {props.config.name}
        </div>
    )
}
const Test = React.memo(TestTem)
export function App() {
    const [test, setTest] = useState(1)
    const [nameData, setNameData] = useState(1)
    const config: ConfigObj = {
        name: nameData
    }
    const clickHandler = () => {
        setTest(test + 1)
        // setNameData(nameData + 2)
    }
    console.log('app render')
    return (
        <div className='app-container' onClick={clickHandler}>
            { test }
            <Test config={config}/>
        </div>
    )
}

每次點(diǎn)擊 App 和 Test 各執(zhí)行一次

例2優(yōu)化

type ConfigObj = {
    name: number
}
function TestTem(props: {
    config: ConfigObj
}) {
    console.log('test render')
    return (
        <div className="test">
            呵呵呵
            {props.config.name}
        </div>
    )
}
const Test = React.memo(TestTem)
export function App() {
    const [test, setTest] = useState(1)
    const [nameData, setNameData] = useState(1)
    // 優(yōu)化
    const config: ConfigObj = useMemo(() => {
        return {
            name: nameData
        }
    }, [nameData])
    const clickHandler = () => {
        setTest(test + 1)
        // setNameData(nameData + 2)  // 放開這句話 會讓config 產(chǎn)生變化 Test會重新渲染
    }
    console.log('app render')
    return (
        <div className='app-container' onClick={clickHandler}>
            { test }
            <Test config={config}/>
        </div>
    )
}
    1. 惰性創(chuàng)建昂貴的對象
    const aaa = () => {
        console.log('喀納斯')
        return 1
    }
    // 每次render，都會執(zhí)行一遍
    const [test, setTest] = useState<number>(aaa())
    // 只會被執(zhí)行一次 
    const [test, setTest] = useState<number>(() => aaa())
    1. 在useEffect里面及時(shí)解綁事件
    const resizeHandler = useCallback(() => {
            if (contentClassName) {
                setH(contentClassName)
            }
        }, [contentClassName])
    useEffect(() => {
        let event: UEventEmitter = Ioc(UEventEmitter)
        event.on('fullScreenChange', () => {
            resizeHandler()
        })
        window.addEventListener('resize', resizeHandler)
        return () => {
            window.removeEventListener('resize', resizeHandler)
            event.delete('fullScreenChange')
        }
    }, [contentClassName, resizeHandler])
    1. 通用邏輯抽取為自定義hook
    1. 復(fù)雜的操作和狀態(tài)變更费彼，適用useReducer
    1. 避免向下傳遞回調(diào), 在大型的組件樹中滑臊，我們推薦的替代方案是通過 context 用 useReducer往下傳一個(gè) dispatch 函數(shù)：
const TodosDispatch = React.createContext(null);

function TodosApp() {
  // 提示：`dispatch` 不會在重新渲染之間變化
  const [todos, dispatch] = useReducer(todosReducer);

  return (
    <TodosDispatch.Provider value={dispatch}>
      <DeepTree todos={todos} />
    </TodosDispatch.Provider>
  );
}

function DeepChild(props) {
  // 如果我們想要執(zhí)行一個(gè) action，我們可以從 context 中獲取 dispatch箍铲。
  const dispatch = useContext(TodosDispatch);

  function handleClick() {
    dispatch({ type: 'add', text: 'hello' });
  }

  return (
    <button onClick={handleClick}>Add todo</button>
  );
}
    1. 每次render 組件執(zhí)行兩次雇卷？
export default function Test () {
    const [test, setTest] = useState(1)
    console.log('1111')
    return (
        <div>
            {test}
            <div onClick={() => setTest(test + 1)}>
                23123123
            </div>
        </div>
    )
}

嚴(yán)格模式不能自動(dòng)檢測到你的副作用，但它可以幫助你發(fā)現(xiàn)它們，使它們更具確定性关划。通過故意重復(fù)調(diào)用以下函數(shù)來實(shí)現(xiàn)的該操作

嚴(yán)格模式

    1. Hook 會因?yàn)樵阡秩緯r(shí)創(chuàng)建函數(shù)而變慢嗎膘融？

不會

官方回答

來自知乎社區(qū)的回答

** 項(xiàng)目結(jié)構(gòu)


IRIS.png
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末，一起剝皮案震驚了整個(gè)濱河市祭玉，隨后出現(xiàn)的幾起案子氧映，更是在濱河造成了極大的恐慌，老刑警劉巖脱货，帶你破解...
    沈念sama閱讀 218,122評論 6贊 505
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件岛都，死亡現(xiàn)場離奇詭異，居然都是意外死亡振峻，警方通過查閱死者的電腦和手機(jī)臼疫，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,070評論 3贊 395
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來扣孟，“玉大人烫堤，你說我怎么就攤上這事》锛郏” “怎么了鸽斟？”我有些...
    開封第一講書人閱讀 164,491評論 0贊 354
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵，是天一觀的道長利诺。 經(jīng)常有香客問我富蓄，道長，這世上最難降的妖魔是什么慢逾？ 我笑而不...
    開封第一講書人閱讀 58,636評論 1贊 293
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任立倍，我火速辦了婚禮，結(jié)果婚禮上侣滩，老公的妹妹穿的比我還像新娘口注。我一直安慰自己，他們只是感情好君珠，可當(dāng)我...
    茶點(diǎn)故事閱讀 67,676評論 6贊 392
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布寝志。 她就那樣靜靜地躺著，像睡著了一般葛躏。 火紅的嫁衣襯著肌膚如雪澈段。 梳的紋絲不亂的頭發(fā)上，一...
    開封第一講書人閱讀 51,541評論 1贊 305
  • 城市分裂傳說
    那天舰攒，我揣著相機(jī)與錄音，去河邊找鬼悔醋。 笑死摩窃，一個(gè)胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播猾愿，決...
    沈念sama閱讀 40,292評論 3贊 418
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼鹦聪，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了蒂秘？” 一聲冷哼從身側(cè)響起泽本，我...
    開封第一講書人閱讀 39,211評論 0贊 276
  • 萬榮殺人案實(shí)錄
    序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎姻僧，沒想到半個(gè)月后规丽，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
    沈念sama閱讀 45,655評論 1贊 314
  • ?護(hù)林員之死
    正文 獨(dú)居荒郊野嶺守林人離奇死亡撇贺，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,846評論 3贊 336
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年赌莺，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片松嘶。...
    茶點(diǎn)故事閱讀 39,965評論 1贊 348
  • 活死人
    序言：一個(gè)原本活蹦亂跳的男人離奇死亡艘狭，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出翠订，到底是詐尸還是另有隱情巢音，我是刑警寧澤，帶...
    沈念sama閱讀 35,684評論 5贊 347
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布尽超，位于F島的核電站港谊，受9級特大地震影響，放射性物質(zhì)發(fā)生泄漏橙弱。R本人自食惡果不足惜歧寺，卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,295評論 3贊 329
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望棘脐。 院中可真熱鬧斜筐，春花似錦、人聲如沸蛀缝。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,894評論 0贊 22
  • 一樁弒父案，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽屈梁。三九已至嗤练，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間在讶，已是汗流浹背煞抬。 一陣腳步聲響...
    開封第一講書人閱讀 33,012評論 1贊 269
  • 情欲美人皮
    我被黑心中介騙來泰國打工， 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留构哺，地道東北人革答。 一個(gè)月前我還...
    沈念sama閱讀 48,126評論 3贊 370
  • 代替公主和親
    正文 我出身青樓战坤，卻偏偏與公主長得像，于是被迫代替她去往敵國和親残拐。 傳聞我的和親對象是個(gè)殘疾皇子途茫，可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,914評論 2贊 355