React 的setState

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是异步的(怎么实现的)
  • 异步渲染的出发点和实现

 

 

roadhog build dll时的一个bug(can’t resolve ‘fs’)的解决过程

过程:

  • 问题出现:引入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这个属于坑,需要完善文档

react 16.3-16.4 getDerivedStateFromProps等新的生命周期

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(水果味),皓乐齿(综合最高,两者的杀菌性能都够,后者的口味评测最佳)(全部无酒精,等待真人评测)