React 学习

1、Reack Hooks?

实现了 state 和类似 class 组件的生命周期函数的功能的Api, 就做Hooks。
hooks 挂载数据的数据结构叫做 fiber
React 是通过 jsx 来描述界面结构的，会把 jsx 编译成 render function，然后执行 render function 产生 vdom。
vdom 转 fiber 的过程叫做 reconcile
useMemo：缓存调用函数的结果
useCallback 缓存函数本身
useContext：是一个 React Hook，可以让你读取和订阅组件中的 context。例如，主题色。注意：useContext 返回你向 context 传递的 context value。为了确定 context 值，React 搜索组件树，为这个特定的 context 向上查找最近的 context provider。
useEffect：useEffect 是一个 React Hook，它允许你将组件与外部系统同步。例如，连接聊天室、监听浏览器全局事件、触发动画效果、控制模态对话框、跟踪元素可见性、定时器等。
useInsertionEffect：是 useEffect 的另一种实现，会在任何 DOM 变化前触发（useInsertionEffect 是为 CSS-in-JS 库的作者特意打造的）。
useLayoutEffect：是 useEffect 的一个版本，在浏览器重新绘制屏幕之前触发。
useDebugValue：可以让你在 React 开发工具中为自定义 Hook 添加标签或延迟格式化调试值（如日期格式）。
useDeferredValue: 可让您延迟更新 UI 的一部分。例如，搜索。活泼更新，感受变化。
useRef 是一个 React Hook，它能让你引用一个不需要渲染的值。如：点击计数器、定时器ID存储
useReducer是一个 React Hook，可让您向组件添加化简器。化简器是一个纯函数，定义actions, 通过分发动作，改变状态。如：使用计数器
useState是一个 React Hook，可让您向组件添加状态变量。
useTransition 是一个让你在不阻塞 UI 的情况下来更新状态的 React Hook。方便阻塞情况快速更新状态，不至于出现卡顿，如：用于tabBar
useImperativeHandle 是 React 中的一个 Hook，它能让你自定义由 ref 暴露出来的句柄。使用方法：（1）向父组件暴露一个自定义的 ref 句柄（2）暴露你自己的命令式方法
useId 是一个 React Hook，可以生成传递给无障碍属性的唯一 ID。用法：（1）为无障碍属性生成唯一 ID （2）为多个相关元素生成 ID （3）为所有生成的 ID 指定共享前缀
useSyncExternalStore 是一个让你订阅外部 store 的 React Hook。使用（1）订阅外部 store （2）订阅浏览器 API （3）把逻辑抽取到自定义 Hook （4）添加服务端渲染支持

useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot?)

2、useMemo和useCallback有什么关系（区别）？

区别在于他们让我缓存的内容

useMemo：缓存调用函数的结果
useCallback 缓存函数本身

3、useState、useRef的使用？useState的原理？

useState在React函数组件写法时，定义状态变量使用，改变通过setState, 触发重新渲染；
useRef在函数组件，只需要首次渲染，不需要重新渲染时使用。
改变 ref 不会触发重新渲染

import { useState } from 'react';

export default function TodoList() {
  const [list, setList] = useState<string[]>([]);
  const [task, setTask] = useState('');
  function handleClick() {
    setList([...list, task]);
  }
  return (
    <>
      <input type="text" value={task} onChange={e => setTask(e.target.value)} />
      <button onClick={handleClick}>add</button>
      <div>学习任务</div>
      <ul>
        {
          list.map((item:any, index: number) => {
            return <li key={item + index}>{index + 1 + ' ' +item}</li>;
          })
        }
      </ul>
    </>
  );
}

4、修改值的扩展组件？

使用Immer, use-immer

5、React提供的组件？

Fragment: 通常使用 <>...</> 代替，它们都允许你在不添加额外节点的情况下将子元素组合。
Profiler: 允许您以编程方式测量 React 树的渲染性能。
StrictMode: 帮助你在开发过程中尽早地发现组件中的常见错误。
Suspense:允许您显示回退，直到其子级完成加载。使用：回退显示Loading

6、React应用程序接口API？

createContext：能让你创建一个 context 以便组件能够提供和读取。
forwardRef：允许你的组件使用 ref 将一个 DOM 节点暴露给父组件。
lazy：能够让你在组件第一次被渲染之前延迟加载组件的代码。
memo：允许你的组件在 props 没有改变的情况下跳过重新渲染。
startTransition：可以让你在不阻塞 UI 的情况下更新 state。

React学习

React 学习

1、Reack Hooks?

2、useMemo和useCallback有什么关系（区别）？

3、useState、useRef的使用？useState的原理？

4、修改值的扩展组件？

5、React提供的组件？

6、React应用程序接口API？