React
十亿萝莉的夢
君子恃才而不露于色 藏情而不显于表
展开
-
No.5 State & 生命周期
State & 生命周期 本页面介绍了 React 组件中 state 和生命周期的概念。你可以查阅详细的组件 API 参考文档。 请参考前一章节中时钟的例子。在元素渲染章节中,我们只了解了一种更新 UI 界面的方法。通过调用ReactDOM.render()来修改我们想要渲染的元素: function tick() { const element = ( <...原创 2019-04-10 18:42:16 · 161 阅读 · 0 评论 -
No.011 组合 vs 继承
组合 vs 继承 React 有十分强大的组合模式。我们推荐使用组合而非继承来实现组件间的代码重用。 在这篇文档中,我们将考虑初学 React 的开发人员使用继承时经常会遇到的一些问题,并展示如何通过组合思想来解决这些问题。 包含关系 有些组件无法提前知晓它们子组件的具体内容。在Sidebar(侧边栏)和Dialog(对话框)等展现通用容器(box)的组件中特别容易遇到这种情况。 我...原创 2019-04-23 18:00:11 · 220 阅读 · 0 评论 -
No.010 状态提升
状态提升 通常,多个组件需要反映相同的变化数据,这时我们建议将共享状态提升到最近的共同父组件中去。让我们看看它是如何运作的。 在本节中,我们将创建一个用于计算水在给定温度下是否会沸腾的温度计算器。 我们将从一个名为BoilingVerdict的组件开始,它接受celsius温度作为一个 prop,并据此打印出该温度是否足以将水煮沸的结果。 function BoilingVerd...原创 2019-04-23 17:59:30 · 204 阅读 · 0 评论 -
No.009 表单
表单 在 React 里,HTML 表单元素的工作方式和其他的 DOM 元素有些不同,这是因为表单元素通常会保持一些内部的 state。例如这个纯 HTML 表单只接受一个名称: <form> <label> 名字: <input type="text" name="name" /> </label> <inp...原创 2019-04-23 17:58:34 · 185 阅读 · 0 评论 -
No.4 组件 & Props
组件 & Props 组件可以将UI切分成一些独立的、可复用的部件,这样你就只需专注于构建每一个单独的部件。 组件从概念上看就像是函数,它可以接收任意的输入值(称之为“props”),并返回一个需要在页面上展示的React元素。 函数定义/类定义组件 定义一个组件最简单的方式是使用JavaScript函数: function Welcome(props) { retu...原创 2019-04-10 08:01:31 · 185 阅读 · 0 评论 -
No.3 元素渲染
元素渲染 元素是构成 React 应用的最小单位。 元素用来描述你在屏幕上看到的内容: const element = <h1>Hello, world</h1>; 与浏览器的 DOM 元素不同,React 当中的元素事实上是普通的对象,React DOM 可以确保 浏览器 DOM 的数据内容与 React 元素保持一致。 注意: 初学者很可能把元素的定义...原创 2019-04-10 08:01:11 · 221 阅读 · 0 评论 -
No.2 JSX 简介
JSX 简介 我们来观察一下声明的这个变量: const element = <h1>Hello, world!</h1>; 这种看起来可能有些奇怪的标签语法既不是字符串也不是 HTML。 它被称为 JSX, 一种 JavaScript 的语法扩展。 我们推荐在 React 中使用 JSX 来描述用户界面。JSX 乍看起来可能比较像是模版语言,但事实上它完全是在...原创 2019-04-10 08:00:12 · 235 阅读 · 0 评论 -
No.1 Hello World
Hello World 尝试React最简单的方法是使用CodePen上的Hello World例子。如果你不想安装任何东西,可以在浏览器中打开它,然后跟着尝试我们接下来的例子。如果你更愿意使用本地开发环境,可以查看安装页面 。 一个最简单的React例子如下: ReactDOM.render( <h1>Hello, world!</h1>, documen...原创 2019-04-10 07:59:44 · 227 阅读 · 0 评论 -
No.8 列表 & Keys
列表 & Keys 首先,让我们看下在 Javascript 中如何转化列表。 如下代码,我们使用map()函数让数组中的每一项变双倍,然后我们得到了一个新的列表doubled并打印出来: const numbers = [1, 2, 3, 4, 5]; const doubled = numbers.map((number) => number * 2); conso...原创 2019-04-10 18:46:54 · 261 阅读 · 0 评论 -
No.7 条件渲染
条件渲染 在 React 中,你可以创建不同的组件来封装各种你需要的行为。然后,依据应用的不同状态,你可以只渲染对应状态下的部分内容。 React 中的条件渲染和 JavaScript 中的一样,使用 JavaScript 运算符if或者条件运算符去创建元素来表现当前的状态,然后让 React 根据它们来更新 UI。 观察这两个组件: function UserGreeting(pr...原创 2019-04-10 18:45:10 · 181 阅读 · 0 评论 -
No.6 事件处理
事件处理 React 元素的事件处理和 DOM 元素的很相似,但是有一点语法上的不同: React 事件的命名采用小驼峰式(camelCase),而不是纯小写。 使用 JSX 语法时你需要传入一个函数作为事件处理函数,而不是一个字符串。 例如,传统的 HTML: <button onclick="activateLasers()"> Activate Lasers <...原创 2019-04-10 18:43:49 · 244 阅读 · 0 评论 -
No.012 React 哲学
React 哲学 我们认为,React 是用 JavaScript 构建快速响应的大型 Web 应用程序的首选方式。它在 Facebook 和 Instagram 上表现优秀。 React 最棒的部分之一是引导我们思考如何构建一个应用。在这篇文档中,我们将会通过 React 构建一个可搜索的产品数据表格来更深刻地领会 React 哲学。 从设计稿开始 假设我们已经有了一个返回 JSON 的...原创 2019-04-23 18:00:59 · 283 阅读 · 0 评论