Jorgen's blog
Jorgen
2023-11-15
目录

React 开发指南：从入门到精通

# 前言

作为一名前端开发者，我曾在 Vue.js 的世界里畅游许久，体验了它的优雅和便捷。然而，当我第一次接触 React 时，那种组件化的思维方式和函数式编程的理念深深吸引了我。今天，我想和大家分享一下我的 React 学习之旅，希望能帮助更多开发者掌握这个强大的前端框架。

提示

React 是由 Facebook 开发并维护的一个用于构建用户界面的 JavaScript 库。它采用组件化开发模式，通过虚拟 DOM 提高渲染效率，是目前最流行的前端框架之一。

# React 简介

React 之所以能在众多前端框架中脱颖而出，主要得益于以下几个核心特性：

  • 组件化开发：将 UI 拆分为独立、可复用的组件
  • 虚拟 DOM：通过内存中的 DOM 表示提高渲染性能
  • 单向数据流：数据流向清晰，便于调试和维护
  • JSX 语法：在 JavaScript 中编写类似 HTML 的代码

# 环境搭建

开始 React 开发前，我们需要搭建开发环境。我推荐使用 Create React App，这是官方提供的脚手架工具：

npx create-react-app my-react-app
cd my-react-app
npm start
1
2
3

几秒钟后，你就会看到一个默认的 React 应用在浏览器中运行。🎉

# JSX 语法初探

JSX 是 React 的核心语法，它允许我们在 JavaScript 中编写类似 HTML 的代码：

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

const element = <Welcome name="Jorgen" />;
1
2
3
4
5

刚开始接触 JSX 时可能会有些不习惯，但一旦适应了这种语法，你会发现它大大提高了组件的可读性和开发效率。

THEOREM

JSX 最终会被 Babel 转换为 React.createElement() 调用，所以实际上它只是 React 的一种语法糖。

# 组件与 Props

React 的核心思想是组件化。组件是 React 应用的构建块，它们接收输入（称为 props）并返回描述 UI 的 React 元素。

# 函数组件

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

# 类组件

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

在现代 React 开发中，我们更倾向于使用函数组件，尤其是在配合 Hooks 使用时。

# State 与生命周期

