doc

• react setState的设计原理：https://github.com/facebook/react/issues/11527#issuecomment-360199710 性能需求，react本身的想要实现的行为模式的要求（需要进一步的研究）
• setState源码解析
  • https://www.cnblogs.com/jasonlzy/p/8046118.html
  • https://www.cnblogs.com/jasonlzy/p/8046256.html
  • https://www.cnblogs.com/jasonlzy/p/8046273.html

key points

• setState的原理
• 为什么setState是异步的（怎么实现的）
• 异步渲染的出发点和实现

过程：

• 问题出现：引入npm install @svgr/webpack 插件后无法build dll，报错can’t resolve ‘fs’
• 问题分析：webpack build的时候肯定是build不正确的pkg，这个pkg是node环境下使用的
• 搜索：baidu之，一看就不靠谱，换google，发现其他包（出了roadhog）也有这个问题，解决放在是在webpack配置中加入node:{fs:’empty’}，意义是解析到fs时给个空对象
• 使用上述方法解决生产时问题

• 继续分析问题的根源：不正确的包引入了，调试对应的webpack config，发现@svgr/webpack在build dll的entry中，大概率是这个不对
• 在webpack config中filter掉这个entry，bug消失，问题成功定位
• 接下来看这个entry如何生成，查看roadhog源码，buildDll.js，发现其配置中的entry是读取package.json的dependencies然后处理include和exclude之后内容，所以最终的解决方式是把package.json的dependencies中的@svgr/webpack移到devDependencies中
• 启示：
  • npn install –save 和 npm install –save-dev的时候需要规范
  • roadhog这个属于坑，需要完善文档

doc：

1. bug fix https://reactjs.org/blog/2018/05/23/react-v-16-4.html#bugfix-for-getderivedstatefromprops
2. 官方文档 https://reactjs.org/docs/react-component.html#static-getderivedstatefromprops
3. 某中文教程 https://blog.csdn.net/nnxxyy1111/article/details/80832525
4. react 16.3-16.4生命周期 http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/
5. 一个非常好的解读 https://zhuanlan.zhihu.com/p/37169569
6. memoization https://segmentfault.com/a/1190000015301672
7. 一些新生命周期下的事件（官网译）：https://www.zcfy.cc/article/update-on-async-rendering

这个生命周期某种程度上用来替代UNSAFE_componentWillReceiveProps。另外是为了异步渲染（？）。

推荐阅读顺序：5&4，2／6，3，1

特性：

• 基本功能
  • 通过props往state里面塞东西
• 每次接受新的props，setState会调用
• 可能需要在state里面塞入之前的状态来进行对比（官方栗子）

在新的生命周期情况下，一些新的pattern：

• 在更新props的时候执行一些side effect（拿数据什么的）：放在componentDidUpdate里面
• 在更新props的时候执行重新计算一些数据（some data，指的不是state），使用pureComponent和memoization优化 https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html#what-about-memoization（译文：https://blog.csdn.net/nnxxyy1111/article/details/80832525#%E4%BB%80%E4%B9%88%E6%98%AFmemoization）
• 在更新props的时候reset／重置一些数据，暴力的重新渲染组件就好了（通过更改key），官网说性能差不了多少（谁知道呢）

tips：

• 期待在constructor，componentWillMount（即将废弃），shouldComponentUpdate，render是pure的，在did*中进行异步操作。实践中在will*进行有effect的操作通常会出发二次渲染，所以直接就放在did里面了。
• getsnapshotBeforeUpdate目前的应用就是在官网的demo中用于处理dom的scrollTop，更多的使用有待探索

正畸

关于牙齿正畸的注意事项(十分重要)：https://wenku.baidu.com/view/aa98b972852458fb770b568d.html

日常

漱口水的相关知识：http://www.360doc.com/content/15/0623/15/13504251_480128723.shtml ；注意：正畸之后如果有处方漱口水按照医生处方来

漱口水的选择：https://www.zhihu.com/question/25350039/answer/83425398；大多数漱口水含氟；推荐：欧乐B（水果味），皓乐齿（综合最高，两者的杀菌性能都够，后者的口味评测最佳）（全部无酒精，等待真人评测）

通过babel了解一下es6的class，let，const和箭头函数

class的实现方式：原型链继承的语法糖，但是es6中未提供静态变量

箭头函数如何处理this：在上文生成一个变量，和arguments：使用上文的arguments，当然箭头函数的写法也是其很重要的一部分。

let：

作用域问题：通过创建不同的变量和调用关系／通过作为函数执行时的参数实现

//测试class 和箭头函数
class A {
  static name = () => "liuqi";
  constructor() {
    this.hello = "coool";
    const a = () => {
      console.log("hello", this, arguments);
    };
    const b = function() {
      console.log("hello", this, arguments);
    };
  }
}
class B extends A {
  a = function() {};
}
 
const b = val => {
  console.log(val);
};
 
const a = x => {
  return () => {
    console.log(x);
  };
};
 
