Fork me on GitHub

react基础知识

React 的响应式原理

React 会创建一个虚拟 DOM(virtual DOM)。当一个组件中的状态改变时，React 首先会通过 “diff” 算法来标记虚拟 DOM 中的改变，第二步是调节(reconciliation)，会用 diff 的结果来更新真实 DOM。虚拟
DOM 作为一种缓存机制优化了 UI 渲染减少昂贵的 DOM 变化的数量。

  1. 开发者只需关注状态转移（数据），当状态发生变化，React 框架会自动根据新的状态重新构建 UI。
  2. React 框架在接收到用户状态改变通知后，会根据当前渲染树，结合最新的状态改变，通过 Diff 算法，计算出树中变化的部分，然后只更新变化的部分（DOM 操作），从而避免整棵树重构，提高性能。状态变化后
    React 框架并不会立即去计算并渲染 DOM 树的变化部分，相反，React 会在 DOM 的基础上建立一个抽象层，即虚拟 DOM 树，对数据和状态所做的任何改动，都会被自动且高效的同步到虚拟 DOM，最后再批量同步到真实 DOM
    中，而不是每次改变都去操作一下 DOM。

为什么不能每次改变都直接去操作 DOM 树？
这是因为在浏览器中每一次 DOM 操作都有可能引起浏览器的重绘或回流：

  • 如果 DOM 只是外观风格发生变化，如颜色变化，会导致浏览器重绘界面。
  • 如果 DOM 树的结构发生变化，如尺寸、布局、节点隐藏等导致，浏览器就需要回流（及重新排版布局）。
    而浏览器的重绘和回流都是比较昂贵的操作，如果每一次改变都直接对 DOM 进行操作，这会带来性能问题，而批量操作只会触发一次 DOM 更新。 more >>

展开全文 >>

手写promise

Promise 规范

promise 最早是在 commonjs 社区提出来的，当时提出了很多规范。比较接受的是 promise/A 规范。但是 promise/A 规范比较简单，后来人们在这个基础上，提出了 promise/A+规范，也就是实际上的业内推行的规范；es6 也是采用的这种规范，但是 es6 在此规范上还加入了 Promise.all、Promise.race、Promise.catch、Promise.resolve、Promise.reject 等方法。

我们可以通过脚本来测试我们写的 Promise 是否符合 promise/A+的规范。将我们实现的 Promise 加入以下代码：

Promise.defer = Promise.deferred = function () {
  let dfd = {};
  dfd.promise = new Promise((resolve, reject) => {
    dfd.resolve = resolve;
    dfd.reject = reject;
  });
  return dfd;
};

然后通过 module.exports 导出，安装测试的脚本：

npm install -g promises-aplus-tests

在实现 Promise 的目录执行以下命令：

promises-aplus-tests promise.js

接下来，脚本会对照着 promise/A+的规范，对我们的脚本来一条一条地进行测试。

more >>

展开全文 >>

js防抖和节流

防抖(debounce)

在第一次触发事件时，不立即执行函数，而是给出一个期限值比如200ms ，然后：
如果在 200ms 内没有再次触发滚动事件，那么就执行函数
如果在 200ms 内再次触发滚动事件，那么当前的计时取消，重新开始计时

function debounce(func, wait) {
  var timer = null;
  return function () {
    var self = this;
    var args = arguments;
    if (timer) clearTimeout(timer);
    timer = setTimeout(function () {
      typeof func === 'function' && func.apply(self, args);
    }, wait);
  };
}
more >>

展开全文 >>

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia-plus根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

前端攻城狮
记录分享自己工作、学习中学到的知识