React开发：入门指南与基础实战-原创手记-慕课网

React简介

React 是 Facebook 开发并维护的一个用于构建用户界面的 JavaScript 库。它允许开发者创建可重用的 UI 组件，这些组件可以独立于应用的其他部分进行修改和测试。React 的核心概念是组件，它将 UI 的不同部分抽象为可复用的代码块。此外，React 强调 虚拟 DOM（Virtual DOM）的概念，通过比较虚拟 DOM 和实际 DOM 的差异，并只更新这些差异，从而实现高效的数据绑定和渲染。

React环境搭建

在开始编写 React 程序之前，首先需要安装 Node.js。确保已经安装了 Node.js 后，可以使用 npm 或 yarn 来快速创建一个 React 项目。这里我们使用 create-react-app 命令创建一个新项目：

npx create-react-app my-app
cd my-app

接下来，运行项目：

npm start

这将会在浏览器中打开一个新窗口，展示默认的 "Hello, World!" 页面。

组件与生命周期

在 React 中，组件是构成界面的基本元素。每个组件都可以接收 props（属性）并产生 state（状态）。组件的生命周期由一系列方法组成，它们在组件的不同阶段被调用：

组件类的生命周期方法

`constructor(props)`

import React from 'react';

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  render() {
    return <div>{this.state.count}</div>;
  }
}

`componentWillMount()`, `componentDidMount()`

import React from 'react';

class MyComponent extends React.Component {
  componentDidMount() {
    console.log('组件已加载');
  }

  render() {
    return <div>{this.state.count}</div>;
  }
}

`render()`

这是组件的核心方法，用于定义组件的 UI 表现。

`componentWillReceiveProps(nextProps)`, `shouldComponentUpdate(nextProps, nextState)`, `getSnapshotBeforeUpdate(prevProps, prevState)`, `componentDidUpdate(prevProps, prevState, snapshot)`

import React from 'react';

class MyComponent extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    return this.props.name !== nextProps.name;
  }

  componentDidUpdate(prevProps, prevState) {
    console.log('组件已更新');
  }

  render() {
    return <div>{this.props.name}</div>;
  }
}

纯函数组件的生命周期

对于使用 function 关键字定义的组件，React 提供了 useEffect Hook 来替代生命周期方法：

import React, { useEffect } from 'react';

function MyComponent({ name }) {
  useEffect(() => {
    console.log('组件已加载');
  });

  useEffect(() => {
    console.log('组件已更新');
  }, [name]);

  return <div>{name}</div>;
}

状态与props

状态（State）

状态是组件内部维护的变量。它用于存储组件需要更新 UI 时使用的数据。状态可以在组件的生命周期方法或响应 setState 调用时进行更新。

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <button onClick={increment}>Increment</button>
      <p>{count}</p>
    </div>
  );
}

props（属性）

props 是传递给组件的外部数据，它们定义了组件的初始状态。组件可以接收任意数量的 props，并通过 this.props 访问它们。

import React from 'react';

function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}

function App() {
  return <Greeting name="Alice" />;
}

React功能与API

React 提供了许多高级功能和 API，包括条件渲染、循环、状态管理、路由等。

条件渲染

import React from 'react';

function DisplayMessage({ message }) {
  return message ? <p>{message}</p> : null;
}

function App() {
  return <DisplayMessage message="Hello, World!" />;
}

循环与列表渲染

import React from 'react';

function List({ items }) {
  return (
    <ul>
      {items.map(item => (
        <li key={item}>{item}</li>
      ))}
    </ul>
  );
}

function App() {
  const items = ['Apple', 'Banana', 'Cherry'];
  return <List items={items} />;
}

状态管理（Hooks）

使用 useState、useEffect 等 Hook 来管理状态和执行副作用。

组件使用生命周期方法与性能

import React, { useEffect } from 'react';

function LazyComponent({ fetchData }) {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetchData().then(data => setData(data));
  }, [fetchData]);

  if (data === null) return null;

  return <div>{data}</div>;
}

// 用法
async function getData() {
  // 异步获取数据的逻辑
  return 'Hello, World!';
}

function App() {
  return <LazyComponent fetchData={getData} />;
}

实战案例

项目：简易计时器

目标：

创建一个简单的计时器应用，允许用户开始、停止和重置计时器。

技术栈：

React
使用计时器库（如 react-timer-mixin）

实现：

import React, { useState, useEffect } from 'react';
import Timer from 'react-timer-mixin';

class Countdown extends Timer {
  constructor(props) {
    super(props);
    this.state = {
      time: 0,
      isRunning: false
    };
  }

  start = () => {
    if (!this.state.isRunning) {
      this.startTimer();
      this.setState({ isRunning: true });
    }
  };

  stop = () => {
    if (this.state.isRunning) {
      this.stopTimer();
      this.setState({ isRunning: false });
    }
  };

  reset = () => {
    this.stopTimer();
    this.setState({ time: 0 });
  };

  render() {
    return (
      <div>
        <h1>{this.timeToString(this.state.time)}</h1>
        <button onClick={this.start}>Start</button>
        <button onClick={this.stop}>Stop</button>
        <button onClick={this.reset}>Reset</button>
      </div>
    );
  }

  timeToString = time => {
    return (
      Math.floor(time / 3600).toString().padStart(2, '0') +
      ':' +
      Math.floor(time / 60).toString().padStart(2, '0') +
      ':' +
      (time % 60).toString().padStart(2, '0')
    );
  };
}

export default Countdown;

// 使用场景
function App() {
  return <Countdown />;
}

结语

掌握 React 的基础知识是构建现代 Web 应用的关键。通过组件、状态管理、生命周期方法以及高级功能的综合运用，可以构建出高效、响应式的用户界面。随着实践经验的积累和对 React 生态系统更深入的理解，开发者将能创建出更加复杂和功能丰富的应用。希望本文提供的指南和示例能帮助你快速上手 React，并在开发过程中游刃有余。