https://www.zhuzhugst.com/ 2026-05-04T21:17:10+00:00 https://www.zhuzhugst.com/ https://www.zhuzhugst.com/lib/exe/fetch.php?media=logo.png text/html 2026-03-13T07:51:56+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.zhuzhugst.com/doku.php?id=react:%E8%A1%A8%E5%8D%95%E5%A4%84%E7%90%86&rev=1773388316&do=diff 第十章：表单处理 10.1 受控组件 在 HTML 中，表单元素如 input、textarea、select 通常自己维护 state。在 React 中，可变状态通常保存在组件的 state 中，只能用 setState 更新。 输入框： function NameForm() { const [value, setValue] = useState(''); const handleChange = (e) => { setValue(e.target.value); }; const handleSubmit = (e) => { e.preventDefault(); alert('提交的名字: ' + value); }; return ( <form onSubmit={handleSubmit}> <label> 名字: <input type="text" value={value} onCha… text/html 2026-03-15T06:03:47+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.zhuzhugst.com/doku.php?id=react:%E7%8E%AF%E5%A2%83%E6%90%AD%E5%BB%BA&rev=1773554627&do=diff 第三章：开发环境搭建 3.1 Node.js 安装 React 开发需要 Node.js 环境。Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时。 下载安装： 访问 Node.js 官网（nodejs.org），下载 LTS（长期支持）版本。LTS 版本更加稳定，适合生产环境。 text/html 2026-03-13T07:49:45+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.zhuzhugst.com/doku.php?id=react:%E5%9F%BA%E7%A1%80%E6%A6%82%E5%BF%B5&rev=1773388185&do=diff 第二章：React 基础概念 2.1 组件化思想 组件化是现代前端开发的核心理念。React 将用户界面抽象为一个个独立的组件，每个组件负责一块独立的 UI 功能。 什么是组件： 组件是 UI 的独立、可复用的代码片段。从概念上看，组件就像 JavaScript 函数，接收任意的输入（称为 props），返回描述页面应该显示什么的 React 元素。 text/html 2026-03-13T07:51:38+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.zhuzhugst.com/doku.php?id=react:%E5%88%97%E8%A1%A8%E6%B8%B2%E6%9F%93&rev=1773388298&do=diff 第九章：列表渲染 9.1 基础列表渲染 使用 JavaScript 的 map 方法将数组转换为元素列表。 function NumberList({ numbers }) { const listItems = numbers.map((number) => <li>{number}</li> ); return <ul>{listItems}</ul>; } // 更简洁的写法 function NumberList({ numbers }) { return ( <ul> {numbers.map(number => <li>{number}</li>)} </ul> ); } // 使用 const numbers = [1, 2, 3, 4, 5]; <NumberList numbers={numbers} /> text/html 2026-03-13T07:49:26+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.zhuzhugst.com/doku.php?id=react:%E5%89%8D%E8%A8%80&rev=1773388166&do=diff 第一章：前言与课程介绍 1.1 什么是 React React 是由 Facebook（现 Meta）开发的开源 JavaScript 库，用于构建用户界面。它由 Jordan Walke 创建，于 2013 年 5 月开源发布。React 采用组件化开发思想，让你可以将 UI 拆分为独立、可复用的代码片段。 text/html 2026-03-13T07:51:06+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.zhuzhugst.com/doku.php?id=react:%E4%BA%8B%E4%BB%B6%E5%A4%84%E7%90%86&rev=1773388266&do=diff 第七章：事件处理 7.1 React 事件系统 React 实现了一个合成事件系统（SyntheticEvent），它是浏览器原生事件的跨浏览器包装器。 与原生事件的区别： * 命名使用 camelCase：onClick 而非 onclick * text/html 2026-03-13T07:51:24+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.zhuzhugst.com/doku.php?id=react:%E6%9D%A1%E4%BB%B6%E6%B8%B2%E6%9F%93&rev=1773388284&do=diff 第八章：条件渲染 8.1 条件渲染基础 React 中，你可以使用 JavaScript 的条件语句来决定渲染什么内容。 if 语句： function Greeting({ isLoggedIn }) { if (isLoggedIn) { return <UserGreeting />; } return <GuestGreeting />; } text/html 2026-04-07T03:03:48+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.zhuzhugst.com/doku.php?id=react:%E7%BB%84%E4%BB%B6%E5%9F%BA%E7%A1%80&rev=1775531028&do=diff 第五章：React 组件基础 5.1 函数组件 函数组件是定义 React 组件最简单的方式。它是一个接收 props 对象并返回 React 元素的 JavaScript 函数。 function Welcome(props) { return <h1>Hello, {props.name}</h1>; } text/html 2026-03-13T07:50:19+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.zhuzhugst.com/doku.php?id=react:jsx&rev=1773388219&do=diff 第四章：JSX 详解 4.1 什么是 JSX JSX（JavaScript XML）是 React 中用于描述 UI 的语法扩展。它看起来像是 HTML，但实际上是 JavaScript。 const element = <h1>Hello, world!</h1>; 这段 JSX 代码会被 Babel 等工具转换为： text/html 2026-03-24T01:56:36+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.zhuzhugst.com/doku.php?id=react:props-state&rev=1774317396&do=diff 第六章：Props 和 State 6.1 理解 State State（状态）是组件内部管理的可变数据。与 props 不同，state 是私有的，完全受控于组件本身。 State 的特点： * 可变性：可以通过 setState 方法更新 * 局部性：state 只在当前组件中有效