杂货店：React中的JSX语法与Vue常见语法

ys指风不买醉
651 阅读2分钟

耳熟人详，React和Vue都使用声明式编程来构建用户界面，而它们的语法和处理方式有所不同。React使用JSX语法来创建UI，而Vue使用模板语法。本文将重点讲解React中的JSX语法与Vue常见语法之间的差异，尤其是在数组操作、样式设置和命名规范等方面。

1. JSX与Vue模板语法的基本区别

JSX数组与对象的使用

在React的JSX语法中，可以通过大括号{}来插入JavaScript表达式。这些表达式可以是数组、对象等，但有一些限制。例如，除了数组之外，React不允许直接嵌入其他类型的对象。换句话说，JSX中的大括号用于嵌入值，它会将值转换为React元素。

const list = ['apple', 'banana', 'cherry'];

return (
  <ul>
    {list.map((item, index) => (
      <li key={index}>{item}</li>
    ))}
  </ul>
);

上面可以看出，list作为数组，React 允许JSX通过map()函数渲染数组每个元素

Vue的语法

Vue则使用模板语法，并且支持在模板中直接插入对象、数组等。例如，Vue允许直接将数组或对象绑定到DOM元素上，并使用v-for指令来循环渲染数组。

<ul>
  <li v-for="(item, index) in list" :key="index">{{ item }}</li>
</ul>

Vue的模板语法更加简洁直观，而React则依赖于JavaScript代码来动态渲染内容。

在 JSX 中，<></> 是一种特殊的语法，称为 空标签（Fragment） 。它的作用是包裹多个子元素，而不会在 DOM 中引入额外的节点，减少不必要的节点渲染

2. 样式设置：内联样式与类名

React中的样式设置

在React中，设置样式有两种主要方式：内联样式和类名。内联样式适用于动态生成的样式，而类名适用于复杂的、可复用的样式。

内联样式

内联样式需要传入一个JavaScript对象，样式属性名使用驼峰命名法。例如：

const divStyle = { color: 'blue', fontSize: '24px' };

return <div style={divStyle}>Hello World</div>;
类名

类名通常使用className属性来设置，并且可以使用外部CSS文件或CSS-in-JS库来管理样式：

<div className="header">Hello World</div>

CSS-in-JS 有三种常见CSS 样式库

  • 1，Styled Components ,允许在JS文件直接定义样式，采用模板字面量。
import styled from 'styled-components';

const Button = styled.button`
  background-color: ${(props) => (props.primary ? 'blue' : 'gray')};
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
`;

function App() {
  return (
    <div>
      <Button primary>Primary Button</Button>
      <Button>Secondary Button</Button>
    </div>
  );
}
  • 2,Emotion 提供模板字面量例子：
/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react';

const buttonStyle = css`
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
`;

function App() {
  return <button css={buttonStyle}>Click me</button>;
}
  • 3,JSS 通过js对象定义样式，并且通过js功能动态生成样式，看下面demo
import { createUseStyles } from 'react-jss';

const useStyles = createUseStyles({
  button: {
    backgroundColor: 'blue',
    color: 'white',
    padding: '10px 20px',
    borderRadius: '5px',
  },
});

function App() {
  const classes = useStyles();

  return <button className={classes.button}>Click me</button>;
}

CSS-in-JS 虽然让每个组件和样式联系更紧密，但是对于大型应用大量动态样式计算中 有很大性能问题。

Vue中的样式设置

在Vue中，样式也可以通过两种方式设置：内联样式和类名。

内联样式

Vue的内联样式与React类似，直接在模板中使用v-bind:style来绑定样式对象：

<div v-bind:style="{ color: 'blue', fontSize: '24px' }">Hello World</div>
类名

Vue使用v-bind:class来动态绑定类名，支持对象、数组和字符串的形式：

<div v-bind:class="['header', { active: isActive }]">Hello World</div>
皮卡丘点火.webp

3. 数组操作：创建、填充与稀疏数组

React中的数组操作

React中可以通过常规的JavaScript方法来创建和操作数组。例如，Array.from()和Array.of()可以用来创建数组，fill()和push()等方法则用于修改数组。需要注意的是，JavaScript中的数组可以是稀疏数组，即数组中可以存在未定义的“空洞”。

const numbers = Array.from({ length: 5 }, (_, i) => i + 1); // [1, 2, 3, 4, 5]
numbers[7] = 8; // 创建一个稀疏数组
console.log(numbers); // [1, 2, 3, 4, 5, empty × 2, 8]

在上面的代码中，numbers数组有5个元素，但通过直接赋值numbers[7] = 8，我们创建了一个包含空洞的稀疏数组。

Vue中的数组操作

Vue在模板中使用v-for指令来遍历数组，并通过直接修改数组来实现数据绑定。数组的稀疏性问题在Vue中并不常见，因为Vue会确保数组的响应式更新。

<ul>
  <li v-for="(item, index) in list" :key="index">{{ item }}</li>
</ul>

Vue中的数组操作通常更为直观，结合Vue的响应式系统，更新数组会自动反映到界面上。

4. 命名规范：驼峰、帕斯卡与连字符

React中的命名规范

在React项目中，良好的命名规范有助于提高代码的可读性和维护性。React的命名规范如下：

  • 驼峰命名法（camelCase） ：用于变量和函数的命名，例如getUserName。
  • 帕斯卡命名法（PascalCase） ：用于React组件的命名，例如UserProfile。
  • 连字符命名法（kebab-case） ：用于CSS类名的命名，例如.user-profile。
const getUserName = () => { /*...*/ };
const UserProfile = () => { /*...*/ };

Vue中的命名规范

Vue的命名规范与React类似：

  • 驼峰命名法（camelCase） ：用于JavaScript变量和函数。
  • 帕斯卡命名法（PascalCase） ：用于组件命名。
  • 连字符命名法（kebab-case） ：用于HTML标签和CSS类名。

在Vue中，组件的命名通常使用帕斯卡命名法，并且在模板中使用连字符命名法，例如：

<user-profile></user-profile>

5. Refs：访问DOM元素

React中的Ref

在React中，ref是一种访问DOM节点或React元素的方式。通过useRef或createRef，可以直接与DOM元素交互，如聚焦输入框、触发动画等。以下是一个简单的例子：

import React, { useRef } from 'react';

function MyComponent() {
  const inputRef = useRef(null);

  const focusInput = () => {
    if (inputRef.current) {
      inputRef.current.focus(); // 聚焦到输入框
    }
  };

  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={focusInput}>Focus Input</button>
    </div>
  );
}

在这个例子中，点击按钮后，输入框会获得焦点。通过inputRef.current，可以直接操作DOM元素。

Vue中的Ref

在Vue中，ref也提供了类似的功能。通过ref属性，可以在模板中引用DOM元素或组件实例：

<template>
  <div>
    <input ref="input" type="text" />
    <button @click="focusInput">Focus Input</button>
  </div>
</template>

<script>
export default {
  methods: {
    focusInput() {
      this.$refs.input.focus(); // 聚焦到输入框
    },
  },
};
</script>

与React类似，Vue通过this.$refs来访问DOM元素或组件实例。

结论

React和Vue都采用了声明式编程的思想，但它们在语法和概念上有一些差异。React使用JSX来构建组件，并通过JavaScript表达式灵活地处理数据和视图；而Vue采用模板语法，通过v-for、v-bind等指令更加简洁地操作DOM。

疯狂跺脚.webp

avatar
文章
阅读
粉丝