00 - React 基础
1. React 基础
安装react指令
可参考：
- 官网
- 官网使用教程
如：
npx create-react-app 项目名
如：npx create-react-app react-redux-pro
JSX
JSX 是一种 JavaScript 的语法扩展，类似于 XML 或 HTML，允许我们在 JavaScript 代码中编写 HTML。
const element = <h1>Hello, world!</h1>;
组件
组件是 React 应用的核心，可以是函数组件或类组件。
函数组件
function Welcome(props) {return <h1>Hello, {props.name}</h1>;
}
类组件
class Welcome extends React.Component {render() {return <h1>Hello, {this.props.name}</h1>;}
}
Props
Props（属性）是组件间传递数据的方式。
function Welcome(props) {return <h1>Hello, {props.name}</h1>;
}const element = <Welcome name="Sara" />;
State
State 是组件内部的数据管理机制，只能在类组件和使用 Hook 的函数组件中使用。
类组件中的 State
class Clock extends React.Component {constructor(props) {super(props);this.state = { date: new Date() };}render() {return <h2>It is {this.state.date.toLocaleTimeString()}.</h2>;}
}
函数组件中的 State
import { useState } from 'react';function Clock() {const [date, setDate] = useState(new Date());return <h2>It is {date.toLocaleTimeString()}.</h2>;
}
事件处理
React 的事件处理类似于 DOM 事件，但有一些语法差异。
function ActionLink() {function handleClick(e) {e.preventDefault();console.log('The link was clicked.');}return (<a href="#" onClick={handleClick}>Click me</a>);
}
2. 组件生命周期
类组件有一系列生命周期方法，可以在组件的不同阶段执行代码。
class Clock extends React.Component {constructor(props) {super(props);this.state = { date: new Date() };}componentDidMount() {this.timerID = setInterval(() => this.tick(), 1000);}componentWillUnmount() {clearInterval(this.timerID);}tick() {this.setState({date: new Date()});}render() {return <h2>It is {this.state.date.toLocaleTimeString()}.</h2>;}
}
3. React Hooks
Hooks 是 React 16.8 引入的新特性，使函数组件也能使用 state 和其他 React 特性。
useState
import { useState } from 'react';function Counter() {const [count, setCount] = useState(0);return (<div><p>You clicked {count} times</p><button onClick={() => setCount(count + 1)}>Click me</button></div>);
}
useEffect
用于在函数组件中执行副作用操作（例如数据获取、订阅、手动 DOM 操作）。
import { useState, useEffect } from 'react';function Clock() {const [date, setDate] = useState(new Date());useEffect(() => {const timerID = setInterval(() => setDate(new Date()), 1000);return () => clearInterval(timerID);}, []);return <h2>It is {date.toLocaleTimeString()}.</h2>;
}
useContext
用于共享状态。
const MyContext = React.createContext();function MyProvider({ children }) {const [value, setValue] = useState('Hello, world!');return <MyContext.Provider value={value}>{children}</MyContext.Provider>;
}function MyComponent() {const value = useContext(MyContext);return <div>{value}</div>;
}
useReducer
用于管理复杂的 state 逻辑。
import { useReducer } from 'react';const initialState = { count: 0 };function reducer(state, action) {switch (action.type) {case 'increment':return { count: state.count + 1 };case 'decrement':return { count: state.count - 1 };default:throw new Error();}
}function Counter() {const [state, dispatch] = useReducer(reducer, initialState);return (<>Count: {state.count}<button onClick={() => dispatch({ type: 'increment' })}>+</button><button onClick={() => dispatch({ type: 'decrement' })}>-</button></>);
}
自定义 Hook
自定义 Hook 是提取组件逻辑复用的机制。
import { useState, useEffect } from 'react';function useFriendStatus(friendID) {const [isOnline, setIsOnline] = useState(null);useEffect(() => {function handleStatusChange(status) {setIsOnline(status.isOnline);}// 假设这里有一个订阅好友状态的 API// ChatAPI.subscribeToFriendStatus(friendID, handleStatusChange);return () => {// ChatAPI.unsubscribeFromFriendStatus(friendID, handleStatusChange);};}, [friendID]);return isOnline;
}function FriendStatus(props) {const isOnline = useFriendStatus(props.friend.id);if (isOnline === null) {return 'Loading...';}return isOnline ? 'Online' : 'Offline';
}
4. Context API
Context 提供了一种在组件树中传递数据的方法，无需手动传递 props。
const ThemeContext = React.createContext('light');function App() {return (<ThemeContext.Provider value="dark"><Toolbar /></ThemeContext.Provider>);
}function Toolbar() {return (<div><ThemedButton /></div>);
}function ThemedButton() {const theme = useContext(ThemeContext);return <button theme={theme}>Themed Button</button>;
}
5. React Router
用于处理 React 应用的路由。
import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom';function Home() {return <h2>Home</h2>;
}function About() {return <h2>About</h2>;
}function App() {return (<Router><div><nav><ul><li><Link to="/">Home</Link></li><li><Link to="/about">About</Link></li></ul></nav><Switch><Route path="/about"><About /></Route><Route path="/"><Home /></Route></Switch></div></Router>);
}
6. 状态管理
Redux
Redux 是一个用于管理应用状态的库。
import { createStore } from 'redux';
import { Provider, useDispatch, useSelector } from 'react-redux';const initialState = { count: 0 };function reducer(state = initialState, action) {switch (action.type) {case 'increment':return { count: state.count + 1 };case 'decrement':return { count: state.count - 1 };default:return state;}
}const store = createStore(reducer);function Counter() {const count = useSelector((state) => state.count);const dispatch = useDispatch();return (<><div>{count}</div><button onClick={() => dispatch({ type: 'increment' })}>+</button>