ReactHooks(完结)

上期戳here

一.memo 函数

当父组件被重新渲染的时候，也会触发子组件的重新渲染，这样就多出了无意义的性能开销。使用 React.memo() 可以将组件进行缓存。

1.1 语法格式

const 组件 = React.memo(函数式组件)

import React, { useEffect, useState } from 'react'// 父组件
export const Father: React.FC = () => {// 定义 count 和 flag 两个状态const [count, setCount] = useState(0)const [flag, setFlag] = useState(false)return (<><h1>父组件</h1><p>count 的值是：{count}</p><p>flag 的值是：{String(flag)}</p><button onClick={() => setCount((prev) => prev + 1)}>+1</button><button onClick={() => setFlag((prev) => !prev)}>Toggle</button><hr /><Son num={count} /></>)
}// 子组件：依赖于父组件通过 props 传递进来的 num
//React.memo 包裹的子组件，只有props变化了，才会被重新渲染
export const Son: React.FC<{ num: number }> = React.memo(({ num }) => {useEffect(() => {console.log('触发了子组件的渲染')})return (<><h3>子组件 --- {num}</h3></>)
})

二. useMemo

如果点击 +1 按钮，发现count自增，flag值没有发生变化，但是tips函数也会重新执行。

2.1 问题引入

// 父组件
export const Father: React.FC = () => {// 定义 count 和 flag 两个状态const [count, setCount] = useState(0)const [flag, setFlag] = useState(false)// 根据布尔值进行计算，动态返回内容const tips = () => {console.log('触发了 tips 的重新计算')return flag ? <p>哪里贵了，不要睁着眼瞎说好不好</p> : <p>这些年有没有努力工作，工资涨没涨</p>}return (<><h1>父组件</h1><p>count 的值是：{count}</p><p>flag 的值是：{String(flag)}</p>{tips()}<button onClick={() => setCount((prev) => prev + 1)}>+1</button><button onClick={() => setFlag((prev) => !prev)}>Toggle</button><hr /><Son num={count} /></>)
}

我们希望如果 flag 没有发生变化，则避免 tips 函数的重新计算，从而优化性能。此时需要用到 React Hooks 提供的 useMemo API。

2.2 语法格式

const memorizedValue = useMemo(cb, array)
const memoValue = useMemo(() => {return 计算得到的值
}, [value]) // 表示监听 value 的变化

• cb：这是一个函数，用户处理计算的逻辑，必须使用 return 返回计算的结果；
• array：这个数组中存储的是依赖项，只要依赖项发生变化，都会触发 cb 的重新执行。
  • 不传数组，每次更新都会重新计算
  • 空数组，只会计算一次
  • 依赖对应的值，对应的值发生变化时会重新执行 cb

2.3 使用 useMemo 解决刚才的问题

//导入 useMemo：
import React, { useEffect, useState, useMemo } from 'react'
//在 Father 组件中，使用 useMemo 对 tips 进行改造：
// 根据布尔值进行计算，动态返回内容
const tips = useMemo(() => {console.log('触发了 tips 的重新计算')return flag ? <p>哪里贵了，不要睁着眼瞎说好不好</p> : <p>这些年有没有努力工作，工资涨没涨</p>
}, [flag])

三.useCallback

3.1 useMemo和useCallback区别

名称	返回值
useMemo	变量
useCallback	函数

3.2 语法格式

const memoCallback = useCallback(cb, array)

• cb 是需要被缓存的函数
• array 是依赖项列表，当 array 中的依赖项变化时才会重新执行 useCallback。
  • 如果省略 array，则每次更新都会重新计算
  • 如果 array 为空数组，则只会在组件第一次初始化的时候计算一次
  • 如果 array 不为空数组，则只有当依赖项的值变化时，才会重新计算

import React, { useState, useCallback } from 'react'// 用来存储函数的 set 集合
const set = new Set()export const Search: React.FC = () => {const [kw, setKw] = useState('')const onKwChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {setKw(e.currentTarget.value)}, [])// 把 onKwChange 函数的引用，存储到 set 集合中set.add(onKwChange)// 打印 set 集合中元素的数量console.log('set 中函数的数量为：' + set.size)return (<><input type="text" value={kw} onChange={onKwChange} /><hr /><p>{kw}</p></>)
} 

四.useTransition

4.1 问题引入

import React, { useState } from 'react'export const TabsContainer: React.FC = () => {// 被激活的标签页的名字const [activeTab, setActiveTab] = useState('home')// 点击按钮，切换激活的标签页const onClickHandler = (tabName: string) => {setActiveTab(tabName)}return (<div style={{ height: 500 }}><TabButton isActive={activeTab === 'home'} onClick={() => onClickHandler('home')}>首页</TabButton><TabButton isActive={activeTab === 'movie'} onClick={() => onClickHandler('movie')}>电影</TabButton><TabButton isActive={activeTab === 'about'} onClick={() => onClickHandler('about')}>关于</TabButton><hr />{/* 根据被激活的标签名，渲染对应的 tab 组件 */}{activeTab === 'home' && <HomeTab />}{activeTab === 'movie' && <MovieTab />}{activeTab === 'about' && <AboutTab />}</div>)
}// Button 组件 props 的 TS 类型
type TabButtonType = React.PropsWithChildren & { isActive: boolean; onClick: () => void }
// Button 组件
const TabButton: React.FC<TabButtonType> = (props) => {const onButtonClick = () => {props.onClick()}return (<button className={['btn', props.isActive && 'active'].join(' ')} onClick={onButtonClick}>{props.children}</button>)
}// Home 组件
const HomeTab: React.FC = () => {return <>HomeTab</>
}// Movie 组件
const MovieTab: React.FC = () => {const items = Array(100000).fill('MovieTab').map((item, i) => <p key={i}>{item}</p>)return items
}// About 组件
const AboutTab: React.FC = () => {return <>AboutTab</>
} 

