标签: React

React 中真的处处都是坑（重点）

最初是发现 props 变更时会导致许多不应该发生的 re-render

function App() {
  return (
    <div>
      <Chat class="p-4" messages={messages}></Chat>
      <Button
        type="primary"
        onClick={() => {
          setMessages([
            ...messages,
            {
              id: `${Date.now()}`,
              content: '测试消息',
              role: 'user',
              loading: false,
            },
          ])
        }}
      >
        test add
      </Button>
    </div>
  )
}

const Chat: React.FC<ChatProps> = ({
  difyAPIUrl,
  difyAPIKey,
  messages,
}: ChatProps) => {
  const memoMessages = React.useMemo(() => messages, [messages])

  return (
    <>
      <XProvider theme={theme}>
        <DifyContext value={{ difyAPIUrl, difyAPIKey }}>
          <ChatList messages={memoMessages}></ChatList>
        </DifyContext>
      </XProvider>
    </>
  )
}

function ChatList({ messages }: ChatListProps) {
  const rolesAsObject: GetProp<typeof Bubble.List, 'roles'> = {
    assistant: {
      placement: 'start',
      avatar: { icon: <UserOutlined />, style: { background: '#fde3cf' } },
      typing: { step: 5, interval: 20 },
      styles: {
        content: {
          backgroundColor: 'white',
        },
      },
      variant: 'shadow',
      shape: 'corner',
      messageRender: renderMarkdown,
      classNames: {
        header: 'w-full',
      },
    },
    user: {
      placement: 'end',
      // avatar: { icon: <UserOutlined />, style: { background: '#87d068' } },
      shape: 'corner',
    },
  }

  const renderMessages = useMemo(() => {
    return messages.map((item) => ({
      key: item.id,
      role: item.role,
      content: item.content,
      header: renderWorkflow(item.workflowProcess),
      loading: item.loading ?? false,
    }))
  }, [messages])

  return (
    <>
      <Bubble.List
        items={renderMessages}
        roles={rolesAsObject}
        className="h-full"
      ></Bubble.List>
    </>
  )
}

CrabSAMA2025/8/12大约 2 分钟

为什么需要 import React

在 vscode 里面使用 snippet 时，rfce 是 react function component export 的快捷命令，在使用这个 snippet 时，我看到和 react 相关的 snippet 都会在最上方有一行 import React from 'react'，但其实这一行删掉了也能正常运行，不删掉每次 typescript 都会报 unused import，有点烦人。

去了解了一下，在 react 17 之前 react 解析 JSX 的方式都是将 JSX 转换成 React.createElement，在 React 17 之后采取了新的 JSX 解析方式，新的 JSX 转换方式不再依赖于 React.createElement，而是通过编译器自动引入必要的代码。这意味着你可以在不显式导入 React 的情况下使用 JSX。但其实本质上 import 语句还是需要的，只是换成了编译器帮你将这一行代码补上去。

CrabSAMA2024/12/15大约 1 分钟

React 状态管理库 / Mobx

React 项目开发的初期，在较为简单的业务场景中我们都直接使用 useState 局部管理数据状态，这是没什么问题的。

在项目变得复杂，需要涉及跨层级跨组件、全局保持状态的时候，我最开始使用了 context + reducer 去做状态管理，在一些比较简单的场景下也能实现我们的需求。

直到我需要在 dispatch 后马上获取变更后的状态（具体场景是设置了列表数据后要获取最新的列表数据进行操作），发现不太好实现了，这下就要将目光转向到专业的状态管理工具库了。

CrabSAMA2024/10/23大约 6 分钟

React 高阶组件

React 官方文档：

高阶组件（HOC）是 React 中用于复用组件逻辑的一种高级技巧。HOC 自身不是 React API 的一部分，它是一种基于 React 的组合特性而形成的设计模式。

具体而言，高阶组件是参数为组件，返回值为新组件的函数。

场景

在项目中，我们会遇到一些权限管控相关的需求，比如根据用户有无权限来决定按钮是否展示、路由是否允许访问。在 Vue 中我们要么通过自定义指令去实现，要么自行封装组件去统一管控的逻辑，再或者可以通过 Vue Router 的一些钩子来进行处理。

CrabSAMA2024/10/21大约 3 分钟

React实现类似nextTick功能

作为一个 Vue 开发，在学习与使用 React 进行开发的时候，很自然地就会代入一些 Vue 的思想。在 Vue 和 React 中更新状态都是异步的，即更新完状态 DOM 并不会马上进行更新，而是在之后的某个时机才会进行状态更新并更新 DOM。

在 Vue 里面，我们有 nextTick 这种方法，可以保证在状态更新完成后执行一些业务逻辑。但在使用 React 的初期，我并没有发现有这种类似的 API。

react 如何实现类似 nexttick 这种方法？就是保证 setState 执行完成后才执行，举例：赋值完成后滚动到底部。

最初的解法：使用 useEffect

CrabSAMA2024/8/1大约 2 分钟

react中实现路由守卫

在 Vue Router 中我们经常使用其提供的路由守卫功能来实现一些业务逻辑，比如在进入路由之前进行鉴权，在进入路由后进行页面曝光埋点等。而在使用 React Router 时，发现其并没有开箱即用的路由守卫功能，因此去搜了一些材料，使用 react 的思想来间接实现了路由守卫的功能。

beforeEach

通过一个路由的顶层 path 设置成权限管控组件实现：

// router.tsx
const router: ReturnType<typeof createBrowserRouter> = createBrowserRouter([
  {
    path: '/',
    element: <GuardRoute />,
    children: [],
  },
])

CrabSAMA2024/8/1大约 2 分钟

React严格模式

在刚开始使用 react 开发应用时，会发现 react 有一个奇怪的现象，就是 useEffect 等 api 会在开发环境执行两次。我们一般习惯在将 useEffect 类比成 Vue 里面的 mounted 生命周期函数，在里面进行一些初始化操作，例如接口请求等。此时就会发现，在开发环境中，接口会被调用两次。在参考了官方文档和询问了 gpt 后，才知道这是 react 的严格模式导致的。

官方文档

https://zh-hans.react.dev/reference/react/StrictMode#fixing-bugs-found-by-double-rendering-in-development

CrabSAMA2024/8/1大约 3 分钟