在类组件中，我们使用 state 来管理组件内部的状态：

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = { date: new Date() };
  }

  componentDidMount() {
    this.timerID = setInterval(
      () => this.setState({ date: new Date() }),
      1000
    );
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>现在是 {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

# Hooks：函数组件的强大功能

React Hooks 是 React 16.8 引入的新特性，它允许我们在函数组件中使用 state 和其他 React 特性：

import React, { useState, useEffect } from 'react';

function Clock() {
  const [date, setDate] = useState(new Date());

  useEffect(() => {
    const timerID = setInterval(() => setDate(new Date()), 1000);
    return () => clearInterval(timerID);
  }, []);

  return (
    <div>
      <h1>Hello, world!</h1>
      <h2>现在是 {date.toLocaleTimeString()}.</h2>
    </div>
  );
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

常用的 Hooks 包括：

  • useState：在函数组件中添加 state
  • useEffect：处理副作用（数据获取、订阅或手动修改 DOM）
  • useContext：访问 React 的 Context
  • useReducer：管理复杂的状态逻辑
  • useCallback 和 useMemo：优化性能

# 事件处理

React 事件处理系统与原生 DOM 事件有所不同：

function Toggle(props) {
  const [isToggleOn, setIsToggleOn] = useState(true);

  function handleClick() {
    setIsToggleOn(prevState => !prevState);
  }

  return (
    <button onClick={handleClick}>
      {isToggleOn ? '关闭' : '开启'}
    </button>
  );
}
1
2
3
4
5
6
7
8
9
10
11
12
13

注意，React 事件名采用驼峰命名法，如 onClick 而不是 onclick。

# 条件渲染

React 中有多种条件渲染的方式：

function Greeting({ isLoggedIn }) {
  if (isLoggedIn) {
    return <UserGreeting />;
  }
  return <GuestGreeting />;
}

// 或者使用三元运算符
function Greeting({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? <UserGreeting /> : <GuestGreeting />}
    </div>
  );
}

// 或者使用 &&
function Mailbox({ unreadMessages }) {
  return (
    <div>
      <h1>您的邮箱</h1>
      {unreadMessages.length > 0 &&
        <h2>您有 {unreadMessages.length} 封未读邮件。</h2>
      }
    </div>
  );
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

# 列表与 Keys

在 React 中渲染列表时，需要为每个列表项指定一个 key 属性：

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

Keys 帮助 React 识别哪些元素发生了变化，从而提高渲染效率。

# 表单处理

React 中的表单处理与原生 HTML 表单有些不同：

function NameForm(props) {
  const [value, setValue] = useState('');

  const handleChange = (event) => {
    setValue(event.target.value);
  }

  const handleSubmit = (event) => {
    alert('提交的名字: ' + value);
    event.preventDefault();
  }

  return (
    <form onSubmit={handleSubmit}>
      <label>
        名字:
        <input type="text" value={value} onChange={handleChange} />
      </label>
      <input type="submit" value="提交" />
    </form>
  );
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

# 状态提升

在 React 中，共享状态应该提升到最近的共同祖先组件中：

function BoilingVerdict(props) {
  if (props.celsius >= 100) {
    return <p>水会沸腾。</p>;
  }
  return <p>水不会沸腾。</p>;
}

function Calculator(props) {
  const [temperature, setTemperature] = useState('');
  const [scale, setScale] = useState('c');

  const handleCelsiusChange = (value) => {
    setTemperature(value);
    setScale('c');
  }

  const handleFahrenheitChange = (value) => {
    setTemperature(value);
    setScale('f');
  }

  const celsius = scale === 'f' ? tryConvert(temperature, toCelsius) : temperature;
  const fahrenheit = scale === 'c' ? tryConvert(temperature, toFahrenheit) : temperature;

  return (
    <div>
      <TemperatureInput
        scale="c"
        temperature={celsius}
        onTemperatureChange={handleCelsiusChange} />
      <TemperatureInput
        scale="f"
        temperature={fahrenheit}
        onTemperatureChange={handleFahrenheitChange} />
      <BoilingVerdict
        celsius={parseFloat(celsius)} />
    </div>
  );
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

# Context：跨组件传递数据

当需要在多个组件间共享数据时，可以使用 React Context：

const ThemeContext = React.createContext('light');

function ThemedButton(props) {
  return (
    <ThemeContext.Consumer>
      {theme => (
        <button className={theme} {...props}>
          {props.children}
        </button>
      )}
    </ThemeContext.Consumer>
  );
}

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <ThemedButton>点击我</ThemedButton>
    </ThemeContext.Provider>
  );
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

# 性能优化

React 应用中常见的性能优化技巧：

  1. 使用 React.memo 缓存组件渲染结果
const MemoizedComponent = React.memo(function MyComponent(props) {
  /* 渲染逻辑 */
});
1
2
3
  1. 使用 useMemo 和 useCallback 缓存计算结果和函数
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

const memoizedCallback = useCallback(() => {
  doSomething(a, b);
}, [a, b]);
1
2
3
4
5
  1. 使用 React.PureComponent 替代 React.Component
class Greeting extends React.PureComponent {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}
1
2
3
4
5

# 结语

React 是一个强大而灵活的前端框架，它通过组件化、虚拟 DOM 和 Hooks 等特性，为现代 Web 开发提供了高效的解决方案。虽然学习曲线可能有些陡峭，但一旦掌握了 React 的核心概念，你就能构建出高性能、可维护的用户界面。

"学习 React 不仅是学习一个框架，更是学习一种构建用户界面的思维方式。"

作为一名前端开发者，掌握 React 是非常有价值的。它不仅能帮助你构建出色的 Web 应用，还能让你更好地理解现代前端开发的最佳实践。希望这篇指南能帮助你顺利开启 React 之旅！

最后，记住编程不仅仅是写代码，更是一种解决问题的艺术。保持好奇心，不断学习，你将在 React 的世界里发现更多可能性！🚀

#React#JavaScript#前端框架
上次更新: 2026/01/28, 10:42:53
React-从入门到精通-构建现代前端应用
React框架入门：构建现代用户界面

← React框架入门：构建现代用户界面→

最近更新
01
LLM
01-30
02
intro
01-30
03
intro
01-30
更多文章>
Theme by Vdoing | Copyright © 2019-2026 Jorgen | MIT License