React简介入门教程

更新时间：2026年02月27日 09:29:55 作者：BUG 饲养员

本文总结了React的基础知识点,包括环境搭建、核心概念（JSX、组件、props、state、事件处理、条件渲染、列表渲染）以及组件进阶（生命周期、Hooks、通信）,适合零基础开发者学习,涵盖理论与实操,适合React项目的开发和维护,感兴趣的朋友跟随小编一起看看吧

1. 前言

React是Facebook（现Meta）推出的开源前端框架，基于组件化思想和虚拟DOM技术，已成为现代前端开发的主流技术之一，广泛应用于单页面应用（SPA）、移动端应用（React Native）开发。本文汇总全网优质React基础资源，从环境搭建、核心概念到实战案例，循序渐进讲解React基础知识点，兼顾理论与实操，适合零基础入门开发者学习。

2. React简介与核心优势

2.1 React是什么

React是一个用于构建用户界面（UI）的JavaScript库，核心思想是“组件化”和“声明式编程”。与传统的命令式编程（手动操作DOM）不同，React采用声明式语法，开发者只需描述UI的最终状态，React会自动处理DOM的更新，大幅提升开发效率。

React的设计理念是“一次学习，随处编写”，不仅可以用于Web端开发，还能通过React Native开发移动端应用（iOS/Android），通过React Server Components开发服务端渲染（SSR）应用，生态极其丰富。

2.2 React核心优势

组件化开发：将复杂UI拆分为独立的可复用组件，降低代码耦合度，提升代码可维护性和复用性。
虚拟DOM（Virtual DOM）：React不直接操作真实DOM，而是通过虚拟DOM（JavaScript对象）描述DOM结构，通过Diff算法计算最小更新范围，减少DOM操作，提升页面性能。
声明式编程：只需关注“UI应该是什么样子”，无需关注“如何实现UI更新”，代码更简洁、易读。
单向数据流：数据从父组件流向子组件，状态管理清晰，避免数据混乱，便于调试。
丰富的生态系统：拥有React Router（路由）、Redux（状态管理）、Ant Design（UI组件库）等成熟工具，降低开发成本。
跨平台能力：通过React Native、Electron等工具，可快速实现多端应用开发，复用Web端代码。

2.3 React与其他框架对比（Vue/Angular）

框架	核心特点	优势	适用场景
React	组件化、虚拟DOM、单向数据流、Hooks	生态丰富、跨平台能力强、灵活性高、适合复杂应用	中大型Web应用、移动端应用、SSR应用
Vue	渐进式框架、双向绑定、模板语法、Composition API	上手简单、文档友好、轻量高效、适合快速开发	中小型Web应用、快速原型开发
Angular	完整框架、TypeScript支持、依赖注入、双向绑定	功能全面、规范性强、适合大型企业级应用	大型企业级Web应用、团队协作项目
总结：零基础入门可优先选择React或Vue，React的组件化思想和生态更适合长期发展，Vue上手门槛更低；Angular适合有TypeScript基础、开发大型企业级应用的场景。

3. 开发环境搭建（零基础入门）

3.1 前置环境准备（Node.js/npm）

React开发依赖Node.js和npm（包管理工具），无论采用哪种搭建方式，都需要先安装Node.js。

下载Node.js：访问Node.js官网，下载LTS版本（长期支持版，推荐16.x或18.x），安装过程默认下一步即可。
验证安装：打开终端（Windows：CMD/PowerShell；Mac：终端），输入以下命令，若能显示版本号则安装成功。

# 查看Node.js版本
node -v
# 查看npm版本
npm -v

（可选）安装cnpm（淘宝镜像）：由于npm默认镜像在国外，下载速度较慢，可安装cnpm加速包下载。

npm install -g cnpm --registry=https://registry.npm.taobao.org

3.2 两种搭建方式（CDN引入+Create React App）

React有两种入门搭建方式，适合不同场景：CDN引入适合快速原型开发、零基础体验；Create React App适合正式项目开发，自动配置好工程化环境。