// 测试let的上下文
for (let i = 0; i < 5; i++) {
  setTimeout(function() {
    console.log(i);
  }, i * 1000);
}
 
for (var i = 0; i < 5; i++) {
  setTimeout(function() {
    console.log(i);
  }, i * 1000);
}
 
for (var i = 0; i < 5; i++) { setTimeout(() => {
    console.log(i, this);
  }, i * 1000);
}
 
for (let i = 0; i < 5; i++) { setTimeout(() => {
    console.log(i);
  }, 1000);
}
 
if (true) {
  let a;
  if (false) {
    let a;
    let b;
    a = 1;
  }
  a = 2;
}

"use strict";
 
"use strict";
 
// constructor 返回值
function _possibleConstructorReturn(self, call) {
  if (!self) {
    throw new ReferenceError(
      "this hasn't been initialised - super() hasn't been called"
    );
  }
  return call && (typeof call === "object" || typeof call === "function")
    ? call
    : self;
}
 
// 通过原型链进行继承
function _inherits(subClass, superClass) {
  if (typeof superClass !== "function" && superClass !== null) {
    throw new TypeError(
      "Super expression must either be null or a function, not " +
        typeof superClass
    );
  }
  subClass.prototype = Object.create(superClass && superClass.prototype, {
    constructor: {
      value: subClass,
      enumerable: false,
      writable: true,
      configurable: true
    }
  });
  if (superClass)
    Object.setPrototypeOf
      ? Object.setPrototypeOf(subClass, superClass)
      : (subClass.__proto__ = superClass);
}
 
// 类型检查
function _classCallCheck(instance, Constructor) {
  if (!(instance instanceof Constructor)) {
    throw new TypeError("Cannot call a class as a function");
  }
}
 
// 声明一个class／function
var A = function A() {
  var _this = this,
    _arguments = arguments;
 
  _classCallCheck(this, A);
 
  this.hello = "coool";
  var a = function a() {
    console.log("hello", _this, _arguments);
  };
  var b = function b() {
    console.log("hello", this, arguments);
  };
};
 
// 类的静态方法
A.name = function() {
  return "liuqi";
};
 
// 类的继承
var B = (function(_A) {
  _inherits(B, _A);
 
  function B() {
    var _ref;
 
    var _temp, _this2, _ret;
 
    _classCallCheck(this, B);
 
    for (
      var _len = arguments.length, args = Array(_len), _key = 0;
      _key < _len;
      _key++
    ) {
      args[_key] = arguments[_key];
    }
 
    return (
      (_ret = ((_temp = ((_this2 = _possibleConstructorReturn(
        this,
        (_ref = B.__proto__ || Object.getPrototypeOf(B)).call.apply(
          _ref,
          [this].concat(args)
        )
      )),
      _this2)),
      (_this2.a = function() {}),
      _temp)),
      _possibleConstructorReturn(_this2, _ret)
    );
  }
 
  return B;
})(A);
 
var b = function b(val) {
  console.log(val);
};
 
var a = function a(x) {
  return function() {
    console.log(x);
  };
};
 
// let的作用域
var _loop = function _loop(_i) {
  setTimeout(function() {
    console.log(_i);
  }, _i * 1000);
};
 
for (var _i = 0; _i < 5; _i++) {
  _loop(_i);
}
 
for (var i = 0; i < 5; i++) {
  setTimeout(function() {
    console.log(i);
  }, i * 1000);
}
 
for (var i = 0; i < 5; i++) {
  setTimeout(function() {
    console.log(i, undefined);
  }, i * 1000);
}
 
var _loop2 = function _loop2(_i2) {
  setTimeout(function() {
    console.log(_i2);
  }, 1000);
};
 
for (var _i2 = 0; _i2 < 5; _i2++) {
  _loop2(_i2);
}
 
// let的作用域
if (true) {
  var _a = void 0;
  if (false) {
    var _a2 = void 0;
    var _b = void 0;
    _a2 = 1;
  }
  _a = 2;
}

let a = 1;
console.log("1:", a);
new Promise((resolve, reject) => {
  console.log("2:", a);
  resolve(1);
  console.log("3:", a);
  reject(2);
  console.log("4:", a);
})
  .then(val => {
    a = 2;
    console.log("5:", a);
  })
  .catch(val => {
    a = 3;
    console.log("6:", a);
  });
console.log("7:", a);
 
a = 4;
console.log("8:", a);

输出：

1: 1
2: 1
3: 1
4: 1
7: 1
8: 4
5: 2

分析：promise的then是异步的，promise resolve之后的状态就确定了，不能再改变了

官方文档：https://draftjs.org/docs/getting-started

awesome：https://github.com/nikgraf/awesome-draft-js

draft js plugin：https://www.draft-js-plugins.com/

example：https://draftjs-examples.herokuapp.com/

how drafjs represent rich text：https://medium.com/@rajaraodv/how-draft-js-represents-rich-text-data-eeabb5f25cf2

draft js in zhihu：https://zhuanlan.zhihu.com/p/24951621