4.2 语法格式

import { useTransition } from 'react';function TabContainer() {const [isPending, startTransition] = useTransition();// ……
}

• 参数：
  • 调用 useTransition 时不需要传递任何参数
• 返回值（数组）：
  • isPending 布尔值：是否存在待处理的 transition【是否存在待渲染的组件】，如果值为 true，说明页面上存在待渲染的部分，可以给用户展示一个加载的提示；
  • startTransition 函数：调用此函数，可以把状态的更新标记为低优先级的，不阻塞 UI 对用户操作的响应；

import React, { useState, useTransition } from 'react'export const TabsContainer: React.FC = () => {// 被激活的标签页的名字const [activeTab, setActiveTab] = useState('home')const [, startTransition] = useTransition()// 点击按钮，切换激活的标签页const onClickHandler = (tabName: string) => {startTransition(() => {setActiveTab(tabName)})}// 省略其它代码...
} 

4.3 使用 isPending 展示加载状态

//调用 useTransition 期间，接收 isPending 参数：
const [isPending, startTransition] = useTransition()
// 将标签页的渲染，抽离到 renderTabs 函数中：
// 用于渲染标签页的函数
const renderTabs = () => {if (isPending) return <h3>Loading...</h3>switch (activeTab) {case 'home':return <HomeTab />case 'movie':return <MovieTab />case 'about':return <AboutTab />}
} 

4.4 注意事项

• 传递给 startTransition 的函数必须是同步的。React 会立即执行此函数，并将在其执行期间发生的所有状态更新标记为 transition。如果在其执行期间，尝试稍后执行状态更新，这些状态更新不会被标记为 transition。
• 标记为 transition 的状态更新将被其他状态更新打断。
• transition 更新不能用于控制文本输入。

五.useDeferredValue

5.1 问题引入

transition更新不能用于控制文本输入，会导致中间状态丢失。

import React, { useState, useTransition } from 'react'// 父组件
export const SearchBox: React.FC = () => {const [kw, setKw] = useState('')// 1. 调用 useTransition 函数const [, startTransition] = useTransition()const onInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {// 2. 将文本框状态更新标记为“低优先级”，会导致中间的输入状态丢失startTransition(() => {setKw(e.currentTarget.value)})}return (<div style={{ height: 500 }}><input type="text" value={kw} onChange={onInputChange} /><hr /><SearchResult query={kw} /></div>)
}// 子组件，渲染列表项
const SearchResult: React.FC<{ query: string }> = (props) => {if (!props.query) returnconst items = Array(40000).fill(props.query).map((item, i) => <p key={i}>{item}</p>)return items
}

5.2 语法格式

import { useState, useDeferredValue } from 'react';function SearchPage() {const [kw, setKw] = useState('');// 根据 kw 得到延迟的 kwconst deferredKw = useDeferredValue(kw);// ...
}

useDeferredValue 的返回值为一个延迟版的状态

• 在组件首次渲染期间，返回值将与传入的值相同
• 在组件更新期间，React 将首先使用旧值重新渲染 UI 结构，这能够跳过某些复杂组件的 rerender，从而提高渲染效率。随后，React 将使用新值更新 deferredValue，并在后台使用新值重新渲染是一个低优先级的更新。这也意味着，如果在后台使用新值更新时 value 再次改变，它将打断那次更新。
  注意：需要配合React.memo对子组件缓存使用。

// 1. 按需导入 useDeferredValue 这个 Hooks API
import React, { useState, useDeferredValue } from 'react'// 父组件
export const SearchBox: React.FC = () => {const [kw, setKw] = useState('')// 2. 基于 kw 的值，为其创建出一个延迟版的 kw 值，命名为 deferredKwconst deferredKw = useDeferredValue(kw)const onInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {setKw(e.currentTarget.value)}return (<div style={{ height: 500 }}><input type="text" value={kw} onChange={onInputChange} /><hr />{/* 3. 将延迟版的 kw 值，传递给子组件使用 */}<SearchResult query={deferredKw} /></div>)
}// 子组件，渲染列表项
// 4. 子组件必须使用 React.memo() 进行包裹，这样当 props 没有变化时，会跳过子组件的 rerender
const SearchResult: React.FC<{ query: string }> = React.memo((props) => {if (!props.query) returnconst items = Array(40000).fill(props.query).map((item, i) => <p key={i}>{item}</p>)return items
})

5.3 延迟一个值与防抖和节流之间有什么不同

面试可能会问到哦~：延迟一个值与防抖和节流之间有什么不同?

• 防抖： 在用户停止输入一段时间之后再更新列表。【搜索框常用】
• 节流： 是指每隔一段时间更新列表。
  

5.4 表明内容已过时

// 1. 按需导入 useDeferredValue 这个 Hooks API
import React, { useState, useDeferredValue } from 'react'// 父组件
export const SearchBox: React.FC = () => {const [kw, setKw] = useState('')// 2. 基于 kw 的值，为其创建出一个延迟版的 kw 值const deferredValue = useDeferredValue(kw)const onInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {setKw(e.currentTarget.value)}return (<div style={{ height: 500 }}><input type="text" value={kw} onChange={onInputChange} /><hr />{/* 3. 将延迟版的 kw 值，传递给子组件使用 */}<div style={{ opacity: kw !== deferredValue ? 0.3 : 1, transition: 'opacity 0.5s ease' }}><SearchResult query={deferredValue} /></div></div>)
} 

ReactHooks 到这就完结啦，感谢大家的喜欢❥(^_-)