从零到一掌握 React 核心语法与规则：前端开发者必备指南

作为目前前端领域最主流的框架之一，React 凭借组件化、虚拟 DOM、单向数据流等核心特性，成为前端开发者的必备技能。很多新手在入门 React 时，容易混淆 JSX 语法、组件写法、状态管理等规则，导致开发效率低下。

这篇博客将系统梳理 React 的核心语法、基础规则和最佳实践，从入门到实战，帮你快速吃透 React 基础，避开常见坑点。

一、React 核心基础：先搞懂这 3 个概念

在写代码前，先明确 React 最核心的三个基础概念，这是理解所有语法的前提：

组件化：把页面拆分成独立、可复用的模块（比如按钮、导航栏、表单），每个组件负责自己的逻辑和 UI，像搭积木一样构建页面。
JSX ：React 专用的语法扩展，允许在 JavaScript 中写 HTML 结构，是 React 编写 UI 的核心语法。
虚拟 DOM：React 用 JavaScript 对象模拟真实 DOM，通过 diff 算法高效更新页面，比直接操作 DOM 性能更高。

二、React 核心语法：JSX 规则（必背！）

JSX 不是 HTML，也不是字符串，而是 JavaScript 的语法扩展，所有 React UI 编写都依赖 JSX，必须牢记以下 8 条核心规则：

1. 必须有一个根节点包裹

JSX 只能有一个顶层元素，不能并列多个标签。

javascript 复制代码

// 错误：并列两个 div，没有根节点
const App = () => {
  return <div>Hello</div><div>React</div>;
}

// 正确1：用 div 包裹
const App = () => {
  return (
    <div>
      <div>Hello</div>
      <div>React</div>
    </div>
  );
}

// 正确2：用空标签（Fragment，不渲染额外 DOM）
const App = () => {
  return (
    <>
      <div>Hello</div>
      <div>React</div>
    </>
  );
}

2. 标签必须闭合

HTML 中部分单标签可以不闭合（如 <img>、<input>），但 JSX 中所有标签必须闭合。

javascript 复制代码

// 错误
<img src="logo.png">
<input type="text">

// 正确
<img src="logo.png" />
<input type="text" />

3. 类名用 className，不用 class

class 是 JavaScript 关键字，JSX 中用 className 代替 HTML 的 class。

javascript 复制代码

// 错误
<div class="container">内容</div>

// 正确
<div className="container">内容</div>

4. 样式用对象形式，不能写字符串

JSX 中行内样式必须传入JavaScript 对象 ，属性名用驼峰命名（如 fontSize 代替 font-size）。

javascript 复制代码

// 错误
<div style="color: red; font-size: 16px">内容</div>

// 正确
<div style={{ color: 'red', fontSize: '16px' }}>内容</div>

5. JavaScript 表达式用 {} 包裹

在 JSX 中使用变量、函数、表达式、三元运算等，必须用大括号 {} 包裹。

javascript 复制代码

const name = "React";
const age = 8;

const App = () => {
  return (
    <div>
      {/* 变量 */}
      <h1>你好，{name}</h1>
      {/* 表达式 */}
      <p>年龄：{age + 1} 岁</p>
      {/* 三元运算 */}
      <p>{age >= 18 ? "成年" : "未成年"}</p>
    </div>
  );
}

6. 事件绑定用驼峰命名

JSX 事件名是驼峰格式 （如 onClick 代替 onclick），绑定的是函数，不是字符串。

javascript 复制代码

// 错误
<button onclick="handleClick">点击</button>

// 正确
<button onClick={handleClick}>点击</button>

7. 列表渲染必须加 key 属性

用 map 渲染列表时，必须给每一项添加唯一的 key（建议用数据 id，不要用索引），帮助 React 高效更新 DOM。

javascript 复制代码

const list = [
  { id: 1, name: "苹果" },
  { id: 2, name: "香蕉" },
  { id: 3, name: "橙子" }
];

