React核心概念

React核心概念#

1. JSX语法#

JSX是JavaScript的语法扩展，允许你在JavaScript中编写类似HTML的代码。虽然不是必须使用的，但它是React开发中最常用的方式。

基本语法#

1
// JSX示例
2
const element = <h1>Hello, React!</h1>;
3

4
// 在JSX中使用表达式
5
const name = 'React';
6
const element = <h1>Hello, {name}!</h1>;
7

8
// 在JSX中使用函数
9
function formatName(user) {
10
  return user.firstName + ' ' + user.lastName;
11
}
12

13
const user = {
14
  firstName: 'John',
15
  lastName: 'Doe'
16
};
17

18
const element = <h1>Hello, {formatName(user)}!</h1>;

JSX的特点#

JSX会被编译为JavaScript代码
可以在JSX中使用任何JavaScript表达式，只需用花括号包裹
JSX本身也是一个表达式，编译后会生成React元素
可以在if语句和for循环中使用JSX
可以给JSX添加属性，使用引号指定字符串字面量作为属性值，或使用花括号指定JavaScript表达式作为属性值
可以在JSX中使用子元素
由于JSX更接近JavaScript，React DOM使用camelCase（小驼峰命名）来定义属性名称，而不是HTML的命名约定

2. 组件#

组件是React应用的构建块，允许你将UI拆分为独立、可复用的部分。

函数组件#

函数组件是最基本的组件形式，是一个接收props并返回React元素的函数。

1
function Greeting(props) {
2
  return <h1>Hello, {props.name}!</h1>;
3
}
4

5
// 使用组件
6
const element = <Greeting name="React" />;

类组件#

类组件是使用ES6类语法定义的组件，需要继承React.Component并实现render方法。

1
class Greeting extends React.Component {
2
  render() {
3
    return <h1>Hello, {this.props.name}!</h1>;
4
  }
5
}
6

7
// 使用组件
8
const element = <Greeting name="React" />;

注意：在现代React中，函数组件配合Hooks已经成为主流，类组件的使用场景越来越少。

3. Props#

Props是组件的输入，是从父组件传递给子组件的数据。Props是只读的，组件不能修改自己的props。

1
// 父组件
2
function App() {
3
  return (
4
    <div>
5
      <Greeting name="Alice" />
6
      <Greeting name="Bob" />
7
    </div>
8
  );
9
}
10

11
// 子组件
12
function Greeting(props) {
13
  return <h1>Hello, {props.name}!</h1>;
14
}

默认Props#

可以为组件设置默认的props值，当父组件没有传递相应的props时，会使用默认值。

1
function Greeting(props) {
2
  return <h1>Hello, {props.name}!</h1>;
3
}
4

5
// 设置默认props
6
Greeting.defaultProps = {
7
  name: 'Guest'
8
};
9

10
// 不传递name属性时，会使用默认值
11
const element = <Greeting />;

4. State#

State是组件的内部数据，用于存储组件的状态信息。与props不同，state是可变的，组件可以修改自己的state。

在函数组件中使用State（使用useState Hook）#

1
import React, { useState } from 'react';
2

3
function Counter() {
4
  // 声明一个名为count的state变量，初始值为0
5
  const [count, setCount] = useState(0);
6

7
  return (
8
    <div>
9
      <p>You clicked {count} times</p>
10
      <button onClick={() => setCount(count + 1)}>
11
        Click me
12
      </button>
13
    </div>
14
  );
15
}

在类组件中使用State#

1
class Counter extends React.Component {
2
  constructor(props) {
3
    super(props);
4
    // 初始化state
5
    this.state = {
6
      count: 0
7
    };
8
  }
9

10
  render() {
11
    return (
12
      <div>
13
        <p>You clicked {this.state.count} times</p>
14
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
15
          Click me
16
        </button>
17
      </div>
18
    );
19
  }
20
}

5. 事件处理#

React中的事件处理与DOM中的事件处理类似，但有一些语法差异：

React事件使用camelCase命名，而不是小写
在JSX中，事件处理函数作为表达式传递，而不是字符串

1
function Button() {
2
  function handleClick() {
3
    alert('Button clicked!');
4
  }
5

6
  return (
7
    <button onClick={handleClick}>
8
      Click me
9
    </button>
10
  );
11
}

向事件处理函数传递参数#

1
function Button() {
2
  function handleClick(name) {
3
    alert(`Hello, ${name}!`);
4
  }
5

6
  return (
7
    <button onClick={() => handleClick('React')}>
8
      Click me
9
    </button>
10
  );
11
}

6. 条件渲染#

React允许你根据条件渲染不同的内容。

使用if语句#

1
function Greeting(props) {
2
  if (props.isLoggedIn) {
3
    return <h1>Welcome back!</h1>;
4
  } else {
5
    return <h1>Please sign up.</h1>;
6
  }
7
}

使用三元运算符#

1
function Greeting(props) {
2
  return (
3
    <div>
4
      {props.isLoggedIn ? (
5
        <h1>Welcome back!</h1>
6
      ) : (
7
        <h1>Please sign up.</h1>
8
      )}
9
    </div>
10
  );
11
}

使用与运算符（&&）#

1
function Notification(props) {
2
  return (
3
    <div>
4
      {props.unreadCount > 0 && (
5
        <p>You have {props.unreadCount} unread messages.</p>
6
      )}
7
    </div>
8
  );
9
}

7. 列表渲染#

React允许你使用map()方法来渲染列表。

1
function NumberList(props) {
2
  const numbers = props.numbers;
3
  const listItems = numbers.map((number) =>
4
    <li key={number.toString()}>
5
      {number}
6
    </li>
7
  );
8
  return (
9
    <ul>{listItems}</ul>
10
  );
11
}
12

13
const numbers = [1, 2, 3, 4, 5];
14
const element = <NumberList numbers={numbers} />;

关于key#

在渲染列表时，每个列表项都需要一个唯一的key属性，用于React识别哪些项发生了变化、被添加或被移除。key应该是稳定的、唯一的，并且不会在渲染之间发生变化。

最好使用每个项的唯一ID作为key。如果没有唯一ID，可以使用项的索引作为key，但这不是最优解，特别是当列表项可能被重新排序时。

练习#

创建一个简单的React组件，显示你的名字和年龄。
创建一个计数器组件，能够增加和减少计数。
创建一个列表组件，显示一组水果的名称。
创建一个条件渲染组件，根据用户是否登录显示不同的内容。

总结#

在本章节中，我们学习了React的核心概念和基础语法，包括：

JSX语法：在JavaScript中编写类似HTML的代码
组件：React应用的构建块，分为函数组件和类组件
Props：从父组件传递给子组件的数据，只读
State：组件的内部数据，可变
事件处理：处理用户交互
条件渲染：根据条件显示不同的内容
列表渲染：使用map()方法渲染列表

这些核心概念是React开发的基础，掌握它们将帮助你构建更复杂的React应用。在接下来的章节中，我们将学习更多高级特性，如Hooks、生命周期方法、表单处理等。

Lovely firefly!