个人观点 · 仅供参考

说实话，前端圈子里的风向来去匆匆，但 React 这股风，刮了这么多年不仅没停，反而越吹越猛。对于hen多刚入行或者想转行的朋友来说React 似乎是一座难以翻越的高山。满屏的 Hooks、JSX、组件化概念，还没开始写代码，脑子就Yi经开始打结了。别慌，其实 React 的核心思想非常朴素，就是把复杂的界面拆成一个个积木。今天咱们就抛开那些晦涩的官方文档，用Zui接地气的方式，聊聊 React 零基础入门到底需要掌握哪些核心用法。

现在的 React 开发，基本上是函数组件和 Hooks 的天下。以前那种类组件的写法，虽然还Neng在老项目里见到，但新项目里Yi经hen少用了。所以咱们直接切入正题，从Zui现代化的写法说起。

一、 起步：环境搭建与 JSX 的初体验

工欲善其事，必先利其器。以前搭建 React 环境那是相当麻烦，又要 Webpack 又要 Babel。不过现在有了 Vite，一切dou变得丝滑起来。你不需要去纠结那些复杂的配置，几行命令就Neng跑起来。

打开你的终端，敲下下面这几行代码，见证奇迹的时刻就到了：

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

搞定！这时候你打开浏览器，应该就Nengkan到 React 的欢迎界面了。接下来咱们kankan代码长什么样。React 推荐使用 JSX 来写视图，这玩意儿kan起来像 HTML，但其实是 JavaScript 的语法糖。你Ke以在 JS 代码里直接写标签，这种感觉一开始会hen怪，但写多了你会觉得“真香”。

Zui简单的组件大概长这样：

function App {
  return 
Hello React
}
export default App

kan到没？就是一个函数，返回一段 HTML 结构。这就是 React 的基石：一切皆组件。不过要注意，JSX 里有些地方和 HTML 还是不一样的，比如 class 要写成 className，因为 class 在 JS 里是关键字。这些小细节，平时写的时候注意点就行。

二、 状态管理：让页面“动”起来

Ru果只Neng写静态的 HTML，那 React 也没什么大不了的。React 的强大之处在于它Neng轻松管理状态。什么是状态？简单说就是会变化的数据。比如一个计数器，点一下加一，这个“数字”就是状态。

在函数组件里我们用 useState 这个 Hook 来定义状态。这可是 React 的灵魂所在。

import { useState } from 'react'
function App {
  // 定义一个叫 count 的状态，初始值是 0
  // setCount 是用来geng新这个状态的方法
  const  = useState
  return (
    

      
当前数值：{count}
       setCount}>
        点我加一
      
    
  )
}

这里有个hen重要的点要记住：千万不要直接修改状态。比如 count = count + 1 是绝对错误的写法！你必须调用 setCount 这个函数，告诉 React “状态变了麻烦你重新渲染一下页面”。React 会根据新的状态，自动计算出界面该怎么变。这种“数据驱动视图”的模式，是现代前端开发的核心。

三、 组件拆分与传值：父子组件的默契

随着项目变大，把所有代码dou塞在一个 App 函数里显然是不现实的。这时候就需要把组件拆分。拆分之后组件之间怎么通信呢？Zui常见的就是“父传子”。

父组件Ke以通过 props 把数据传给子组件。这就好比爸爸给零花钱，儿子拿着钱去买糖。

咱们先定义一个子组件：

function Child {
  return 
来自父组件的消息：{props.name}
}

然后在父组件里使用它：

function App {
  return (
    

      {/* 这里把数据传进去 */}
      
    
  )
}

当然现在的写法geng推荐解构赋值，kan起来geng清爽：

function Child {
  return 
来自父组件的消息：{name}
}

这种单向数据流的设计，让数据流向非常清晰，排查bug的时候也容易hen多。你不需要像以前那样到处找这个变量是在哪被改的，顺着 props 往上找就行了。

四、 副作用处理：useEffect 的魔力

Ru果说 useState 是用来管理组件内部的数据，那 useEffect 就是用来处理“副作用”的。什么是副作用？简单说就是那些不在组件渲染逻辑里但必须要Zuo的事。比如：请求数据、操作 DOM、设置定时器、监听窗口大小变化等等。

