目前为止,我们已经学了如何用单个组件来展示数据和处理用户输入。下一步让我们来体验 React 最激动人心的特性之一:可组合性(composability)。动机:关注分离通过复用那些接口定义良好的组件来开发新的模块化组件,我们得到了与使用函数和类相似的好处。具体来说就是能够通过开发简单的组件把程序的不同关注面分离。
JSX 与 HTML 非常相似,但是有些关键区别要注意。注意:关于 DOM 的区别,如行内样式属性 style,参考 DOM 区别HTML 实体HTML 实体可以插入到 JSX 的文本中。 <div>First · Second</div>如果想在 JSX 表达式中显示 HTML 实体,可以会遇到二次转义的问题,因为 React 默认会转义所有字符串,为了防止各种 XSS 攻击。
JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。React 可以用来做简单的 JSX 句法转换。为什么要用 JSX?你不需要为了 React 使用 JSX,可以直接使用原生 JS。但是,我们建议使用 JSX 是因为它能精确,也是常用的定义包含属性的树状结构的语法。它对于非专职开发者比如设计师也比较熟悉。XML 有固定的标签开启和闭合的优点。
用户界面能做的最基础的事就是显示一些数据。React 让显示数据变得简单,当数据变化的时候,用户界面会自动同步更新。开始让我们看一个非常简单的例子。新建一个名为 hello-react.html 的文件,代码内容如下:<!DOCTYPE html><html> <head> <title>Hello React</title> <script src="http://fb.me/react-{{site.
React 是一个 Facebook 和 Instagram 用来创建用户界面的 JavaScript 库。很人多认为 React 是 MVC 中的 V(视图)。我们创造 React 是为了解决一个问题:构建随着时间数据不断变化的大规模应用程序。为了达到这个目标,React 采用下面两个主要的思想。
这是一篇源自官方博客 的文章。在我看来, React 是较早使用 JavaScript 构建大型、快速的 Web 应用程序的技术方案。它已经被我们广泛应用于 Facebook 和 Instagram 。React 众多优秀特征中的其中一部分就是,教会你去重新思考如何构建应用程序。本文中,我将跟你一起使用 React 构建一个具备搜索功能的产品列表。
React 规范、模块化 Web 技术方案
本书的目的是以目前还在制定中的 ECMAScript 6 Promises 规范为中心,着重向各位读者介绍 JavaScript 中对 Promise 相关技术的支持情况。通过阅读本书,我们希望各位读者能在下面三个目标上有所收获。
下面列出了一些在使用TypeScript语言和编译器过程中常见的容易让人感到困惑的错误信息。令人困惑的常见错误"tsc.exe" exited with error code 1修复:检查文件编码,确保为UTF-8 - https://typescript.codeplex.com/workitem/1587external module XYZ cannot be resolved修复:检查模块路径是否大小写敏感 - https://typescript.codeplex.
介绍在JavaScript里(还有TypeScript),this关键字的行为与其它语言相比大为不同。这可能会很令人吃惊,特别是对于那些使用其它语言的用户,他们凭借其直觉来想象this关键字的行为。这篇文章会教你怎么识别及调试TypeScript里的this问题,并且提供了一些解决方案和各自的利弊。典型症状和危险系数丢失this上下文的典型症状包括:类的某字段(this.
选项类型默认值描述--allowJsbooleantrue允许编译javascript文件。--allowSyntheticDefaultImportsboolean(module === "system")允许从没有设置默认导出的模块中默认导入。这并不影响代码的显示,仅为了类型检查。--allowUnreachableCodebooleanfalse不报告执行不到的代码错误。--allowUnusedLabelsbooleanfalse不报告未使用的标签错误。
概述如果一个目录下存在一个tsconfig.json文件,那么它意味着这个目录是TypeScript项目的根目录。tsconfig.json文件中指定了用来编译这个项目的根文件和编译选项。一个项目可以通过以下方式之一来编译:使用tsconfig.json不带任何输入文件的情况下调用tsc,编译器会从当前目录开始去查找tsconfig.json文件,逐级向上搜索父目录。
除了传统的面向对象继承方式,还流行一种通过可重用组件创建类的方式,就是联合另一个简单类的代码。你可能在Scala等语言里对mixins及其特性已经很熟悉了,但它在JavaScript中也是很流行的。混入示例下面的代码演示了如何在TypeScript里使用混入。后面我们还会解释这段代码是怎么工作的。// Disposable Mixinclass Disposable { isDisposed: boolean;
随着TypeScript和ES6里引入了类,现在在一些场景下我们会需要额外的特性,用来支持标注或修改类及其成员。Decorators提供了一种在类的声明和成员上使用元编程语法添加标注的方式。Javascript里的Decorators目前处在建议征集的第一阶段,在TypeScript里做为实验性特性已经提供了支持。注意 Decorators是实验性的特性,在未来的版本中可能会发生改变。
JSX是一种嵌入式的类似XML的语法。它可以被转换成合法的JavaScript,尽管转换的语义是依据不同的实现而定的。JSX因React框架而流行,但是也被其它应用所使用。TypeScript支持内嵌,类型检查和将JSX直接编译为JavaScript。基本用法想要使用JSX必须做两件事:给文件一个.tsx扩展名启用jsx选项TypeScript具有两种JSX模式:preserve和react。
当使用外部JavaScript库或新的宿主API时,你需要一个声明文件(.d.ts)定义程序库的shape。这个手册包含了写.d.ts文件的高级概念,并带有一些例子,告诉你怎么去写一个声明文件。指导与说明流程最好从程序库的文档而不是代码开始写.d.ts文件。这样保证不会被具体实现所干扰,而且相比于JS代码更易读。下面的例子会假设你正在参照文档写声明文件。
TypeScript中有些独特的概念可以在类型层面上描述JavaScript对象的模型。这其中尤其独特的一个例子是“声明合并”的概念。理解了这个概念,将有助于操作现有的JavaScript代码。同时,也会有助于理解更多高级抽象的概念。对本文件来讲,“声明合并”是指编译器将针对同一个名字的两个独立声明合并为单一声明。合并后的声明同时拥有原先两个声明的特性。
这篇文章将概括介绍在TypeScript里使用模块与命名空间来组织代码的方法。我们也会谈及命名空间和模块的高级使用场景,和在使用它们的过程中常见的陷井。查看模块章节了解关于模块的更多信息。查看命名空间章节了解关于命名空间的更多信息。使用命名空间命名空间是位于全局命名空间下的一个普通的带有名字的JavaScript对象。这令命名空间十分容易使用。
这篇文章描述了如何在TypeScript里使用命名空间(之前叫做“内部模块”)来组织你的代码。就像我们在术语说明里提到的那样,“内部模块”现在叫做“命名空间”。另外,任何使用module关键字来声明一个内部模块的地方都应该使用namespace关键字来替换。这就避免了让新的使用者被相似的名称所迷惑。第一步我们先来写一段程序并将在整篇文章中都使用这个例子。
从ECMAScript 2015开始,JavaScript引入了模块的概念。TypeScript也沿用这个概念。模块在其自身的作用域里执行,而不是在全局作用域里;这意味着定义在一个模块里的变量,函数,类等等在模块外部是不可见的,除非你明确地使用export形式之一导出它们。相反,如果想使用其它模块导出的变量,函数,类,接口等的时候,你必须要导入它们,可以使用import形式之一。
关注时代Java