React教程

React旧版官方中文文档（legacy归档站）是React 16/17时代完整中文教程，完整讲解类组件、旧生命周期、传统React开发模式，适合维护老React项目、学习类组件技术栈开发者，文档已停止更新，新版React推荐访问zh-hans.react.dev。

一、文档基础信息

• 站点定位：React官方归档旧版中文手册，适配React16、React17版本，以Class类组件为核心教学体系
• 更新状态：2023年后停止维护，不再同步React18+新特性（Hooks优先新版语法）
• 内容语言：完整官方中文翻译，术语统一规范，无机器翻译错误
• 适用场景：老项目维护、复习类组件生命周期、兼容旧业务代码学习

二、全站完整学习模块

1. 快速入门板块

提供三种上手方式：在线CodeSandbox/Stackblitz沙盒、本地HTML引入CDN、工程化脚手架搭建；区分渐进式集成、全新项目两种开发场景，零基础快速跑通React Demo。

2. 两条学习路线

• 实操教程路线：井字棋实战项目，手把手拆解组件、state状态、props传参、列表key、事件处理基础逻辑；
• 概念分步路线：从HelloWorld起步，逐节讲解JSX语法、元素渲染、组件基础、状态生命周期。

3. 核心基础知识点

• JS语法前置：ES6/ES7基础预习指南，配套MDN、javascript.info参考资料；
• JSX语法规则、表达式嵌入、JSX与HTML差异；
• Class类组件、构造函数、props、state状态管理；
• 完整旧生命周期：componentWillMount、componentWillReceiveProps等废弃钩子详解；
• 列表渲染、key作用、表单受控/非受控组件、事件绑定。

4. 进阶高级特性

组件组合、插槽、Context跨层通信、Ref获取DOM、高阶组件HOC、Portal传送门、错误边界、性能优化shouldComponentUpdate。

5. 配套API与工具参考

完整React.Component生命周期API、顶层API、DOM操作方法；术语词典、高频FAQ（AJAX请求、文件结构、组件复用）。

6. 版本与社区资源

各历史版本归档页面、官方更新日志、React博客；第三方免费课程、视频、书籍资源汇总，社区提问渠道。

三、文档核心优势

• 官方权威原版翻译，内容严谨无第三方错误解读；
• 完整覆盖React16及之前类组件全体系，老项目排查、重构必备参考；
• 实战导向，井字棋案例贯穿基础全部核心概念，新手易理解；
• 章节分层清晰，分实操/理论两条学习路径，适配不同学习习惯；
• 免费在线阅读，无广告，全章节开放浏览。

四、适配学习人群

• 维护React16/17老项目前端开发，复习类组件、旧生命周期；
• 企业存量系统重构工程师，需要兼容旧代码逻辑；
• 面试备考，区分新旧React生命周期、HOC高阶组件考点；
• 先学类组件、再过渡Hooks的前端初学者；
• 教学从业者，讲解传统React类组件技术栈。

五、学习注意事项

1. 1. 该文档不再更新，React18+全新Hooks语法请前往zh-hans.react.dev新版官网；
   2. 文档大量componentWill系列生命周期已被官方废弃，新项目不推荐使用；
   3. 新项目优先学习新版Hooks体系，本文档仅作旧代码兼容查阅；
   4. 入门推荐先看完井字棋实操教程，再系统阅读核心概念章节。