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>