你Ke以把它类比为以前类组件里的生命周期钩子的合体。

import { useEffect, useState } from 'react'
function App {
  const  = useState
  useEffect => {
    // 这里的代码会在组件挂载或geng新后执行
    document.title = `当前点击了 ${count} 次`
    // 返回的这个函数，会在组件卸载或下一次geng新前执行
    // 通常用来Zuo清理工作，比如清除定时器
    return  => {
      console.log
    }
  }, ) // 依赖数组：只有当 count 变化时才会重新执行这个 effect
}

这里有个坑，新手一定要注意那个依赖数组 。

Ru果不写，每次渲染dou会执行。

Ru果写个空数组 ，就相当于“只执行一次”。

Ru果像上面这样写了 ，那就只有当 count 变了才会执行。

理解了这个，你就掌握了 React Hooks 的半壁江山。

五、 动态渲染：条件与列表的艺术

页面不可Neng永远一成不变。有时候我们需要根据条件显示不同的内容，有时候需要把一组数据渲染成列表。在 React 里这些dou是用 JS 原生Neng力实现的，不需要像 Vue 那样记一堆指令。

1. 条件渲染

Zui常用的就是利用逻辑与 && 短路运算。当条件为真时才渲染后面的内容。

function App {
  const isShow = true
  return (
    

      {isShow && 
只有当 isShow 为 true 时你才Nengkan到我
}
    
  )
}

当然复杂点的情况也Ke以用三元运算符 condition ? A : B，这个大家应该douhen熟悉了。

2. 列表渲染

列表渲染其实就是用数组的 map 方法，把数据映射成一段段 JSX。这里有个极其重要的细节：必须给每一项设置唯一的 key。这个 key 帮助 React 辨识哪些元素改变了、添加了或者被删除了。

function App {
  const list = 
  return (
    

      {list.map => (
        // 注意：这里用 index Zuo key 在列表会增删排序时不推荐，但在静态列表里勉强Neng用
        // Zui好用数据里唯一的 id
        
{item}
      ))}
    

  )
}

六、 事件处理：与用户的交互

没有交互的页面是死水一潭。React 里的事件处理和原生 HTML hen像，但有一些细微的差别。比如事件名是用驼峰命名法，而且你传的是一个函数引用，而不是函数调用的字符串。

function App {
  const handleClick =  => {
    // e 是事件对象
    e.preventDefault // 阻止默认行为，比如表单提交跳转
    alert
  }
  return (
    
      点击我试试
    
  )
}

有时候你会kan到这种写法：onClick={ => handleClick}。这种写法通常是为了传参。Ru果不需要传参，直接写 onClick={handleClick} 就行，这样性Nenggeng好，因为每次渲染不会创建新的函数。

七、 样式写法：不仅仅是 className

React 里写样式，方式还挺多的，kan你喜欢哪种口味。

行内样式： 直接写 JS 对象，注意属性名也要用驼峰，比如 fontSize 而不是 font-size。

红色文字

className： Zui传统的写法，引入 CSS 文件，然后给类名。

import './app.css'
我是盒子

CSS Modules / styled-components： 这些是为了解决样式冲突问题的高级方案。CSS Modules Neng让类名自动哈希化，避免全局污染；而 styled-components 是 CSS-in-JS 的代表，用 JS 写样式，逻辑geng内聚。

其实没那么难

回过头来kan，React 的核心用法其实就这几板斧：useState 管数据，useEffect 处理副作用，JSX 写结构，Props 传数据。剩下的就是多写多练，把这些基础组合起来就Neng搭出复杂的应用。

hen多新手觉得难，往往是被各种生态工具吓到了。其实先把 React 本身吃透，再去学那些周边技术，你会发现一切dou顺理成章。

编程这事儿，Zui怕的就是眼高手低。kan懂了不代表会了打开你的编辑器，亲手敲一个计数器，敲一个待办事项列表，遇到报错别急着问 AI，先kankan报错信息，试着去理解它。当你第一次成功跑通自己写的 React 组件时那种成就感是无与伦比的。

祝各位指尖飞码，bug 不沾，早日成为 React 高手！

---