React Key Points Review

React 快速回顾

• Hook: 函数组件无法使用state和生命周期函数，所以需要使用hooks来代替。

  • use: 实验性的hook

  • useState: 状态管理

  • useEffect: 副作用管理,注意使用

    • useEffect(setup, dependencies?)
    • dependencies 默认为空数组，表示依赖项为空，即仅执行一次
    • setup: 副作用函数，执行时机为组件挂载或更新时. setup 函数选择性返回一个清理cleanup函数
    • 即使你的 Effect 是由一个交互（比如点击）引起的，浏览器也可能在处理 Effect 内部的状态更新之前重新绘制屏幕。通常，这就是你想要的。但是，如果你一定 要阻止浏览器重新绘制屏幕，则需要用 useLayoutEffect 替换 useEffect。

  • useLayoutEffect: 同useEffect，但会在DOM更新之后同步执行

  • useRef: 引用管理，它能帮助引用一个不需要渲染的值

    • 作用 - 可用于在组件之间共享数据，还可以存储DOM节点的引用
      • 使用ref引用一个值
      • 通过ref操作DOM
      • 避免重复创建ref的内容,改变ref不会触发重新渲染,用于优化渲染性能

        // ---- 用法示例 ----
        const intervalRef = useRef(0);
        //如果需要存储一个 interval ID 并在以后检索它，那么可以将它存储在 ref 中。只需要手动改变它的 current 属性 即可修改 ref 的值：
        function handleStartClick() {
          const intervalId = setInterval(() => {
            // ...
          }, 1000);
          intervalRef.current = intervalId;
        }
        // 在之后，从 ref 中读取 interval ID 便可以 清除定时器：
        function handleStopClick() {
          const intervalId = intervalRef.current;
          clearInterval(intervalId);
        }
        

    • 使用 ref 可以确保：
      • 可以在重新渲染之间 存储信息（普通对象存储的值每次渲染都会重置）。
      • 改变它 不会触发重新渲染（状态变量会触发重新渲染）。
      • 对于组件的每个副本而言，这些信息都是本地的（外部变量则是共享的）。

  • useMemo: 缓存计算结果

    • const cachedValue = useMemo(calculateValue, dependencies)

  • useCallback: 缓存函数

    • 用于优化性能，特别是在处理回调函数时，以避免不必要的重新渲染
    • const cachedFn = useCallback(fn, dependencies), 返回一个有缓存功能的函数
    • 用法
      • 跳过组件的重新渲染
      • 从记忆化回调中更新 state
      • 防止频繁触发 Effect
      • 优化自定义 Hook

  • useContext: 上下文管理

    • createContext：createContext是一个用于创建上下文对象的工厂方法。它返回一个包含Provider和Consumer两个组件的上下文对象。Provider组件用于提供数 据，而Consumer组件用于订阅并读取这些数据。当需要共享的数据量较小或者不需要频繁更新时，使用createContext是一个好的选择。
    • useContext：useContext是一个Hook，它允许组件直接访问最近的Provider中的数据，而无需通过Consumer组件显式传递。这使得在不同层级的组件之间共享数据 变得更加简单和高效。useContext适用于需要频繁更新或共享大量数据的场景。

  • useReducer: 状态管理

    • 基本用法

        const [state, dispatch] = useReducer(reducer, initialArg, init?)
        function reducer(state, action) {
          // ...
        }
      

  • useId: 生成唯一的id

    • 返回一个唯一的字符串 ID，与此特定组件中的 useId 调用相关联。
    • useId 的主要用例是生成用于 HTML 元素的 id 属性。
      • 在React中直接编写ID并不是一个好的习惯。一个组件可能会在页面上渲染多次，但是ID必须是唯一的！使用useId生成唯一的ID
    • 不应该被用来生成列表中的 key。key 应该由你的数据生成。

  • useDeferredValue: 延迟更新

  • useTransition: 延迟更新

  • useImperativeHandle: 暴露组件实例

  • useInsertionEffect: 插入样式

  • useSyncExternalStore: 订阅外部数据源

• 组件

  • <Fragment>(<>) 不添加额外节点的情况下将子元素组合
  • <Suspense> 允许你编程式测量 React 树的渲染性能。
  • <Portal>
  • <StrictMode> 在子组件完成加载前展示后备方案

    <Suspense fallback={<Loading />}>
      <SomeComponent />
    </Suspense>
    

• API

  • createContext
  • forwardRef
  • memo
  • lazy