3.2.1 方式一：CDN引入（快速体验）

无需搭建复杂工程，直接在HTML文件中引入React和ReactDOM的CDN链接，即可编写React代码。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>React CDN入门</title>
    <!-- 引入React核心库 -->
    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <!-- 引入ReactDOM（用于渲染DOM） -->
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <!-- 引入Babel（用于解析JSX语法） -->
    <script src="https://unpkg.com/@babel/standalone@7.23.2/babel.min.js"></script>
</head>
<body>
    <!-- React渲染的容器 -->
    <div id="root"></div>
    <script type="text/babel">
        // 编写React代码（JSX语法）
        const App = () => {
            return <h1>Hello, React!</h1>;
        };
        // 渲染组件到DOM容器中
        ReactDOM.createRoot(document.getElementById('root')).render(<App />);
    </script>
</body>
</html>

说明：1. type="text/babel"是必须的，用于告诉浏览器用Babel解析JSX语法；2. 开发环境用development.js，生产环境需替换为production.min.js（压缩版，提升性能）。

3.2.2 方式二：Create React App（正式项目）

Create React App（CRA）是React官方推荐的项目脚手架，自动配置好Webpack、Babel、ESLint等工具，无需手动配置，开箱即用。

# 1. 全局安装Create React App（仅首次需要）
npm install -g create-react-app
# 2. 创建React项目（项目名自定义，如react-basic-demo）
create-react-app react-basic-demo
# 3. 进入项目目录
cd react-basic-demo
# 4. 启动项目
npm start

启动成功后，浏览器会自动打开http://localhost:3000，看到React默认页面即表示项目搭建成功。

3.3 项目目录结构解析（CRA创建的项目）

CRA创建的项目目录结构清晰，核心文件如下（精简版，忽略无关文件）：

react-basic-demo/
├── node_modules/          # 项目依赖包（自动生成）
├── public/                # 静态资源目录
│  ├── index.html          # 入口HTML文件（React渲染的容器）
│  └── favicon.ico         # 项目图标
├── src/                   # 核心代码目录（开发重点）
│  ├── App.js              # 根组件（整个应用的入口组件）
│  ├── App.css             # App组件的样式文件
│  ├── index.js            # 入口JS文件（渲染根组件到DOM）
│  └── index.css           # 全局样式文件
├── .gitignore             # Git忽略文件
├── package.json           # 项目配置文件（依赖、脚本）
└── README.md              # 项目说明文档

核心文件说明：

public/index.html：唯一的HTML文件，React所有组件都会渲染到该文件的<div id="root"></div>中。
src/index.js：入口JS文件，负责将根组件（App.js）渲染到HTML的root容器中。
src/App.js：根组件，所有其他组件都会作为它的子组件，是整个应用的核心。

3.4 启动与运行项目

在项目目录中，执行以下命令即可启动/打包项目：

# 启动开发服务器（热更新，修改代码实时生效）
npm start
# 打包项目（生成生产环境代码，用于部署）
npm run build
# 运行测试（可选）
npm test
#  eject配置（可选，暴露Webpack等配置，一旦执行无法撤销）
npm run eject

注意：npm run eject会暴露项目的Webpack、Babel等配置文件，适合需要自定义配置的场景，零基础入门不建议执行，避免破坏默认配置。

4. React核心概念（必学）

4.1 JSX语法详解

JSX（JavaScript XML）是React的核心语法，允许在JavaScript中编写HTML-like代码，本质是JavaScript的语法扩展，最终会被Babel编译为普通的JavaScript代码。

4.1.1 JSX基本语法

// 简单JSX示例（在函数组件中使用）
const App = () => {
  // JSX语法：类似HTML，但写在JavaScript中
  return (
    <div className="app">
      <h1>React基础教程</h1>
      <p>JSX语法入门示例</p>
    </div>
  );
};

export default App;

4.1.2 JSX核心规则（必记）

