React入门：从项目创建到状态管理

绅士玖
58 阅读5分钟

引言

在现代前端开发中，React已经成为最受欢迎的JavaScript库之一。它通过组件化的方式简化了用户界面的构建过程，使开发者能够更专注于业务逻辑而非DOM操作。本文将带你从零开始创建一个React项目，并介绍React的基础写法以及useState钩子的使用。

项目创建

image.png

React项目的创建非常简单，我们可以使用Vite这个现代化的构建工具来快速搭建项目：

npm init vite

npm

npm（Node Package Manager）是Node.js的包管理工具，用于安装、管理和共享JavaScript代码库。它拥有庞大的开源生态系统，开发者可以通过npm install快速安装依赖，并通过npm run执行项目脚本，极大提升了开发效率。

Vite

Vite是新一代前端构建工具，主打极速启动和热更新。它利用原生ES模块（ESM）和浏览器原生支持，省去了传统打包工具的繁琐过程，尤其适合现代框架（如React、Vue）的开发，提供更快的开发体验。

在创建过程中，我们需要选择：

  • 框架：React
  • 语言：JavaScript

如图：

image.png

创建完成后，进入项目目录并安装依赖：

cd 项目名
npm install
npm run dev

注意：一定要进入你项目的文件夹里面，也就是cd 项目名

这里简单介绍一些相关内容：

  1. npm i 用于安装项目依赖包，读取 package.json 中的依赖项并下载到 node_modules 文件夹，确保项目所需的第三方库可用，使开发环境正常运行。
  2. node_modules 存储项目依赖的所有第三方库和工具，每个依赖包及其子依赖都会自动安装在此目录。它是项目运行的基础，但通常不纳入版本控制（如Git）。

image.png

下面就是网页展示：

image.png

React基础组件

React的核心思想是组件化开发。一个React组件本质上就是一个返回JSX（类似HTML的语法）的JavaScript函数：

function App() {
  const todos = ['吃饭', '睡觉', '打豆豆'];
  
  return (
    <table className = 'tab'>
      <thead>
        <tr>
          <th>序号</th>
          <th>任务</th>
        </tr>
      </thead>
      <tbody>
        {todos.map((todo, index) => (
          <tr key={index}>
            <td>{index + 1}</td>
            <td>{todo}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

export default App  //组件要导出，这样别的地方才能使用这个组件

在这个例子中，我们：

  1. 定义了一个静态的todos数组
  2. 使用JSX语法返回一个表格结构
  3. 使用map方法动态渲染数组内容

注意:

  1. JSX中嵌入JavaScript表达式需要使用{}包裹。

  2. React 组件必须以大写字母开头，而 HTML 标签则必须是小写字母。

比如：

export default function MyApp() {
 return (
   <div>
     <h1>在MyApp里面使用App组件</h1>
     <App />
   </div>
 );
}
  1. JSX 比 HTML 更加严格。必须闭合标签，如 <br />。组件也不能返回多个 JSX 标签(也就是return里面只能包含一个大标签，大标签里面可以包含很多小标签)。所以必须将它们包裹到一个共享的父级中，比如 <div>...</div> 或使用空的 <>...</> 包裹
  2. 这里添加样式要用className，而不是JS中的class了

响应式数据与useState

静态数据在实际应用中很少见，React提供了useState钩子来管理组件的状态：

import { useState } from 'react';

function App() {
  const [todos, setTodos] = useState(['吃饭', '睡觉', '打豆豆']);
  const [title, setTitle] = useState('ECUT 一明');

  setTimeout(() => {
    setTodos(['吃饭', '睡觉', '打豆豆', '养鱼']);
    setTitle('痞老板拿下字节就乐了');
  }, 3000);

  return (
    <div>
      <h1 className="title">{title}</h1>
      <table>
        {/* 表格结构与之前相同 */}
      </table>
    </div>
  );
}

useState的使用要点：

  1. 从react中导入useState钩子

  2. 调用useState并传入初始值，返回一个数组

    • 第一个元素是当前状态值
    • 第二个元素是更新状态的函数

  3. 使用了ES6中的结构赋值，不了解的可以去搜索一下

  4. 状态更新必须使用对应的set函数（如setTodos），直接修改状态变量不会触发重新渲染

  5. 当状态更新时，React会自动重新渲染组件

为什么需要useState

你可能好奇为什么不能直接修改变量：

// 错误示例
setTimeout(() => {
  todos = ['吃饭', '睡觉', '打豆豆', '养鱼']; // 这不会触发重新渲染
}, 3000);

直接修改变量虽然改变了值，但React无法感知这种变化，因此不会更新UI。使用useState提供的set函数，React能够跟踪状态变化并自动更新视图。

最佳实践

  1. 使用解构赋值：const [state, setState] = useState(initialValue)是标准模式
  2. 保持状态不可变：更新状态时总是返回新值，而不是修改原值
  3. 为列表项添加key：渲染列表时给每个元素添加唯一的key属性，帮助React高效更新DOM
  4. 状态提升：当多个组件需要共享状态时，将状态提升到它们最近的共同父组件

总结

React通过组件化和声明式编程简化了前端开发。useState是React中最基础也最重要的钩子之一，它让我们能够在函数组件中添加和管理状态。记住：

  • 组件是返回JSX的函数
  • 使用useState管理可变状态
  • 状态更新必须通过set函数
  • React会自动处理状态变化和UI更新

掌握了这些基础概念后，你已经可以开始构建简单的React应用了。下一步可以学习更复杂的钩子如useEffect、useContext，以及组件间的数据传递等高级主题。

avatar
文章
阅读
粉丝