React 前端框架

Hello World

安装环境

React 项目依赖 Node.js 运行环境。 可以验证一下是否有安装这两个环境。

node -v
npm -v

创建并运行React项目

单机文件夹+option复制文件夹目录

npm create vite@latest my-app
cd my-app
npm install
npm run dev

• vite既可以创建react，也可以创建vue
• control+v 停止项目

HelloWorld代码

修改src/App.js,改成Hello World

import React from 'react';

function App() {
  return (
    <div>
      <h1>Hello World</h1>
    </div>
  );
}

export default App;

什么是组件？

在 React 里，组件就是一个可复用的 UI 模块（你可以把它想象成页面上的一个小积木或功能块）。 比如：

function Hello() {
  return <h1>你好，React！</h1>;
}

这个 Hello 函数返回了一个界面内容，它就是一个 React 组件。 你可以在其他地方像标签一样使用它：

<Hello />

更常见的例子：一个网页上的"按钮"、"用户头像"、"评论区"都可以是独立的组件。 useEffect会让组件重新渲染

()=>{} js里的函数

()=>{} 是一种函数写法，跟 function() {} 意思一样，但更短、更常用于临时写函数。

没参数/没返回值

const greet = () => {
  console.log("Hello");
};

有参数

const greet = (name) => {
  console.log(`Hello, ${name}`);
};

只有一行返回值

const add = (a, b) => a + b;

相当于

function add(a, b) {
  return a + b;
}

Hooks

useState：管理"状态"的 Hook

基本用法：

const [state, setState] = useState(initialValue);

• state：你当前的状态值
• setState：更新状态的函数
• initialValue：状态的初始值，比如空字符串、数组、对象、数字等

举个例子：

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0); // 初始值是 0

  return (
    <div>
      <p>当前计数：{count}</p>
      <button onClick={() => setCount(count + 1)}>增加</button>
    </div>
  );
}

说明：

• 初始时，count = 0
• 当你点击按钮，调用 setCount(count + 1)，count 增加，组件Counter重新渲染
• 这是"响应式"的，UI 会自动更新，不需要你手动去改页面内容

---

useEffect：处理"副作用"的 Hook

这是 React 的另一个 Hook：useEffect。它的作用是在组件加载（或更新）时执行副作用操作，比如：发请求、订阅事件、操作 DOM 等。

什么是副作用（side effect）？

像是这些行为都属于副作用：

• 数据请求（如 fetch 请求）
• 订阅（WebSocket、事件监听）
• 手动操作 DOM
• 定时器（setTimeout、setInterval）

基本用法：

useEffect(() => {
  // 这里写副作用逻辑
}, [依赖项]);

• 第一个参数是一个函数，用来执行副作用操作
• 第二个参数是一个"依赖数组"（dependency array）

三种常见用法：

1. 只运行一次（类似 componentDidMount）

useEffect(() => {
  console.log('组件加载完了');
}, []); // 空数组：只在第一次执行一次

2. 某个状态改变时触发

useEffect(() => {
  console.log('count 改变了');
}, [count]); // 当 count 变化时执行

3. 清理副作用（比如清除定时器）

useEffect(() => {
  const timer = setInterval(() => {
    console.log('每秒执行一次');
  }, 1000);

  return () => {
    clearInterval(timer); // 组件卸载时清理掉
  };
}, []);