const App = () => {
  return (
    <ul>
      {list.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

8. 注释用 {/* 注释内容 */}

JSX 中的注释不能用 //，必须用 {/* */} 包裹。

javascript 复制代码

const App = () => {
  return (
    <div>
      {/* 这是 JSX 注释 */}
      <h1>React 注释规则</h1>
    </div>
  );
}

三、React 组件：两种核心写法

React 组件分为函数组件 和类组件 ，目前官方推荐优先使用函数组件 + Hooks（更简洁、易维护）。

1. 函数组件（推荐）

最简单的组件写法，本质是一个返回 JSX 的 JavaScript 函数，无 this、无生命周期，配合 Hooks 实现状态管理。

javascript 复制代码

// 定义函数组件
function Button() {
  return <button>函数组件按钮</button>;
}

// 箭头函数写法（更常用）
const Card = () => {
  return <div className="card">卡片组件</div>;
};

// 组件复用
const App = () => {
  return (
    <div>
      <Button />
      <Card />
    </div>
  );
};

2. 类组件（旧版，了解即可）

基于 ES6 类编写，继承 React.Component，有 this、生命周期和 state，目前逐步被函数组件替代。

javascript 复制代码

import React from 'react';

class ClassComponent extends React.Component {
  // 状态
  state = { count: 0 };

  render() {
    return <div>类组件：{this.state.count}</div>;
  }
}

四、React 核心规则：状态与属性（State & Props）

组件的两大核心：Props（父传子数据） 和 State（组件自身状态），是 React 数据驱动的核心。

1. Props：父组件向子组件传值

javascript 复制代码

import { useState } from 'react';

const Counter = () => {
  // 定义 State：[状态值, 修改状态的函数] = useState(初始值)
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>计数：{count}</p>
      {/* 正确修改 State */}
      <button onClick={() => setCount(count + 1)}>增加</button>
      
      {/* 错误：直接修改 State，不会触发渲染 */}
      {/* <button onClick={() => count++}>错误写法</button> */}
    </div>
  );
};

Props 是只读的，子组件不能修改 Props，只能读取；
可以传递任意数据：字符串、数字、函数、组件等。

javascript 复制代码

// 子组件：接收 Props
const Child = (props) => {
  // props 是对象，包含父组件传递的所有数据
  return (
    <div>
      <p>姓名：{props.name}</p>
      <p>年龄：{props.age}</p>
    </div>
  );
};

// 父组件：传递 Props
const Parent = () => {
  return <Child name="张三" age={20} />;
};

2. State：组件自身的响应式数据

State 是响应式的，修改 State 会自动触发页面重新渲染；
函数组件用 useState Hook 定义 State；
不能直接修改 State，必须用修改函数（遵循不可变原则）。

五、React 数据流：单向数据流规则

React 严格遵循单向数据流：

数据只能从父组件 → 子组件 传递（通过 Props）；子组件不能直接修改父组件的数据，必须通过父组件传递的回调函数通知父组件修改；状态提升：多个组件共享数据时，将数据提升到最近的公共父组件管理。

javascript 复制代码

// 子组件：触发回调
const Child = ({ onAdd }) => {
  return <button onClick={onAdd}>子组件点击</button>;
};

// 父组件：管理数据，传递回调
const Parent = () => {
  const [num, setNum] = useState(0);
  return (
    <div>
      <p>总数：{num}</p>
      {/* 传递回调函数给子组件 */}
      <Child onAdd={() => setNum(num + 1)} />
    </div>
  );
};

六、React Hooks：函数组件的灵魂（3 个核心 Hook）

Hooks 是 React 16.8 推出的特性，让函数组件拥有状态、生命周期等能力，必须遵循 Hooks 规则：

1. useState：定义响应式状态

最基础的 Hook，用于管理组件自身状态（上文已举例）。

2. useEffect：副作用处理

处理异步请求、定时器、DOM 操作等副作用，替代类组件的生命周期。

javascript 复制代码

import { useState, useEffect } from 'react';

const UseEffectDemo = () => {
  const [data, setData] = useState(null);

  // 语法：useEffect(回调函数, 依赖数组)
  useEffect(() => {
    // 1. 执行副作用：模拟接口请求
    const fetchData = async () => {
      const res = await fetch('https://api.github.com');
      const result = await res.json();
      setData(result);
    };
    fetchData();

    // 2. 清理副作用（可选）
    return () => {
      console.log('组件卸载/重新渲染前清理');
    };
  }, []); // 空依赖：只在组件挂载时执行一次

  return <div>数据：{data?.login}</div>;
};

3. useRef：获取 DOM 元素 / 保存可变值

用于获取真实 DOM 节点，或存储不触发渲染的可变数据。

javascript 复制代码

import { useRef } from 'react';

const UseRefDemo = () => {
  // 创建 ref
  const inputRef = useRef(null);

  const focusInput = () => {
    // 通过 current 获取 DOM 元素
    inputRef.current.focus();
  };

  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={focusInput}>聚焦输入框</button>
    </div>
  );
};

七、React 开发避坑指南（新手必看）

八、总结

React 的核心语法和规则并不复杂，抓住这几个关键点就能快速上手：

掌握这些基础规则后，再深入学习 React 路由、状态管理（Redux/Zustand）等进阶知识，会事半功倍。React 的核心是用 JavaScript 思维写 UI，多写多练，很快就能熟练掌握！

总结

这篇博客完整覆盖了 React 入门核心：

只能在函数组件顶层调用 Hooks，不能在循环、条件、嵌套函数中调用；
只能在React 函数组件 / 自定义 Hooks中调用 Hooks。
不要在 JSX 中写复杂逻辑：复杂计算、判断抽离成函数，保证 JSX 简洁；

State 不可变原则 ：永远用修改函数更新 State，不直接修改对象 / 数组；

jsx

javascript 复制代码

// 错误：直接修改数组
const [list, setList] = useState([1,2,3]);
list.push(4);

// 正确：生成新数组
setList([...list, 4]);

key 不要用索引：列表渲染用唯一 id 作为 key，避免 Diff 算法出错；
组件名必须大写：React 区分组件和普通标签，小写会被当作 HTML 标签；
依赖数组不要漏：useEffect 依赖的变量必须加入依赖数组，避免数据不同步。
JSX 是核心：牢记根节点、大括号表达式、驼峰命名等规则；
组件化思想：拆分可复用组件，函数组件优先；
数据驱动：Props 父传子，State 管理自身状态，单向数据流；
Hooks 利器：useState/useEffect/useRef 覆盖绝大多数场景。
JSX 8 条必背规则：解决 UI 编写语法问题；
函数 / 类组件写法：掌握组件定义与复用；
State&Props 核心：理解 React 数据驱动原理；
Hooks 基础：函数组件开发必备；
新手避坑指南：避开常见错误。