React.js 基础与进阶教程

React.js 是由 Facebook 开发的流行前端 JavaScript 库，专为构建用户界面（UI）设计，尤其适用于单页面应用（SPA）。它采用组件化开发模式，使 UI 结构更加清晰、可维护性更强。本文将带你快速入门 React，并深入了解其核心概念、关键特性及最佳实践。

1. React 基础概念

1.1 React 组件

React 采用组件化开发，一个组件代表 UI 的一个独立部分。组件主要分为函数组件 和类组件。

函数组件示例：

jsx 复制代码

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

类组件示例：

jsx 复制代码

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}

1.2 JSX 语法

JSX 是 React 提供的一种 JavaScript 语法扩展，允许在 JavaScript 代码中直接编写 HTML 结构。

jsx 复制代码

const element = <h1>Hello, World!</h1>;

JSX 语法需要 Babel 进行编译，最终转换成 React.createElement 形式。

1.3 State 与 Props

Props（属性）：用于组件间传递数据。
State（状态）：组件内部的可变数据，影响组件的渲染。

示例：

jsx 复制代码

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }
  
  increment = () => {
    this.setState({ count: this.state.count + 1 });
  };
  
  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.increment}>Increment</button>
      </div>
    );
  }
}

2. React 进阶

2.1 组件生命周期

React 组件有三个主要生命周期阶段：

挂载（Mounting）：组件创建并插入 DOM。
更新（Updating）：组件状态或属性更新时触发。
卸载（Unmounting）：组件从 DOM 中移除。

常见生命周期方法：

jsx 复制代码

class Example extends React.Component {
  componentDidMount() {
    console.log('组件已挂载');
  }
  componentDidUpdate() {
    console.log('组件更新');
  }
  componentWillUnmount() {
    console.log('组件即将卸载');
  }
}

2.2 事件处理

在 React 中，事件处理类似于 HTML，但使用驼峰命名：

jsx 复制代码

<button onClick={this.handleClick}>Click Me</button>

2.3 条件渲染

jsx 复制代码

{isLoggedIn ? <UserDashboard /> : <LoginPage />}

2.4 列表渲染

jsx 复制代码

const items = ['Apple', 'Banana', 'Cherry'];
const listItems = items.map(item => <li key={item}>{item}</li>);

3. React Hooks（React 16.8+）

React Hooks 允许在函数组件中使用 state 和生命周期。

3.1 useState

jsx 复制代码

import { useState } from 'react';
function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increase</button>
    </div>
  );
}

3.2 useEffect

jsx 复制代码

import { useEffect } from 'react';
function Example() {
  useEffect(() => {
    console.log('组件渲染');
  }, []);
}

3.3 useContext

jsx 复制代码

const ThemeContext = React.createContext('light');
function ThemedButton() {
  const theme = useContext(ThemeContext);
  return <button className={theme}>Click Me</button>;
}

4. React Router（前端路由）

React Router 允许实现单页面应用路由。

jsx 复制代码

import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Router>
  );
}

5. Redux（状态管理）

Redux 解决组件间状态共享问题。

jsx 复制代码

import { createStore } from 'redux';
const reducer = (state = { count: 0 }, action) => {
  switch (action.type) {
    case 'INCREMENT': return { count: state.count + 1 };
    default: return state;
  }
};
const store = createStore(reducer);

6. React 性能优化

6.1 使用 React.memo 进行组件优化

jsx 复制代码

const MemoizedComponent = React.memo(MyComponent);

6.2 使用 useCallback 记忆化函数

jsx 复制代码

const memoizedCallback = useCallback(() => doSomething(a, b), [a, b]);

6.3 使用 useMemo 记忆化计算结果

jsx 复制代码

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

7. 结语

React 是现代前端开发的核心技术之一，掌握 React 组件、Hooks、路由和状态管理能帮助你构建强大的 Web 应用。本教程涵盖了 React 的基本用法和优化技巧，希望能帮助你入门并逐步深入！