Cherish's Blog

我在学习 react，一直在使用 create-react-app 创建项目。create-react-app 其实包括两个核心： * create-react-app：主要提供了 command-line 工具，方便用户创建 react 项目 * react-scripts：这才是核心。它封装了所有开发 react 项目的配置，使得用户可以零配置直接开始开发 react。用户基本不需要更新 create-react-app，因为它总是拉最新的 react-scripts，而 react-scripts 才是简化用户配置的核心。 问题来了，我在写测试的时候发现，react-scripts 默认配置使用的是 jest，而且版本较低（可运行 npm ls jest 查看依赖树，结果如下图所示）。而我需要使用的 data-driven-test 依赖包 jest-each 是 jest 23.0.0 以后的版本才有的。 所以我需要在测试的时候不使用默认安装的 jest， 读了一个 post: 自己写样板，不使用 create-react-app，受它的启发要自己配置 react 项目，那么就有必要了解 js ecosystem 中的一些工程。 webpack 一个开源的前端打包工具，支持用户进行模块化开发（即用户开发很多 module，然后不同的 mudule 之间可通

export 用于从 module 中导出函数、对象、原始值，在其他地方通过 import 使用这些函数、对象、原始值。 有两种导出方式：命名导出（export），默认导出（export default） 1. 命名导出 就是导出 module 中有命名的函数、对象、原始值。相应的，import 时，必须使用相同的命名引入（当然可以使用 import a as b from './module' 来修改名称） 举例： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 // 定义时导出 export const a = 'a', b = 'b'; // 适用于 var, let export function a(){}; export class a{}; // 定义后导出 const a = 'a', b = 'b'; export {a, b as newB}; // 导出其他模块的导出。 // 此时仅会导出 otherModule 的命名导出，所以这里最终导出的还是有命名的 export * from 'otherModule'; export {a, b as newB} from 'otherModule'; // 如果需要导出 otherModule 的默认导出，只能这样写： import defaultExport

使用 hexo + github 部署博客 介绍了怎么部署自己的博客，然后就开始无休止的调整主题。 我选定的主题是 next：有目录，也有集成搜索的文档，这是一个 example，参照 第三方集成 集成搜索等功能. next 优化配置可参考 这篇文章 配置文件 我是采用两个配置文件的写法，即在 source/_data/next.yml 中写 next 相关的配置。 code highlight 配置 按照主题设定教程，我设置的是 scheme: Mist。默认的代码 highlight 是用 tomorrow theme，按照 代码高亮设置教程，可以有五种选项。但是很多 code grammar 高亮显示无效，比如 jsx。所以想换一个 highlight 主题。 找了个 code highlight theme 配置教程 ，开始动手。

问题 setState 是更新 state 的 API，进而会引发组件的重新渲染。然而在使用过程中发现有些坑(参见 react 正确使用状态)： 1. setState(obj)一般情况下不会立即更新 state 的值； 2. 同一 cycle 的多次 setState 调用可能会合并（性能考虑） 对于第一点，引用下边的例子： 1 2 3 4 5 function incrementMultiple() { this.setState({count: this.state.count + 1}); this.setState({count: this.state.count + 1}); this.setState({count: this.state.count + 1}); } 代码运行时，虽然是对 state 加了三次，但是每次加操作都是针对初始的 state，所以最终相当于仅加了一次。即上述代码等同于下边的代码： 1 2 3 4 5 6 Object.assign( previousState, {quantity: state.quantity + 1}, {quantity: state.quantity + 1}, ... ) 为什么 从 react 生命周期看 setState 生效时间 要理解其原因，我们要先

... 扩展运算符 ...obj 是 js 的扩展运算符，可以将一个可迭代的对象在函数调用的位置展开成为多个参数,或者在数组字面量中展开成多个数组元素。(其他可参见运算符介绍，运算符和表达式清单 reference) eg. 1 2 3 4 5 6 7 8 9 10 // 在数组字面量中展开 // 利用扩展运算符，实现了数组合并 var parts = ['shoulder', 'knees']; var lyrics = ['head', ...parts, 'and', 'toes']; // 在函数调用处展开 function f(x, y, z) { } var args = [0, 1, 2]; f(...args); `` template literals template literals sql template strings

具体可参见 mdn javascript 解构语法. 这里简单总结一下。 解构是做什么的 解构就是一种方便变量赋值的语法，由编译器完成真正的变量赋值 数组解构 * 将数组元素赋值给变量 * 赋值依据是元素顺序 * 指定变量名时，可以提供默认值，以避免 undefined 赋值 * 支持忽略一些元素（添加 , ，但不提供变量名） * 支持rest 数组赋值 eg. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 // 基本赋值 var a, b, rest; [a, b] = [10, 20]; console.log(a); // 10 console.log(b); // 20 // 默认值 var a, b; [a=5, b=7] = [1]; console.log(a); // 1 console.log(b); // 7 // 忽略某些元素 function f() { return [1, 2, 3]; } var [a, , b] = f(); console.log(a); // 1 console.log(b); // 3 // rest 赋值 [a, b, ...rest] = [10, 20, 30, 40

what’s redux redux 中文文档 中的几个关键特性： 1. 状态容器，提供可预测化的状态管理 2. 跨平台，客户端、服务端、原生应用都能用 3. 易于测试 4. 轻量，支持 react 等界面库 其中第一点，讲明了 redux 的主要用途：状态容器 以 react 为例，页面是渲染状态树得到，有静态状态（props）、动态状态（state）。通过在代码中 setState 来修改状态树，状态自上而下传递到各个子组件，最终触发组件树的重新渲染。 使用 redux，我们就将状态的定义和允许的迁移 function 挪出去，放到一个状态容器里，来有效管理组件的所有状态和状态迁移。此时 component 代码中就没有 state、setState 等定义了。 counter without redux 以计数器为例，不使用 redux，即直接在本地定义 state，并通过 setState 修改状态，以实现重现渲染。(源代码) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 import React, {Component} from 'react'; export default class Counter extends Componen

安装部署 hexo 参考这个知乎文章安装 1. 准备 node、git 2. 安装 hexo-cli 1 $ npm i -g hexo-cli 3. 创建一个网站 1 $ hexo init xxx.github.io 4. 部署服务器 这里选择部署到 git 上。 1. 首先安装 git deployer 2. 然后修改配置文件，选择部署方式为 git 并配置 repo。 3. hexo 部署 4. 访问 xxx.github.io 即可 1 2 3 4 5 6 7 8 9 10 $ npm install hexo-deployer-git --save $ vi _config.yml deploy: type: git repo: branch: [branch] message: [message] $ npm d 注意： 1. 可以选择同时部署到多个服务器。多写几个 ‘deploy’ 配置即可 2. git 用户名、网站用户名（xxx.github.io 中的 xxx）必须相同。因为它相当于使用 github 服务器 设置 theme 在 官方 themes 里挑。我比较喜欢以下几款： 1. 带目录结构的： 2. cactus：英文的，有几种颜色可以选，带目录，可以

Read more »