1. 标签必须闭合：HTML中可省略闭合的标签（如
  ），JSX中必须闭合（
  ）。
1. className替代class：HTML中用class定义样式类，JSX中用className（因为class是JavaScript的关键字）。
1. 内联样式用对象：JSX中内联样式不能直接写字符串，需用JavaScript对象，属性名采用驼峰命名法（如fontSize替代font-size）。

// 内联样式示例
const App = () => {
  // 定义样式对象
  const style = {
    fontSize: '18px', // 驼峰命名法
    color: '#333',
    margin: '20px 0'
  };
  return (
    <div style={style}>
      <h1 style={{ color: 'red', fontWeight: 'bold' }}>内联样式示例</h1>
    </div>
  );
};

1. 嵌入JavaScript表达式：用{}包裹JavaScript表达式（变量、函数调用、三元运算等），不能嵌入语句（if/for等）。

const App = () => {
  const name = 'React';
  const isShow = true;
  // 嵌入变量、三元运算
  return (
    <div>
      <p>Hello, {name}!</p>
      {isShow ? <p>显示内容</p> : <p>隐藏内容</p>}
      <p>1+1={1+1}</p> {/* 嵌入表达式 */}
    </div>
  );
};

1. 多标签必须有根节点：JSX中如果有多个标签，必须用一个根节点包裹（如div、Fragment），Fragment（<></>）是无渲染节点，不会生成额外的DOM。

// 正确：用Fragment包裹多标签
const App = () => {
  return (
    <>
      <h1>标题</h1>
      <p>内容</p>
    </>
  );
};
// 错误：无根节点
const App = () => {
  return (
    <h1>标题</h1>
    <p>内容</p>
  );
};

4.2 组件基础（函数组件vs类组件）

组件是React的核心，将UI拆分为独立的、可复用的单元，每个组件负责渲染一部分UI，接收输入（props），返回需要渲染的JSX。React中的组件分为两种：函数组件和类组件，目前React官方推荐使用函数组件（搭配Hooks）。

4.2.1 函数组件（推荐）

函数组件是最简单的组件形式，本质是一个JavaScript函数，接收props参数，返回JSX。

// 简单函数组件
function Welcome() {
  return <h1>欢迎学习React</h1>;
}
// 箭头函数形式（更简洁，推荐）
const Welcome = () => {
  return <h1>欢迎学习React</h1>;
};
// 导出组件（供其他组件引入使用）
export default Welcome;

使用组件：引入组件后，像使用HTML标签一样使用即可。

import Welcome from './Welcome';
const App = () => {
  return (
    <div>
      <Welcome /> {/* 使用Welcome组件 */}
    </div>
  );
};

4.2.2 类组件（传统方式）

类组件是基于ES6类的组件，需要继承React.Component，必须实现render()方法，render()方法返回JSX。

// 引入React
import React from 'react';
// 类组件
class Welcome extends React.Component {
  // 必须实现render方法
  render() {
    return <h1>欢迎学习React</h1>;
  }
}
export default Welcome;

4.2.3 两种组件对比

组件类型	优点	缺点	适用场景
函数组件	语法简洁、易维护、支持Hooks、性能更优	早期不支持状态管理（需Hooks）	所有场景（React 16.8+推荐）
类组件	支持状态管理、生命周期方法	语法繁琐、代码冗余、不支持Hooks	旧项目维护、需要使用传统生命周期的场景
注意：React 16.8版本引入Hooks后，函数组件可以实现类组件的所有功能，且更简洁，因此新项目优先使用函数组件。

4.3 组件props（数据传递）

props（properties）是组件的输入，用于父组件向子组件传递数据，是组件间通信的最基础方式。props是只读的，子组件不能修改props的值（单向数据流）。

4.3.1 props基本使用

