React笔记

September 11, 2022

文档：https://zh-hans.react.dev/reference/

旧文档：https://zh-hans.legacy.reactjs.org/docs/getting-started.html

Typescript：https://react-typescript-cheatsheet.netlify.app/

本篇基于 React18，不会出现类 Class Component

一些 Typescript 常用类型

tsx

import React, { forwardRef, useImperativeHandle } from "react";
import ReactDOM from "react-dom/client";

interface Props {
    children?: React.ReactNode;
    style?: React.CSSProperties;
    onChange?: React.ChangeEventHandler<HTMLInputElement>;
}

function Comp(props?: Props): React.ReactNode {
    // 返回 JSX 类型为 React.JSX.Element
    return (
        <>
            <div style={props?.style}>{props?.children}</div>
            <input type="text" onChange={props?.onChange} />
        </>
    );
}
// React.ComponentProps<typeof Comp> === Props | undefined

const FC: React.FunctionComponent<Props> = (props) => (
    <Comp {...props} onChange={(e: React.FormEvent<HTMLInputElement>) => console.log(e)}></Comp>
);

interface ButtonProps extends React.ComponentPropsWithoutRef<"button"> {
    specialProp?: string;
}
function Button({ specialProp, ...props }: ButtonProps) {
    return <button {...props} />;
}

const RefDOM = forwardRef<HTMLDivElement, Props>((props, ref) => <div ref={ref}></div>);
// React.ElementRef<typeof RefDOM> === HTMLDivElement

const RefImperative = forwardRef<{ justExample: string }>((_, ref) => {
    useImperativeHandle(ref, () => ({ justExample: "ref" }));
    return undefined;
});
// React.ElementRef<typeof RefImperative> === { justExample: string }

function PassThrough(props: { as: React.ElementType<any> }) {
    const { as: Component } = props;
    return <Component />;
}

ReactDOM.createRoot(document.body).render(
    <React.StrictMode>
        <Comp />
        <FC />
        <RefDOM />
        <Button />
        <RefImperative />
        <PassThrough as="button" />
    </React.StrictMode>,
);

事件

捕获与冒泡

在 React 中所有事件都会冒泡（除了 onScroll，它仅适用于你附加到的 JSX 标签）

显式调用 e.stopPropagation() 停止冒泡

jsx

//prettier-ignore
<div onClickCapture={() => { /* 这会首先执行 */ }}>
  <button onClick={e => e.stopPropagation()} />
  <button onClick={e => e.stopPropagation()} />
</div>

每个事件分三个阶段传播：

向下传播，调用所有的 onClickCapture 处理函数。
执行被点击元素的 onClick 处理函数。
向上传播，调用所有的 onClick 处理函数。

合成事件

React 事件并非原生事件，而是合成事件。
事件监听器不是附加到 JSX 声明的那个元素上，而是委托给渲染根元素（旧版本则是委托给 document）。
因此我们的事件处理函数是由 React 调用，传入由 React 创建的合成事件。

在混合使用原生事件和 React 事件时，需要注意。

hooks

useState

const [count, setCount] = useState(0);
// 我们只是提供了初始值。useState 知道上一次渲染的 state，返回每次 state 的快照

console.log(count); // => 0
// count 是由 useState 返回的值，并不是由我们显式赋的值

setCount(count + 1);
// 调用 set 函数，schedule 下一次渲染
// set 函数真正接收的是 根据上一个状态得到下一个状态的函数

console.log(count); // => 0
// JavaScript 并没有获取一个变量的引用的机制，而 count 并没有被赋值，当然还是 0
// 此外注意到我们使用 const 声明，阻止引用被改变

useState 是通过数组实现的，每个 state 按顺序关联到数组中的一项，因此其依托于一个稳定的调用顺序。
这就是为什么只能在组件顶层调用 useState，因为组件函数由 React 调用，其顺序是预期的。

React文档给出了一个简化版实现。

state 被 fiber 树节点（暂且可以简单地看作是 React.ReactElement）持有。这意味着只有 fiber 被销毁，state 才会被销毁。
在 React 中，fiber 树中（而非 JSX 中） 相同位置 的 相同组件 被认为是同一 fiber，仅发生修改，而非重建。

相同组件：对于原生标签，则根据标签名；对于函数组件，则比较是否为同一函数

jsx

function App() {
    const [bool, setBool] = useState(false);

    return (
        <>
            <input type="checkbox" checked={bool} onChange={(e) => setBool(e.target.checked)} />
            {/* 相同位置，相同组件 */}
            {isGood ? <Comp isGood={true} /> : <Comp isGood={false} />}
            {/* 注意空值：如 undefined、null 也会创建 fiber */}
        </>
    );
}

