Cherish's Blog

问题 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 »