draft js + electron：https://www.jianshu.com/p/0d22b3bf96a5

富文本编辑器实现可视化的程序／表达式编辑

和具体业务无关

需求：

给定一些变量&常量&函数&运算符，生成一个返回一定内容和意义的表达式。

例如：

给定变量 {name: “时间1″, key:”time1″,value:”2018-01-01-00:01”}{name: “时间2″, key:”time2″,value:”2018-01-01-00:02”}，其中key指代的是进行实际运算（就像在编译器里）使用的唯一值，name用于助记

运算符 + – * / > < ( )

生成rule：

time1 > time2

在某些情况下，如果key不友好，rule 的内容可读性不好，希望有如下情况

时间1   > 时间2

和更进一步的：加入函数等表示方式及其可视化（可读性更加）的表示方式和对应的交互：

例如将一个元素拖入编辑面板，删除一个元素（整体删除），光标的移动，more（redo， undo，copy，paste）

• react：
  • dva 系列的实现
    • react-saga的文档：https://redux-saga-in-chinese.js.org/docs/api/
    • react-route-redux
    • dva源码： https://dvajs.com/guide/source-code-explore.html#start-%E6%96%B9%E6%B3%95
    • dva subscription
    • react + redux 的3条规范 https://blog.jimmylv.info/2016-07-04-rules-for-structuring-redux-applications/
  • context
  • unmount–>深入理解生命周期
  • mobx
• rxjs
  • https://zhuanlan.zhihu.com/p/25383159 写一遍
  • 响应式编程和流处理（kafka之类的）
• event loop
  • https://segmentfault.com/a/1190000014940904
• webpack
  • http://www.cnblogs.com/hezihao/p/7921872.html
• 交互
  • 富文本编辑器
• ml
  • nlp前沿
  • nlp实践
• 其他
  • es7(？)& es6 : http://es6.ruanyifeng.com/#README
  • css精通 && flex（？
  • ui设计
  • pwa
  • pathToRegexp 优雅的处理处理url
  • promise 异常处理： 用途，redux-saga中的异常，其他框架中的异常处理（一般是通过中间件捕捉）
  • draft js 使用心得
  • 编译原理
  • google 开发者大会 from B站
  • 百度的est样式库：http://ecomfe.github.io/est/#ellipsis
  • http2和cdn等网络相关的东西

占坑

需求：

用户需要比较简单的操作（智商低），需要拖拽实现四则运算的式子，使用react-dnd实现

分析：

与具体业务无关

数据结构：todo

拖拽实现&原理&trick：

基于h5 拖拽的封装，也可以自己实现相关的接口

几个关键内容：拖拽开始，拖拽over，拖拽结束；数据传送datatransfer

拖拽实现公式操作：todo

代码&demo

todo

函数式编程与面向对象编程的比较：https://www.cnblogs.com/zhenw/p/6160931.html

廖雪峰的python函数式编程教程：https://www.liaoxuefeng.com/wiki/001374738125095c955c1e6d8bb493182103fac9270762a000/001386819866394c3f9efcd1a454b2a8c57933e976445c0000

相关概念：

• 高阶函数：把函数作为参数传入
• 函数作为函数
• lambda函数
• 装饰器
• 偏函数（？语言特性太重）

https://legacy.gitbook.com/book/llh911001/mostly-adequate-guide-chinese/details

收藏：

react 技术栈学习笔记：https://www.cnblogs.com/ruoji/p/6464131.html

react生命周期：https://blog.csdn.net/fengxiaoxiao_1/article/details/77261617

扩展create react app 的webpack配置：https://juejin.im/post/5a5d5b815188257327399962

create react app 相关：

• 功能介绍1： https://www.cnblogs.com/hello-yz/p/8268026.html
• 功能介绍2： https://blog.csdn.net/github_squad/article/details/57452333
• 常用配置： https://www.jianshu.com/p/e09b2c57cf20

react + webpack：基于webpack的React项目搭建 https://www.cnblogs.com/raion/p/8053799.html

react高阶组件：https://github.com/brickspert/blog/issues/2

react setState异步／同步：https://segmentfault.com/a/1190000007454080

状态提升：https://www.cnblogs.com/zhangbob/p/6962138.html?utm_source=itdadao&utm_medium=referral

smart和dumb组件：https://blog.csdn.net/xiao_chun5316/article/details/50428345

函数组件：https://blog.csdn.net/xuchaobei123/article/details/75195522

redux（需要多看几遍）：https://segmentfault.com/a/1190000012976767

redux-saga：https://www.jianshu.com/p/e84493c7af35

推荐使用browserHistory：https://segmentfault.com/q/1010000007788281

redux-connect：https://segmentfault.com/a/1190000010416732

面试准备：

• react 常见面试题 https://blog.csdn.net/sinat_17775997/article/details/69938720/

todo：

react+webpack

react+redux：react 更新原理

router

总结和面试准备

react redux summary

react redux要做的事：

统一存储数据 store

数据传递到组件

修改数据的接口dispatch

修改完数据触发更新connect