JSX 语法基础

React 基础速成

JSX（JavaScript XML）是 React 中使用的一种语法扩展，它允许我们在 JavaScript 代码中编写类似 HTML 的标记。在 React Native 中，JSX 是构建用户界面的核心语法。

1. JSX 是什么？

JSX 是一种 JavaScript 语法扩展，它看起来像模板语言，但实际上是 JavaScript 的一部分。React 会将 JSX 编译成常规的 JavaScript 函数调用。

为什么使用 JSX？

• 可读性高：JSX 代码看起来更像 HTML，更易于阅读和理解
• 类型安全：JSX 可以在编译时捕获错误
• 表达能力强：JSX 允许在标记中嵌入 JavaScript 表达式
• 开发效率高：JSX 简化了 UI 代码的编写

2. JSX 基本语法

基本结构

import React from 'react';
import { View, Text } from 'react-native';

export default function HelloWorld() {
  return (
    <View>
      <Text>Hello, World!</Text>
    </View>
  );
}

嵌入表达式

import React from 'react';
import { View, Text } from 'react-native';

export default function Greeting() {
  const name = 'React Native';
  return (
    <View>
      <Text>Hello, {name}!</Text>
      <Text>2 + 2 = {2 + 2}</Text>
      <Text>{new Date().toLocaleTimeString()}</Text>
    </View>
  );
}

使用条件表达式

import React from 'react';
import { View, Text } from 'react-native';

export default function ConditionalRendering() {
  const isLoggedIn = true;
  return (
    <View>
      {isLoggedIn ? (
        <Text>Welcome back!</Text>
      ) : (
        <Text>Please log in.</Text>
      )}
    </View>
  );
}

使用数组和 map

import React from 'react';
import { View, Text } from 'react-native';

export default function List() {
  const items = ['Apple', 'Banana', 'Cherry'];
  return (
    <View>
      {items.map((item, index) => (
        <Text key={index}>{item}</Text>
      ))}
    </View>
  );
}

3. JSX 规则

1. 必须有一个根元素

JSX 表达式必须有一个根元素包裹所有内容：

// 正确
<View>
  <Text>Hello</Text>
  <Text>World</Text>
</View>

// 错误 - 没有根元素
<Text>Hello</Text>
<Text>World</Text>

2. 标签必须闭合

所有标签必须正确闭合：

// 正确
<Text>Hello</Text>
<View />

// 错误 - 标签未闭合
<Text>Hello
<View>

3. 使用驼峰命名法

在 JSX 中，属性名使用驼峰命名法：

// 正确
<Text style={{ fontSize: 16, fontWeight: 'bold' }}>Hello</Text>

// 错误 - 使用了连字符
<Text style={{ font-size: 16, font-weight: 'bold' }}>Hello</Text>

4. 样式使用对象

在 React Native 中，样式使用 JavaScript 对象：

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    fontSize: 16,
    fontWeight: 'bold',
  },
});

export default function StyledComponent() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Hello, World!</Text>
    </View>
  );
}

5. 使用 className 而不是 class

在 React Native 中，我们使用 style 属性而不是 class：

// 正确 - React Native 使用 style
<View style={styles.container}>

// 错误 - 不要使用 class
<View class="container">

4. JSX 与 JavaScript 的关系

JSX 只是 JavaScript 的语法糖，它会被编译成普通的 JavaScript 函数调用。例如：

// JSX 代码
<View>
  <Text>Hello, World!</Text>
</View>

// 编译后的 JavaScript 代码
React.createElement(
  View,
  null,
  React.createElement(
    Text,
    null,
    'Hello, World!'
  )
);

5. 常见错误与解决方案

错误 1：忘记导入组件

错误：

export default function App() {
  return (
    <View>
      <Text>Hello</Text>
    </View>
  );
}

解决方案：

import { View, Text } from 'react-native';

export default function App() {
  return (
    <View>
      <Text>Hello</Text>
    </View>
  );
}

错误 2：使用了 HTML 标签而不是 React Native 组件

错误：

import React from 'react';

export default function App() {
  return (
    <div>
      <p>Hello</p>
    </div>
  );
}

解决方案：

import { View, Text } from 'react-native';

export default function App() {
  return (
    <View>
      <Text>Hello</Text>
    </View>
  );
}

错误 3：在 JSX 中使用了 if 语句

错误：

import { View, Text } from 'react-native';

export default function App() {
  const isLoggedIn = true;
  return (
    <View>
      if (isLoggedIn) {
        <Text>Welcome back!</Text>
      }
    </View>
  );
}

解决方案：

import { View, Text } from 'react-native';

export default function App() {
  const isLoggedIn = true;
  return (
    <View>
      {isLoggedIn && <Text>Welcome back!</Text>}
    </View>
  );
}

6. 最佳实践

1. 使用 StyleSheet.create

使用 StyleSheet.create 来定义样式，这样可以提高性能：

import { View, Text, StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
  },
  text: {
    fontSize: 16,
    color: '#333',
  },
});

2. 拆分组件

将复杂的 UI 拆分为多个小组件，提高代码的可维护性：

// Header.js
import { View, Text, StyleSheet } from 'react-native';

export default function Header() {
  return (
    <View style={styles.header}>
      <Text style={styles.title}>My App</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  header: {
    backgroundColor: '#f8f8f8',
    padding: 10,
  },
  title: {
    fontSize: 20,
    fontWeight: 'bold',
  },
});

// App.js
import { View } from 'react-native';
import Header from './Header';

export default function App() {
  return (
    <View>
      <Header />
      {/* 其他内容 */}
    </View>
  );
}

3. 使用 key 属性

在渲染列表时，为每个元素添加 key 属性：

import { View, Text } from 'react-native';

export default function List() {
  const items = [
    { id: 1, name: 'Apple' },
    { id: 2, name: 'Banana' },
    { id: 3, name: 'Cherry' },
  ];
  return (
    <View>
      {items.map((item) => (
        <Text key={item.id}>{item.name}</Text>
      ))}
    </View>
  );
}

7. 总结

JSX 是 React 和 React Native 中非常重要的语法，它允许我们以一种直观、声明式的方式构建用户界面。通过掌握 JSX 语法，你可以更高效地开发 React Native 应用。

在学习 JSX 的过程中，要注意以下几点：

1. JSX 是 JavaScript 的语法扩展，不是模板语言
2. JSX 必须有一个根元素
3. 标签必须正确闭合
4. 使用驼峰命名法
5. 样式使用 JavaScript 对象
6. 可以在 JSX 中嵌入 JavaScript 表达式

下一节，我们将学习 React 的组件概念，包括函数组件和类组件。