设置 key 属性，可以使 diff 算法根据给定的 key 来判断是否需要（在父 fiber 内部）重建。

useRef

ref 也被 fiber 树持有，但不会触发重渲染。
换言之，可以看作是：

function useRef(initialValue) {
    const [ref, unused] = useState({ current: initialValue });
    return ref;
}

useEffect

effect 在渲染结束后运行，用于与外部系统同步（副作用），返回函数用于清理副作用（另一处可以运行副作用代码的地方是事件处理函数）。
依赖数组决定（通过 Object.is() 比较）重渲染后是否需要重新运行（不传表示每次都要运行）

React18 提供了 useSyncExternalStore，方便与外部 store 同步，并对 Server Component 友好

`useContext<T>(context: Context<T>): T`

tsx

import { createContext, useContext, useState } from "react";

const ThemeContext = createContext<"light" | "dark">("light"); // 默认值

export default function App() {
    const [theme, setTheme] = useState<"light" | "dark">("light");
    return (
        <ThemeContext.Provider value={theme}>
            <button onClick={() => setTheme(theme === "light" ? "dark" : "light")}>toggle theme</button>
            <Consumer />
        </ThemeContext.Provider>
    );
}

function Consumer() {
    const themeContext = useContext(ThemeContext);
    // useContext 只在调用它的组件树上方寻找最近的 Provider
    // 很明显是不可能能够考虑组件内部的 Provider 的
    return <div>{themeContext}</div>;
}

使用 useContext 需要往往需要考虑性能，比如使用 useCallback、useMemo 和 momo。

组件/其它API

`startTransition(scope: TransitionFunction): void`

什么是 transition？
这里的 transition 当然不是指 css transition，而是由于 setState 函数调用导致的重渲染而发生的 transition
最需要该 API 的地方是完整的渲染很耗时的情况，因为同步渲染会阻塞 UI 线程，使得用户无法与页面交互

React18 支持为渲染标记优先级。startTransition 传入一个无参的 scope 函数并立即执行它，
但在该函数内部的 setState 函数触发的状态变更被标记为非阻塞（也就是不立即发生实际渲染，注意 React18 是以 concurrent mode 渲染）。
这意味着如果有其它状态变更（优先级更高）发生，那么 React 优先处理该变更，然后才是 scope 内部变更。

非阻塞渲染也即后台渲染。由事件（例如输入）引起的任何更新都会中断后台渲染，并被优先处理。

`useTransition(): [boolean, TransitionStartFunction]`

useTransition 是 startTransition 的强化，它返回 [isPending, startTransition]
其中 isPending 告诉我们 transition 是否还在处理

`useDeferredValue<T>(value: T): T`

useDeferredValue 函数接受一个 state 变量，返回该 state 的延迟版本。
当 setState 触发组件更新时，如果新旧 state 不同（通过 Object.is() 比较），
那么 React 将先尝试使用延迟值（也就是与上一次相同的值，旧 state）进行渲染，
然后在后台使用新值再渲染一次（第一次渲染除外，因为第一次不存在旧值）。

其中 Effect 将在后台渲染完成，提交到屏幕之后运行。

注意由于使用 Object.is()，对象之间比较引用，所以需要防止向 useDeferredValue 传入
组件函数内部创建的对象，因为函数每次调用都产生不同的对象，导致不必要的重渲染

`<Suspense>`

jsx

import React from "react";
const MarkdownPreview = React.lazy(() => import("./MarkdownPreview.js"));

class ErrorBoundary extends React.Component {
    constructor(props) {
        super(props);
        this.state = { hasError: false };
    }

    static getDerivedStateFromError(error) {
        return { hasError: true };
    }

    componentDidCatch(error, info) {
        console.error(error, info.componentStack);
    }

    render() {
        if (this.state.hasError) {
            return <div>Error: Something is wrong!</div>;
        }
        return this.props.children;
    }
}

function App() {
    return (
        <ErrorBoundary>
            <React.Suspense fallback={<div>Loading...</div>}>
                <h2>Preview</h2>
                <MarkdownPreview />
            </React.Suspense>
        </ErrorBoundary>
    );
}

`flushSync<R>(fn: () => R): R` `flushSync<A, R>(fn: (a: A) => R, a: A): R`

React 并非使用微任务更新 DOM，因此 React 提供了 flushSync 函数。
该函数立即调用 callback，并使内部的 setState 函数立即更新 DOM

vue.js 使用微任务，因此其提供的是 nextTick(callback?): Promise

生命周期

←Back to home