2025-10-28 16:57:36 +08:00

15 KiB

Raw Permalink Blame History

title, date, tags

title	date	tags
React	2025-07-23 15:56:46

Vue 转 React 指南

JSX

先介绍 React 唯一的一个语法糖：JSX。

理解 JSX 语法并不困难，简单记住一句话，遇到 {} 符号内部解析为 JS 代码，遇到成对的 <> 符号内部解析为 HTML 代码。

当你写下这个 React 组件时：

import React from 'react';

function MyComponent(props) {
    return <div>{props.hello}</div>
}

最终会被自动工具翻译成：

import React from 'react';

function MyComponent(props) {
    return React.createElement('div', null, props.hello);
}

React 就是通过这个小小语法糖，实现在 JS 里面写 HTML，可能有小伙伴会说 HTML 与 JS 分离不是更好吗？责职分明，混合只会更乱。但当你体验到代码自动提示，自动检查，以及调试时精确定位到一行代码的好处时，就清楚 React 和 Vue 的差距了。

文本插值

vue种采用双括号

<span>Message: {{ msg }}</span>

react采用单括号

function MyComponent(props) {
    let msg = 'XXX'
    return <div>{ msg }</div>
}

Attribute 绑定

vue中想要响应式地绑定一个 attribute，应该使用 v-bind 指令

<div v-bind:id="dynamicId"></div>
<div :id="dynamicId"></div>

react中，使用单引号，或者使用单括号包裹表示动态绑定

function App () {
  let tmpID = '12'
  return (
    <div className='App'>
      <div id='12'>id</div>
      <div id={tmpID}>id</div>
    </div>
  );
}

动态绑定多值：

function App () {
  let tmpObject = {
    id: 13,
    className: 'wrapper'
  }
  return (
    <div className='App'>
      <div {...tmpObject}>id</div>
    </div>
  );
}

即：

<div id="13" class="wrapper">id</div>

参数 Arguments

某些指令会需要一个“参数”，Vue在指令名后通过一个冒号隔开做标识。例如用 v-bind 指令

<a v-bind:href="url"> ... </a>

<!-- 简写 -->
<a :href="url"> ... </a>

React中则没有指令一说，而是采用如下方式：

// href跳转
function App () {
  let tmpURL = 'https://www.XXXXXXXX'
  return (
    <div className='App'>
      <a href={tmpURL}></a>
    </div>
  );
}

使用 JS 表达式

React 遇到 {} 符号内部解析为 JS 代码

function App () {
  let tmpString = '--';
  return (
    <div className='App'>
      <div >{1 + 1}</div>
      <div >{'a' + 'b'}</div>
      <div >{`1${tmpString}1`}</div>
    </div>
  );
}

即：

<div>2</div>
<div>ab</div>
<div>1--1</div>

事件处理

Vue中绑定事件处理：

<!-- `greet` 是上面定义过的方法名 -->
<button @click="greet">Greet</button>

React可以通过在组件中声明事件处理函数来响应事件

React中点击事件使用小驼峰形式：onClick

在标签上写函数：

function App () {
  return (
    <div className='App'>
      <div onClick={() => alert('点击出现弹框')}>按钮</div>
    </div>
  );
}

提前声明函数：

function App () {
  function myFun () {
    alert('点击出现弹框')
  }
  return (
    <div className='App'>
      <div onClick={myFun}>按钮</div>
    </div>
  );
}

注意，onClick={handleClick} 的结尾没有小括号！不要调用事件处理函数：你只需 传递给事件 即可。当用户点击按钮时，React 会调用你的事件处理函数。

函数传参：

function App () {
  function myFun (str) {
    alert(str)
  }
  return (
    <div className='App'>
      <div onClick={() => myFun('点击出现弹框')}>按钮</div>
    </div>
  );
}

动态参数

Vue在指令参数上也可以使用一个 JavaScript 表达式，需要包含在一对方括号内：

<a v-bind:[attributeName]="url"> ... </a>

<!-- 简写 -->
<a :[attributeName]="url"> ... </a>

举例来说，如果你的组件实例有一个数据属性 attributeName，其值为 "href"，那么这个绑定就等价于 v-bind:href。

React 也可以通过动态参数绑定

function App () {
  const obj = {
    onClick: () => alert('点击出现弹框'),
    // ...还可以写更多事件
  }
  return (
    <div className='App'>
      <div {...obj}>按钮</div>
    </div>
  );
}

修饰符 Modifiers

vue 修饰符是以点开头的特殊后缀

表明指令需要以一些特殊的方式被绑定。例如 .prevent 修饰符会告知 v-on 指令对触发的事件调用 event.preventDefault()：

<form @submit.prevent="onSubmit">...</form>

React 则是依靠于JS基础

function App () {
  function onSubmit(e){
    e.preventDefault();
    e.stopPropagation();
  }
  return (
    <div className='App'>
      <form onSubmit={onSubmit}>
        <button type='submit'></button>
      </form>
    </div>
  );
}

响应式

为了实现视图更新，VUE中响应式是一个重要的概念