// 子组件：接收props参数
const Welcome = (props) => {
  // 从props中获取传递过来的数据
  return (
    <div>
      <h1>欢迎 {props.name} 学习React</h1>
      <p>年龄：{props.age}</p>
      <p>性别：{props.gender}</p>
    </div>
  );
};
// 父组件：向子组件传递props
const App = () => {
  return (
    <div>
      {/* 像HTML属性一样传递数据 */}
      <Welcome name="小明" age={18} gender="男" />
    </div>
  );
};

4.3.2 props默认值与类型校验

为了提升代码健壮性，可给props设置默认值，同时进行类型校验（需安装prop-types包）。

// 安装prop-types（用于类型校验）
// npm install prop-types
import PropTypes from 'prop-types';
const Welcome = (props) => {
  return (
    <div>
      <h1>欢迎 {props.name} 学习React</h1>
      <p>年龄：{props.age}</p>
    </div>
  );
};
// 设置props默认值
Welcome.defaultProps = {
  name: '未知用户',
  age: 18
};
// 类型校验（指定props的类型）
Welcome.propTypes = {
  name: PropTypes.string, // name必须是字符串
  age: PropTypes.number, // age必须是数字
  gender: PropTypes.string // gender必须是字符串（可选）
};
export default Welcome;

4.3.3 props传递函数（父组件接收子组件数据）

props不仅可以传递数据，还可以传递函数，子组件通过调用该函数，向父组件传递数据（实现子传父通信）。

// 子组件：调用props传递的函数，传递数据
const Child = (props) => {
  const handleClick = () => {
    // 向父组件传递数据
    props.onSendData('我是子组件的数据');
  };
  return <button onClick={handleClick}>向父组件传递数据</button>;
};
// 父组件：定义函数，接收子组件传递的数据
const Parent = () => {
  const receiveData = (data) => {
    console.log('接收子组件的数据：', data);
  };
  return <Child onSendData={receiveData} />;
};

4.4 组件state与setState（状态管理）

state是组件内部的状态，用于管理组件自身的数据，当state发生变化时，组件会重新渲染（更新UI）。与props不同，state是组件内部的，可修改（但需通过setState方法）。

4.4.1 函数组件中使用state（useState Hook）

函数组件通过useState Hook管理state，useState接收初始值，返回一个数组，第一个元素是state值，第二个元素是修改state的函数（setState）。

// 引入useState Hook
import { useState } from 'react';
const Counter = () => {
  // 定义state：count（初始值为0），setCount（修改count的函数）
  const [count, setCount] = useState(0);
  // 点击按钮，修改count
  const handleIncrement = () => {
    // 方式1：直接传递新值
    setCount(count + 1);
    // 方式2：接收prevState（上一次的state值），适合依赖上一次state的场景
    // setCount(prevCount => prevCount + 1);
  };
  return (
    <div>
      <p>当前计数：{count}</p>
      <button onClick={handleIncrement}>点击加1</button>
    </div>
  );
};
export default Counter;

4.4.2 类组件中使用state

import React from 'react';
class Counter extends React.Component {
  // 初始化state
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }
  handleIncrement() {
    // 类组件中修改state必须用setState方法，不能直接修改this.state
    this.setState({
      count: this.state.count + 1
    });
    // 依赖上一次state的场景，用函数形式
    // this.setState(prevState => ({
    //   count: prevState.count + 1
    // }));
  }
  render() {
    return (
      <div>
        <p>当前计数：{this.state.count}</p>
        <button onClick={() => this.handleIncrement()}>点击加1</button>
      </div>
    );
  }
}

4.4.3 setState注意事项

1. setState是异步的：React会批量处理setState调用，避免频繁更新DOM，因此修改后不能立即获取最新的state值。
1. 不能直接修改state：无论是函数组件还是类组件，都不能直接修改state（如count = count + 1、this.state.count = 1），必须通过setState方法修改，否则组件不会重新渲染。
1. 批量更新：多次调用setState会被合并为一次更新，提升性能。

// 异步示例
const Counter = () => {
  const [count, setCount] = useState(0);
  const handleClick = () => {
    setCount(count + 1);
    console.log(count); // 输出0（不是最新值），因为setState是异步的
  };
  return (
    <div>
      <p>{count}</p>
      <button onClick={handleClick}>点击</button>
    </div>
  );
};

