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 的基本用法和优化技巧，希望能帮助你入门并逐步深入！