日志25-7-30

今天学完React基础，明天看React Router，后天看Zustand

• 组件通信
  • 父传子：父组件将数据定义好之后，将属性名写在子组件上，子组件用props接受数据
  • 子传父：父组件传一个函数给子组件，子组件调用这个函数进行数据传递
  • 兄弟通信：父传子=>子传父
  • 跨级通信
    1. 使用 createContext方法创建一个上下文对象Ctx
    2. 在顶层组件（App）中通过 Ctx.Provider 组件提供数据
    3. 在底层组件（B）中通过 useContext 钩子函数获取消费数据
• 副作用管理：useEffect()
• Hook函数：以use开头的函数
  • useReducer: 比useState()强大，更适合管理多个状态
  • useMemo: 缓存计算结果，避免重复计算,该函数必须是纯函数
  • useCallback: 缓存回调函数，避免重复创建，该函数必须返回一个函数
  • useImperativeHandle: 让父组件直接修改子组件的属性
  • useDeferredValue: 给某个值一个默认的过期值，让他相比UI组件来说延迟更新
  • useLayoutEffect: 跟useEffect()一样，但会在DOM更新之后、浏览器绘制之前执行
  • useOptimistic:乐观更新，前端提交后直接更新UI，然后发送请求完成后再更新实际数据
  • useId: 生成唯一的id，用于HTML元素，如input的name属性
  • useTransition: 作用与useDeferredValue()一样，但控制的粒度更细
• 组件
  • <Fragment> / <></>：空标签
  • StrictMode：严格模式，用于开发环境，会检查组件的渲染逻辑、数据流、事件处理、生命周期方法、组件的props、state和context
  • Suspense：用于异步组件，用于处理异步数据加载、错误、加载中状态
  • Profile:测量组件树渲染性能
• React API:
  • memo:缓存组件渲染结果，避免重复渲染
  • lazy:懒加载
  • startTransition
  • CreateContext
  • use