【react】快速上手基础教程

news2025/2/28 23:08:20

一、React 简介

1.什么是 React

2.React 核心特性

二、环境搭建

1. 创建 React 项目

2.关键配置

三、核心概念

1. JSX 语法

表达式嵌入

样式处理

2. 组件 (Component)

3. 状态 (State) 与属性 (Props)

4. 事件处理

合成事件（SyntheticEvent)

5. 条件渲染

三元表达式

短路运算

6. 列表渲染

四、Hooks（函数组件的核心）

1. useState

基础用法

复杂对象管理

2. useEffect

3. 其他常用 Hooks

五、组件通信

1. 父传子：通过 Props

2. 子传父：通过回调函数

六、路由管理（使用 React Router）

1. 安装

2. 基础配置

七、状态管理（使用 Context API）

1. 创建 Context

八、进阶学习方向

九、官方资源

本文案例代码是TypeScript+React

一、React 简介

1.什么是 React

React 是一个用于构建用户界面的 JavaScript 库（专注于视图层），由 Facebook 开发。

声明式UI、组件化开发、虚拟DOM原理。

React vs Vue vs Angular：生态与设计哲学对比。

2.React 核心特性

单向数据流、JSX、函数式编程思想。跨平台能力（React Native、React VR）。

组件化：将 UI 拆分为独立可复用的组件。

虚拟 DOM：高效更新界面，优化性能。

声明式编程：通过描述 UI 的最终状态，而非具体操作步骤。

二、环境搭建

1. 创建 React 项目

Create React App（官方脚手架）

npx create-react-app my-app --template typescript

Vite（更轻量快速）：

npm create vite@latest my-app -- --template react-ts

使用官方脚手架工具 create-react-app 快速初始化项目：

npx create-react-app my-app
cd my-app
npm start

项目结构解析

my-app/
  src/
    components/  # 组件目录
    App.tsx      # 根组件
    index.tsx    # 入口文件
  public/        # 静态资源
  package.json

2.关键配置

路径别名（tsconfig.json）：

{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@/*": ["./*"]
    }
  }
}

三、核心概念

1. JSX 语法

JSX 是 JavaScript 的语法扩展，JSX本质：React.createElement的语法糖

表达式嵌入

const name = 'Alice';
const element = <h1>Hello, React!</h1>;

样式处理

<div style={{ color: 'red', fontSize: 20 }}>Styled Text</div>

2. 组件 (Component)

函数组件（推荐）：

interface Props {
  title: string;
}
const Header: React.FC<Props> = ({ title }) => <h1>{title}</h1>;

类组件：

class Counter extends React.Component<{}, { count: number }> {
  state = { count: 0 };
  render() { return <div>{this.state.count}</div>; }
}

3. 状态 (State) 与属性 (Props)

Props：父组件传递给子组件的数据（只读）。

// 父组件
<Child title="Hello" />
// 子组件
interface ChildProps { title: string; }
const Child: React.FC<ChildProps> = ({ title }) => <div>{title}</div>;

State：组件内部管理的动态数据（通过 useState 或 setState 更新）。

const [count, setCount] = useState(0);

4. 事件处理

<button onClick={() => alert('Clicked!')}>Click Me</button>

合成事件（SyntheticEvent)

const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
  e.preventDefault();
  console.log('Clicked');
};
<button onClick={handleClick}>Click</button>

5. 条件渲染

三元表达式

{ isLoggedIn ? <UserPanel /> : <LoginButton /> }

短路运算

{ isLoading && <Spinner /> }

6. 列表渲染

key的重要性（避免重复渲染问题）

使用 map() 和 key 属性：

const items = [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }];
return (
  <ul>
    {items.map(item => <li key={item.id}>{item.name}</li>)}
  </ul>
);

四、Hooks（函数组件的核心）

1. `useState`

`基础用法`

const [count, setCount] = useState<number>(0);
setCount(prev => prev + 1);

复杂对象管理

interface User { name: string; age: number; }
const [user, setUser] = useState<User>({ name: 'Alice', age: 30 });

2. `useEffect`

副作用处理（数据请求，事件监听）；

useEffect(() => {
  const timer = setInterval(() => console.log('Tick'), 1000);
  return () => clearInterval(timer); // 清理函数
}, []); // 空依赖数组表示仅执行一次

依赖数据控制更新：

useEffect(() => {
  // 组件挂载或更新时执行
  fetchData(userId);
  return () => {
    // 组件卸载时清理（如取消订阅）
  };
}, [userId]); // 依赖数组控制执行时机

3. 其他常用 Hooks

useContext（跨组件通信）：访问react上下文

const ThemeContext = createContext('light');
const theme = useContext(ThemeContext);

useRef：获取DOM引用或保存可变值。

const inputRef = useRef<HTMLInputElement>(null);
inputRef.current?.focus();

useMemo/useCallback：性能优化

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

useReducer：复杂状态管理。