React.js 基础与进阶教程

React.js 基础与进阶教程

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

1. React 基础概念

1.1 React 组件

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

函数组件示例：

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

类组件示例：

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

1.2 JSX 语法

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

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

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

1.3 State 与 Props

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

示例：

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 中移除。

常见生命周期方法：

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

2.2 事件处理

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

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

2.3 条件渲染

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

2.4 列表渲染

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

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

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

3.3 useContext

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

4. React Router（前端路由）

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

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 解决组件间状态共享问题。

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 进行组件优化

const MemoizedComponent = React.memo(MyComponent);

6.2 使用 useCallback 记忆化函数

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

6.3 使用 useMemo 记忆化计算结果

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

7. 结语

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