React教程
React教程:React安装
React 可以直接下载使用,下载包中也提供了很多学习的实例。 本教程使用了 React 的版本为 16.4.0,你可以在官网 https://reactjs.org/&…
React教程:简单例子Hello World
最简易的 React 示例如下: 它将在页面上展示一个 “Hello, world!” 的标题。 点击链接打开在线编辑器。随意更改内容,查看它们会怎样影响展示。本指南中的大多数页面…
React教程:JSX 简介
考虑如下变量声明: 这个有趣的标签语法既不是字符串也不是 HTML。 它被称为 JSX,是一个 JavaScript 的语法扩展。我们建议在 React 中配合使用 JSX,JSX…
React教程:元素渲染
元素是构成 React 应用的最小砖块。 元素描述了你在屏幕上想看到的内容。 与浏览器的 DOM 元素不同,React 元素是创建开销极小的普通对象。React DOM 会负责更新…
React教程:组件 & Props
组件允许你将 UI 拆分为独立可复用的代码片段,并对每个片段进行独立构思。本指南旨在介绍组件的相关理念。你可以参考详细组件 API。 组件,从概念上类似于 JavaScript 函…
React教程:State & 生命周期
本页面介绍了 React 组件中 state 和生命周期的概念。你可以查阅详细的组件 API 参考文档。 请参考前一章节中时钟的例子。在元素渲染章节中,我们只了解了一种更新 UI …
React教程:事件处理
React 元素的事件处理和 DOM 元素的很相似,但是有一点语法上的不同: React 事件的命名采用小驼峰式(camelCase),而不是纯小写。 使用 JSX 语法时你需要传…
React教程:条件渲染
在 React 中,你可以创建不同的组件来封装各种你需要的行为。然后,依据应用的不同状态,你可以只渲染对应状态下的部分内容。 React 中的条件渲染和 JavaScript 中的…
React教程:列表 & Key
首先,让我们看下在 Javascript 中如何转化列表。 如下代码,我们使用 map() 函数让数组中的每一项变双倍,然后我们得到了一个新的列表 d…
React教程:表单
在 React 里,HTML 表单元素的工作方式和其他的 DOM 元素有些不同,这是因为表单元素通常会保持一些内部的 state。例如这个纯 HTML 表单只接受一个名称: 此表单…
React教程:提升
通常,多个组件需要反映相同的变化数据,这时我们建议将共享状态提升到最近的共同父组件中去。让我们看看它是如何运作的。 在本节中,我们将创建一个用于计算水在给定温度下是否会沸腾的温度计…
React教程:组合 vs 继承
React 有十分强大的组合模式。我们推荐使用组合而非继承来实现组件间的代码重用。 在这篇文档中,我们将考虑初学 React 的开发人员使用继承时经常会遇到的一些问题,并展示如何通…
React教程:React思维
我们认为,React 是用 JavaScript 构建快速响应的大型 Web 应用程序的首选方式。它在 Facebook 和 Instagram 上表现优秀。 React 最棒的部…
React教程【高级】:代码分割
打包 大多数 React 应用都会使用 Webpack,Rollup 或 Browserify 这类的构建工具来打包文件。 打包是一个将文件引入并合并到一个单独文件的过程,最终形成…
React教程【高级】:Context
Context 提供了一个无需为每层组件手动添加 props,就能在组件树间进行数据传递的方法。 在一个典型的 React 应用中,数据是通过 props 属性自上而下(由父及子)…
React教程【高级】:Error Boundaries
过去,组件内的 JavaScript 错误会导致 React 的内部状态被破坏,并且在下一次渲染时 产生 可能无法追踪的 错误。这些错误基本上是由较早的其他代码(非 React 组…
React教程【高级】:Refs 转发
Ref 转发是一项将 ref 自动地通过组件传递到其一子组件的技巧。对于大多数应用中的组件来说,这通常不是必需的。但其对某些组件,尤其是可重用的组件库是很有用的。最常见的案例如下所…
React教程【高级】:Fragments
React 中的一个常见模式是一个组件返回多个元素。Fragments 允许你将子列表分组,而无需向 DOM 添加额外节点。 还有一种新的短语法可用于声明它们。 动机 一种常见模式…
React教程【高级】:高阶组件
高阶组件(HOC)是 React 中用于复用组件逻辑的一种高级技巧。HOC 自身不是 React API 的一部分,它是一种基于 React 的组合特性而形成的设计模式。 具体而言…
React教程【高级】:与第三方库整合
React 可以被用于任何 web 应用中。它可以被嵌入到其他应用,且需要注意,其他的应用也可以被嵌入到 React。本指南将介绍一些更常见的用例,专注于与 jQuery…