4.5 事件处理（React事件机制）

React事件是基于原生DOM事件的封装，语法与原生DOM事件类似，但有一些区别，核心是“事件委托”（将事件绑定到根节点，提升性能）。

4.5.1 React事件基本使用

const EventDemo = () => {
  // 定义事件处理函数
  const handleClick = () => {
    alert('按钮被点击了');
  };
  // 绑定点击事件（注意：是onClick，驼峰命名法，不是onclick）
  return <button onClick={handleClick}>点击我</button>;
};

4.5.2 事件传递参数

const EventDemo = () => {
  // 事件处理函数接收参数
  const handleClick = (name) => {
    alert(`欢迎 ${name}`);
  };
  // 方式1：通过箭头函数传递参数
  return (
    <div>
      <button onClick={() => handleClick('React')}>点击1</button>
      <button onClick={() => handleClick('Vue')}>点击2</button>
    </div>
  );
};

4.5.3 事件对象（e）

React事件对象是原生DOM事件对象的封装（SyntheticEvent），拥有原生事件对象的大部分属性和方法（如target、preventDefault、stopPropagation）。

const EventDemo = () => {
  const handleClick = (e) => {
    // 阻止默认行为（如表单提交、a标签跳转）
    e.preventDefault();
    // 获取事件目标（触发事件的元素）
    console.log(e.target);
    // 阻止事件冒泡
    e.stopPropagation();
  };
  return (
    <a href="https://reactjs.org" rel="external nofollow"  onClick={handleClick}>
      点击不跳转
    </a>
  );
};

4.5.4 React事件与原生DOM事件的区别

1. 命名方式：React事件采用驼峰命名法（onClick、onChange），原生DOM事件采用小写（onclick、onchange）。
1. 事件绑定：React事件绑定的是函数引用，原生DOM事件绑定的是字符串（如οnclick=“handleClick()”）。
1. 事件对象：React事件对象是SyntheticEvent（合成事件），原生DOM事件对象是Event。

4.6 条件渲染（多种实现方式）

React中根据不同的条件渲染不同的UI，常用的实现方式有4种：三元运算符、逻辑与（&&）、if-else、switch-case。

4.6.1 三元运算符（推荐，简洁）

const ConditionDemo = () => {
  const isLogin = true;
  return (
    <div>
      {/* 三元运算符：条件为true渲染第一个，false渲染第二个 */}
      {isLogin ? <p>欢迎登录</p> : <p>请先登录</p>}
    </div>
  );
};

4.6.2 逻辑与（&&）（适合渲染单个元素）

const ConditionDemo = () => {
  const hasMessage = true;
  return (
    <div>
      {/* 逻辑与：条件为true渲染后面的元素，false不渲染 */}
      {hasMessage && <p>您有一条新消息</p>}
    </div>
  );
};

4.6.3 if-else（适合复杂条件）

const ConditionDemo = () => {
  const role = 'admin';
  // 定义渲染函数，根据条件返回不同的JSX
  const renderContent = () => {
    if (role === 'admin') {
      return <p>管理员界面</p>;
    } else if (role === 'user') {
      return <p>普通用户界面</p>;
    } else {
      return <p>游客界面</p>;
    }
  };
  return <div>{renderContent()}</div>;
};

4.7 列表渲染（key的作用与注意事项）

React中渲染列表时，需使用map()方法遍历数组，生成多个组件，同时必须给每个列表项添加key属性（唯一标识），否则会出现警告，影响性能。

4.7.1 列表渲染基本示例