而 React 中并没有响应式这个概念，要实现视图更新，需要在 React 引入 useState

通常，你会希望你的组件 “记住” 一些信息并展示出来。例如，也许你想计算一个按钮被点击的次数。要做到这一点，你需要在你的组件中添加 state。

首先，从 React 引入 useState：

import { useState } from 'react';

现在你可以在你的组件中声明一个 state 变量：

function MyButton() {
  const [count, setCount] = useState(0);
  // ...

你将从 useState 中获得两样东西：当前的 state（count），以及用于更新它的函数（setCount）。你可以给它们起任何名字，但按照惯例，需要像这样 [something, setSomething] 为它们命名。

第一次显示按钮时，count 的值为 0，因为你把 0 传给了 useState()。当你想改变 state 时，调用 setCount() 并将新的值传递给它。点击该按钮计数器将递增：

function MyButton() {
  const [count, setCount] = useState(0);
  function handleClick() {
    setCount(count + 1);
  }

  return (
    <button onClick={handleClick}>
      Clicked {count} times
    </button>
  );
}

React 将再次调用你的组件函数。这次，count 会变成 1。接着，变成 2。以此类推。

如果你多次渲染同一个组件，每个组件都会拥有自己的 state。你可以尝试点击不同的按钮：

计算属性

Vue中使用 computed 来实现计算属性（缓存计算的结果）

React 在组件的顶层调用 useMemo 来缓存每次重新渲染都需要计算的结果

import { useState } from 'react';
import { useMemo } from 'react';

function App () {
  const [user] = useState({ firstname: 'a', lastname: 'b' })

  const fullname = useMemo(() => {
    return user.firstname + user.lastname;
  }, [user.firstname, user.lastname])

  return (
    <div className='App'>
      {fullname}
    </div>
  );
}

useMemo(calculateValue, dependencies)

参数

calculateValue：要缓存计算值的函数。它应该是一个没有任何参数的纯函数，并且可以返回任意类型。React 将会在首次渲染时调用该函数；在之后的渲染中，如果 dependencies 没有发生变化，React 将直接返回相同值。否则，将会再次调用 calculateValue 并返回最新结果，然后缓存该结果以便下次重复使用。
dependencies：所有在 calculateValue 函数中使用的响应式变量组成的数组。响应式变量包括 props、state 和所有你直接在组件中定义的变量和函数。如果你在代码检查工具中配置了 React，它将会确保每一个响应式数据都被正确地定义为依赖项。依赖项数组的长度必须是固定的并且必须写成 [dep1, dep2, dep3] 这种形式。React 使用 Object.is 将每个依赖项与其之前的值进行比较。

绑定 HTML class

数据绑定的一个常见需求场景是操纵元素的 CSS class 列表和内联样式。因为 class 和 style 都是 attribute

Vue中可以给 :class (v-bind:class 的缩写) 传递一个对象来动态切换 class：

<div :class="{ active: isActive }"></div>

上面的语法表示 active 是否存在取决于数据属性 isActive 的真假值。

React实现方式基于js语法，其实有多种实现方式，列举三元运算符方式如下：

function App () {
  let showColor = false
  return (
    // 现有box-show、box-hide两个class样式
    <div className={showColor ? 'box-show' : 'box-hide'}></div>
  );
}

语法糖转换

习惯 Vue 的同学都知道很多语法糖，比如 v-if、v-for、v-bind、v-on 等，相比 Vue，React 只有一个语法糖，那就是 jsx/tsx。v-if 这些功能在 React 上都是通过原生 javascript 实现的，慢慢你会发现，其实你学的不是 React，而是 Javascipt，React 赋予你通过 js 完整控制组件的能力，这部分明显比 Vue 的语法糖更加灵活，糖太多容易引来虫子（Bug）

条件渲染

vue 中写法是这样：

<div>
    <h1 v-if="ishow">Vue is awesome!</h1>
    <h1 v-else>else</h1>
</div>

在 React 函数组件中，只需使用 js 三目运算符语法即可完成条件渲染的功能。或者使用 && 逻辑，记住下面一句话就能过理解了：

遇到 {} 符号内部解析为 JS 代码，遇到成对的 <> 符号内部解析为 HTML 代码

function App () {
  const ishow = false
  return (
    <div>
      {ishow ? <div>awesome</div> : <div>else</div>}
      {ishow && <h1>React!</h1>}
    </div>
  );
}

列表渲染

Vue中通过v-for进行列表渲染

React 通过 js 的数组语法 map，将数据对象映射为 DOM 对象。只需学会 js，无需记住各种指令，如果要做列表过滤，直接使用 items.filter(...).map(...) 链式调用即可，语法上更加灵活，如果为了提高渲染性能，使用 useMemo 进行优化即可，类似 Vue 的 computed。

function App () {
  const arr = [{ message: 'react' }, { message: 'JS' }]
  return (
    <div>
      {arr.map((items, index) => <li key={index}>{items.message}</li>)}
    </div >
  );
}

侦听器

Vue中使用 watch监听数据变化，触发回调

React中可以使用 useEffect 实现

function App () {
  const [user, setUser] = useState({
    firstname: 'a',
    lastname: 'b'
  })
  useEffect(() => {
    console.log("1111")
  }, [user.firstname])
  return (
    <div>
      <button onClick={() => setUser({ ...user, firstname: 'a2' })}></button>
    </div >
  );
}

父子组件传递事件

子组件是模态框，确定按钮需要增加loading状态

子组件：增加 `confirmLoading` 状态并优化 `handleOk` 方法

import React, { useState } from 'react';
import { Modal, Checkbox, Input, message } from 'antd';
import { useTranslation } from 'react-i18next'

const { TextArea } = Input;

interface FeedbackModalProps {
  open: boolean;
  onOk: (selectedOption: number | null, feedbackText: string) => Promise<void>;
  onCancel: () => void;
}

const FeedbackModal: React.FC<FeedbackModalProps> = ({ open, onOk, onCancel }) => {
  const [selectedOption, setSelectedOption] = useState<number | null>(null);
  const [feedbackText, setFeedbackText] = useState<string>('');
  const { t } = useTranslation()
  const [confirmLoading, setConfirmLoading] = useState(false);

  const handleOk = async () => {
    if (!feedbackText) {
      message.warning('请填写反馈建议');
      return;
    }
    setConfirmLoading(true)
    try {
      await onOk(selectedOption, feedbackText);
    } finally {
      setConfirmLoading(false)
    }

  };

  return (
    <Modal
      title="反馈"
      open={open}
      onOk={handleOk}
      onCancel={onCancel}
      okText={`${t('common.operation.confirm')}`}
      cancelText={`${t('common.operation.cancel')}`}
      confirmLoading={confirmLoading}
    >
      {/* <div>
        <Checkbox
          checked={selectedOption === 0}
          onChange={() => setSelectedOption(0)}
        >
          新增
        </Checkbox>
        <Checkbox
          checked={selectedOption === 1}
          onChange={() => setSelectedOption(1)}
        >
          修改
        </Checkbox>
      </div> */}
      <TextArea
        rows={4}
        placeholder="请输入您的反馈建议"
        value={feedbackText}
        onChange={(e) => setFeedbackText(e.target.value)}
      />
    </Modal>
  );
};

export default FeedbackModal;

父组件：确保 `handleFeedbackSubmit` 返回 Promise

  const handleFeedbackSubmit = useCallback(
    async (selectedOption: number | null, feedbackText: string) => {
      console.log(currentMessageId);
      console.log(currentFeedback);

      try {
        // 构造请求参数
        const requestBody = {
          operationType: currentFeedback!.rating, // 0 或 1
          feedbackText, // 用户反馈建议
          conversationId: currentConversationId, // 会话 ID
          messageId: currentMessageId, // 消息 ID
          username: getCookieValue('username'), // 用户名
        };

        // 调用 Java 接口
        const javaResponse = await fetch(
          `/dev-api/api/conversation/feedback`,
          {
            method: "POST",
            headers: {
              "Content-Type": "application/json",
            },
            body: JSON.stringify(requestBody),
          }
        );

        // 调用原有的 updateFeedback 函数
        await updateFeedback(
          {
            url: `/messages/${currentMessageId}/feedbacks`,
            body: { rating: currentFeedback!.rating },
          },
          // isInstalledApp,
          // appId
        );

        // 显示成功通知
        notify({ type: "success", message: t("common.api.success") });

        if (resolveFeedback) {
          resolveFeedback(true); // 用户取消了反馈
          setResolveFeedback(null);
        }

        // 关闭对话框
        setIsFeedbackModalVisible(false);
      } catch (error) {
        console.error("Error:", error);
        notify({ type: "error", message: t("common.api.failed") });
      } finally {
        setIsSubmittingNow(false);
      }
    },
    [
      currentMessageId,
      currentFeedback,
      currentConversationId,
      isInstalledApp,
      appId,
      notify,
      t,
    ]
  );

父组件调用子组件部分

      <FeedbackModal
        open={isFeedbackModalVisible}
        onOk={handleFeedbackSubmit}
        onCancel={() => {
          if (resolveFeedback) {
            resolveFeedback(false); // 用户取消了反馈
            setResolveFeedback(null);
          }
          setIsFeedbackModalVisible(false)
         }}
      />

关键点说明

子组件内部管理加载状态 通过 useState 创建 isLoading 状态，并在 handleOk 中控制其值。点击按钮时，isLoading 变为 true，请求结束后变为 false。
okButtonProps 绑定加载状态 Ant Design 的 Modal 组件支持通过 okButtonProps 自定义按钮属性，这里将 loading 绑定到 isLoading 状态。
onOk 作为异步函数传递 父组件的 handleFeedbackSubmit 是 async 函数，返回 Promise。子组件通过 await onOk() 确保加载状态在请求结束后更新。
错误处理不影响加载状态 使用 try...finally 确保无论请求成功或失败，isLoading 都会被重置。

15 KiB Raw Permalink Blame History Unescape Escape