Blog

作用域

作用域是我们可以有效访问变量或函数的区域，包含全局作用域、函数作用域、块级作用域（ES6） 三种；

JavaScript 采用词法作用域(lexical scoping)，也就是静态作用域。它的作用域是指在词法分析阶段就确定了，不会改变。而与词法作用域相对的是动态作用域，

函数的作用域是在函数调用的时候才决定的。

函数的作用域在函数定义的时候就决定了，函数的作用域基于函数创建的位置。

函数柯里化定义

函数柯里化（function currying）又称部分求值。一个currying的函数首先会接受一些参数，接受了这些参数后，

该函数并不会立即求值，而是继续返回另外一个函数，刚才传入的参数在函数形成的闭包里被保存起来。待到函数真正需要求值的时候，之前传入的参数都会被一次性用于求值。

把接受多个参数的函数变换成接受一个单一参数（最初函数的第一个参数）的函数，并且返回接受余下的参数而且返回结果的新函数。

顾名思义，柯里化其实本身是固定一个可以预期的参数，并返回一个特定的函数，处理批特定的需求。这增加了函数的适用性，但同时也降低了函数的适用范围。

1
2
3
4
5
6
7
8
9
10
11

function add(x,y){
    return x + y;
}
// 函数只传入一个参数的时候实现加法
function curry(x){
    return function(y){
        return x + y;
    }
}
var add2 = curry(1);
add2(1) // 2 即curry(1)(1)

在做前端页面渲染时，经常会遇到有的组件需要跟随数据的变化而实时的变化，例如：一个线上报名系统，总人数有一定限制，所以要实时的展现已经报名的人数，应该怎么实现呢？最基本有如下3种方案：

• Ajax轮询
• Ajax长轮询(comet)
• websocket长连接

JavaScript 一开始并没有内建模块化支持，也几乎没有模块化这种概念。当时没那么大的需求，搞个模块化显得大材小用啊。随着互联网的发展，尤其是 2006 年 ajax 技术的出现和之后 Web 2.0 的兴起，越来越多的业务逻辑向前端转移，前端开发的复杂程度和代码量逐渐提升。这时，由于缺乏模块化概念，JavaScript 的一些问题便凸显出来：代码难以复用、容易出现全局变量污染和命名冲突、依赖管理难以维护等等。一开始，开发者们使用诸如暴露全局对象、自执行函数等方法来规避这些问题，但仍无法从根本上解决问题。

前言

图片懒加载在一些图片密集型的网站中运用比较多，通过图片懒加载可以让一些不可视的图片不去加载，避免一次性加载过多的图片导致请求阻塞（浏览器一般对同一域名 下的并发请求的连接数有限制），这样就可以提高网站的加载速度，提高用户体验。

效果预览

概念：

• 一个app只有一个store，一个store管理着一个全局state含有以下方法
  • getState: 获取 state；
  • dispatch: 触发 action, 更新 state；
  • subscribe: 订阅数据变更，注册监听器；
• createStore 传入reducer，返回getState, dispatch, subscribe
• action是一个至少有type这个键的对象，可以写一个creactAction 函数去return生成action对象
• createStore.dispatch(action) 根据action这个对象去更新state
• dispatch是一个函数，内部又将执行reducer函数
• reducer也是一个函数，传入state,action, 输出一个新的state . (switch case return…)
  • 遵守数据不可变，不要去直接修改 state，而是返回出一个 新对象；
  • 默认情况下需要 返回原数据，避免数据被清空；
  • 最好设置 初始值，便于应用的初始化及数据稳定；

随着前端应用体积的扩大，资源加载的优化是我们必须要面对的问题，动态代码加载就是其中的一个方案，webpack 提供了符合 ECMAScript 提案 的 import() 语法 ，让我们来实现动态地加载模块（注：require.ensure 与 import() 均为 webpack 提供的代码动态加载方案，在 webpack 2.x 中，require.ensure 已被 import 取代）。

React.lazy 是什么

在 React 16.6 版本中，新增了 React.lazy 函数，它能让你像渲染常规组件一样处理动态引入的组件，配合 webpack 的 Code Splitting ，只有当组件被加载，对应的资源才会导入 ，从而达到懒加载的效果。

使用 React.lazy

1
2
3
4

// 不使用 React.lazy
import OtherComponent from './OtherComponent';
// 使用 React.lazy
const OtherComponent = React.lazy(() => import('./OtherComponent'))

