zxhfighter

React 中的条件渲染

[TOC]

在 React 中，可以根据 props 和 state 的不同，返回不同的 UI 元素。

条件渲染

考虑两个组件:

zxhfighter

JSX 简介

[TOC]

JSX 是 JavaScript 一种语法扩展，可以很方便的描述某一块 UI 应该长什么样子。

所有的 JSX 最终会转译成 React.createElement，因此最终输出的是一个 Element 元素（ReactElement 或者 CustomElement 等）。

使用 {} 表达式

zxhfighter

Symbol

[TOC]

目的

类似 uuid，提供独一无二的值，可以避免值之间冲突。

Symbol 也是一种新的原始数据类型，前六种分别是：string, number, boolean, undefined, null, Object。

zxhfighter

let 和 const 命令

目的

为了减少运行时错误，防止在变量声明前就使用这个变量，从而导致意料之外的行为，提出了 let 和 const 命令。

特点

• 不存在变量提升（variable hoisting）
• 变量必须先定义后使用

zxhfighter

async/await 使用指南

[TOC]

Callback Hell

在新的异步编程规范出来之前，很容易写出多层嵌套的代码。

const main = (paramA, paramB, paramC, done) => {

zxhfighter

使用解构改善 Promise.all 可读性

使用 async 和 await 来优化流程

看一个例子：

const getBook = async bookName => {
  const book = await fetchBook(bookName);

zxhfighter

async and defer

TL;DR

defer 和 async 的区别是：

1. defer 是渲染完再执行，async 是下载完就执行；
2. 如果有多个 defer 会按照页面出现顺序执行，而 async 则不会；
3. 如果 defer 和 async 都出现，会优先采用 async 规则，如果不支持 async 指令，则会 fallback 到 defer 指令

zxhfighter

ES6 Module

ES6 Module 制定原因

JavaScript 一直没有模块体系，ES6 之前社区制定了一些模块加载方案，主要的有 CommonJS 和 AMD 两种，前者用于服务器，后者用于浏览器。

ES6 在语言标准的层面上，实现了模块功能，完全可以取代 CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案。

ES6 Module 和 CommonJS、AMD 等规范的区别

zxhfighter

Mac 查找端口占用并杀掉端口

查看端口占用

sudo lsof -i :8888

结果如下：

zxhfighter

Angular 中的动态组件

有很多应用场景，我们需要动态生成组件，动态组件一般借助 ComponentFactoryResolver 服务来实现，之前需要了解一些先验知识。

Embedded View 和 Host View

Angular 有一个概念叫做视图（View），视图由其引用对象（ViewRef）表示，其源码说明如下：

A View is a fundamental building block of the application UI. It is the smallest grouping of Elements which are created and destroyed together. >