const ListDemo = () => {
  // 模拟列表数据
  const list = [
    { id: 1, name: 'React基础' },
    { id: 2, name: 'React Hooks' },
    { id: 3, name: 'React Router' }
  ];
  return (
    <ul>
      {/* 遍历数组，生成列表项 */}
      {list.map(item => (
        // 必须添加key属性，且key值唯一
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
};

4.7.2 key的作用

1. 帮助React识别哪些列表项发生了变化（新增、删除、修改），从而只更新变化的项，提升渲染性能（避免全量更新）。
1. 避免列表项的状态混乱（如复选框选中状态、输入框内容）。

4.7.3 key的注意事项

1. key必须唯一：不能重复，否则会出现警告。
1. key不能用index（索引）：如果列表项会新增、删除、排序，用index作为key会导致React误判，影响性能和状态。
1. key应与数据绑定：最好使用数据的唯一标识（如id、uuid）作为key。

// 错误：用index作为key（不推荐）
{list.map((item, index) => (
  <li key={index}>{item.name}</li>
))}
// 正确：用数据的唯一id作为key
{list.map(item => (
  <li key={item.id}>{item.name}</li>
))}

5. React组件进阶

5.1 组件生命周期（类组件）

组件生命周期是类组件的核心特性，指组件从创建、渲染、更新到销毁的整个过程，每个阶段都有对应的钩子函数（生命周期方法），用于执行特定的逻辑。React 16.3+后的生命周期分为三个阶段：挂载阶段、更新阶段、卸载阶段。

5.1.1 挂载阶段（组件创建并渲染到DOM）

执行顺序：constructor → render → componentDidMount

constructor：组件初始化，初始化state、绑定事件（如this.handleClick = this.handleClick.bind(this)）。
render：渲染组件，返回JSX，不能修改state（否则会陷入无限循环）。
componentDidMount：组件挂载完成（已渲染到DOM），适合执行副作用操作（如请求数据、绑定DOM事件）。

5.1.2 更新阶段（组件state或props变化时）

执行顺序：shouldComponentUpdate → render → componentDidUpdate

shouldComponentUpdate：判断组件是否需要更新，返回true（更新）或false（不更新），可用于优化性能（避免不必要的渲染）。
render：重新渲染组件。
componentDidUpdate：组件更新完成，可执行更新后的操作（如根据新的props请求数据）。

5.1.3 卸载阶段（组件从DOM中移除）

componentWillUnmount：组件卸载前执行，用于清理副作用（如取消请求、解绑DOM事件），避免内存泄漏。

5.1.4 生命周期示例

import React from 'react';
class LifeCycleDemo extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
    console.log('1. constructor：组件初始化');
  }
  componentDidMount() {
    console.log('3. componentDidMount：组件挂载完成');
    // 模拟请求数据
    fetch('https://api.example.com/data')
      .then(res => res.json())
      .then(data => console.log('请求到的数据：', data));
  }
  shouldComponentUpdate(nextProps, nextState) {
    console.log('4. shouldComponentUpdate：判断是否更新');
    // 只有count大于0时才更新
    return nextState.count > 0;
  }
  componentDidUpdate(prevProps, prevState) {
    console.log('6. componentDidUpdate：组件更新完成');
    console.log('上一次的count：', prevState.count);
  }
  componentWillUnmount() {
    console.log('7. componentWillUnmount：组件卸载前');
    // 清理操作（如取消请求、解绑事件）
  }
  handleClick = () => {
    this.setState({ count: this.state.count + 1 });
  };
  render() {
    console.log('2. render：组件渲染');
    return (
      <div>
        <p>count：{this.state.count}</p>
        <button onClick={this.handleClick}>点击加1</button>
      </div>
    );
  }
}
export default LifeCycleDemo;

注意：函数组件没有生命周期方法，可通过useEffect Hook实现类似的功能。

5.2 函数组件 Hooks 基础（useState/useEffect）

Hooks是React 16.8版本引入的新特性，允许函数组件使用状态（state）、生命周期等类组件的功能，无需编写类组件，语法更简洁。常用的基础Hook有useState（状态管理）和useEffect（副作用处理）。

5.2.1 useState（已在4.4节讲解，补充说明）

useState用于在函数组件中声明状态，可声明多个状态，互不影响。

import { useState } from 'react';
const MultiStateDemo = () => {
  // 声明多个状态
  const [name, setName] = useState('React');
  const [age, setAge] = useState(18);
  const [isShow, setIsShow] = useState(true);
  return (
    <div>
      <p>名称：{name}</p>
      <p>年龄：{age}</p>
      {isShow && <p>显示内容</p>}
      <button onClick={() => setName('React Hooks')}>修改名称</button>
    </div>
  );
};

5.2.2 useEffect（副作用处理）

useEffect用于处理函数组件的副作用（如请求数据、绑定事件、修改DOM等），相当于类组件的componentDidMount、componentDidUpdate、componentWillUnmount的组合。

import { useState, useEffect } from 'react';
const EffectDemo = () => {
  const [data, setData] = useState([]);
  // useEffect接收两个参数：回调函数、依赖数组
  useEffect(() => {
    // 副作用操作：请求数据
    fetch('https://api.example.com/list')
      .then(res => res.json())
      .then(data => setData(data));
    // 清理函数（相当于componentWillUnmount）
    return () => {
      // 清理操作：取消请求、解绑事件等
      console.log('组件卸载/依赖变化，清理副作用');
    };
  }, []); // 依赖数组：空数组表示只执行一次（相当于componentDidMount）
  return (
    <ul>
      {data.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
};

5.2.3 useEffect依赖数组的作用

1. 空数组（[]）：回调函数只执行一次（组件挂载时），清理函数在组件卸载时执行。
1. 无依赖数组：回调函数在组件挂载和每次更新时都执行，清理函数在每次更新前执行。
1. 有依赖数组（如[name, age]）：回调函数在组件挂载时执行，且当依赖项（name或age）发生变化时执行，清理函数在依赖项变化前或组件卸载时执行。

5.3 组件通信（父子/兄弟/跨层级）

组件通信是React开发中的核心需求，不同层级的组件通信方式不同，常用的通信方式如下：

5.3.1 父子组件通信（最常用）

父传子：通过props传递数据/函数。
子传父：通过props传递函数，子组件调用函数传递数据（已在4.3节讲解）。

到此这篇关于React简介入门教程的文章就介绍到这了,更多相关React基础教程内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

React hooks useState异步问题及解决
这篇文章主要介绍了React hooks useState异步问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-08-08
ReactNative 之FlatList使用及踩坑封装总结
本篇文章主要介绍了ReactNative 之FlatList使用及踩坑封装总结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-11-11
一文带你深入理解React中的Context
React Context是React提供给开发者的一种常用的状态管理机制，本文主要来和大家讲讲为什么需要Context，又是如何使用Context的，感兴趣的可以了解一下
2023-05-05
React Native集成支付宝支付的实现方法
这篇文章主要介绍了React Native集成支付宝支付的实现现,ativeModules是JS代码调用原生模块的桥梁。所以，我们只需要在原生工程中集成支付宝和微信支付的sdk，然后使用NativeModules调用即可，需要的朋友可以参考下
2022-02-02
详解如何在React中优雅的使用addEventListener
这篇文章主要为大家详细介绍了如何在React中优雅的使用addEventListener，文中的示例代码简洁易懂，对大家学习React有一定的帮助，需要的可以参考一下
2023-01-01
Input标签自动校验功能去除实现
这篇文章主要为大家介绍了Input标签的自动拼写检查功能去除实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-07-07
React实现点击切换组件效果
这篇文章主要为大家详细介绍了如何基于React实现点击切换组件效果，文中的示例代码讲解详细，具有一定的借鉴价值，需要的小伙伴可以学习一下
2023-08-08
react-native只保留3x图原理解析
这篇文章主要为大家介绍了react-native只保留3x图原理解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-01-01
React实现前端选区的示例代码
本文主要介绍了React实现前端选区的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-05-05
webpack3+React 的配置全解
本篇文章主要介绍了webpack3+React 的配置全解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-08-08