React.lazy 接受一个函数作为参数，这个函数需要调用 import() 。它需要返回一个 Promise，该 Promise 需要 resolve 一个 defalut export 的 React 组件。

在控制台打印可以看到，React.lazy 方法返回的是一个 lazy 组件的对象，类型是 react.lazy，并且 lazy 组件具有 _status 属性，与 Promise 类似它具有 Pending、Resolved、Rejected 三个状态，分别代表组件的加载中、已加载、和加载失败三种状态。

需要注意的一点是，React.lazy 需要配合 Suspense 组件一起使用，在 Suspense 组件中渲染 React.lazy 异步加载的组件。如果单独使用 React.lazy，React 会给出错误提示。其中在 Suspense 组件中， fallback 是一个必需的占位属性，如果没有这个属性的话也是会报错的。

1
2
3
4
5
6
7
8
9
10
11

// 延迟加载回调 不需要加载效果设置为null maxDuration可以设置最大持续时间 最新版本中已移除了这个属性
const SuspenseComponent = (Component) => (props) => {
  return (
    <Suspense fallback={Math.random() >= 0.5 ? <Loading /> : <SkeletonView />}>
      <Component {...props}></Component>
    </Suspense>
  );
};
...
...
component: SuspenseComponent(OtherComponent),

React是一个状态机，由开始的初始状态，通过与用户的互动，导致状态变化，从而重新渲染UI。

React 提供了优化UI渲染的机制， 这种机制就是通过使用虚拟DOM来减少昂贵的DOM变化的数量。

MobX 提供了优化应用状态与 React 组件同步的机制，这种机制就是使用响应式虚拟依赖状态图表，它只有在真正需要的时候才更新并且永远保持是最新的。

redux缓存机制 时间回溯适用于撤销操作 操作状态

1. 安装

   1	npm install --save mobx mobx-react

2. 核心概念

• state(状态) 状态是驱动应用的数据。
• observable(value) && @observable Observable 值可以是JS基本数据类型、引用类型、普通对象、类实例、数组和映射。其修饰的state会暴露出来供观察者使用。
• observer(观察者) 被observer修饰的组件，将会根据组件内使用到的被observable修饰的state的变化而自动重新渲染。
• action(动作) 只有在 actions 中，才可以修改 Mobx 中 state 的值。 action–>state–>view
• computed 计算值(computed values)是可以根据现有的状态或其它计算值衍生出的值。(可以看成公式) getter：获得计算得到的新state并返回。 setter：不能用来直接改变计算属性的值，但是它们可以用来作”逆向”衍生。
• autorun 这通常是当你需要从反应式代码桥接到命令式代码的情况，例如打印日志、持久化或者更新UI的代码。
• 如果你有一个函数应该自动运行，但不会产生一个新的值，请使用autorun。 其余情况都应该使用 computed。
• reactions Reactions 和计算值很像，但它不是产生一个新的值，而是会产生一些副作用，比如打印到控制台、网络请求、递增地更新 React 组件树以修补DOM、等等。 简而言之，reactions 在 响应式编程和命令式编程之间建立沟通的桥梁。

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

// component
import {inject, observer} from "mobx-react";

// 观察者 注入store添加到属性上
@inject("store") @observer

this.props.store.xxStore.num
this.props.store.xxStore.plus() // num+=1
this.props.store.xxStore.total

// homeStore

@observable num;
construtor(){
    this.name=''
    this.items=[]
}

@computed get total() {
    return this.items.length;
 }
  
@action plus=()=>{
    this.num+=1
}

autorun((e)=>{})

const homeStore =new HomeStore()
export {homeStore}

1
2
3
4
5
6
7
8
9

switch
router render={(props)=><Item {...props}/>}
router component={Index}
react-route-dom
withRouter
Linking
// Provider 传递stores
Privider store={stores}
create-react-app react-scripts

基本就这两种方法:immutable/observable mobx: oop redux: 函数式

ssr:流模式、字符串

demo地址

在团队开发中，commit message（提交说明）就如同代码注释一样重要。良好的commit message能让团队中的其他成员对你的每次提交的目的、

涉及的代码范围及作用一目了然，方便日常的查询和帮助其他成员更好的帮你Code Review，必要时还能方便的生成Change log。

React 16.3带来了正式版的context API。让我们来看看有哪些改变，在那些地方可以取代redux吧！