椰卤工程师的个人博客

对于生命周期我们只需关注比较重要的几个生命周期的运行点即可，比如render的作用、使用在挂载完真实DOM后做一些副作用操作、以及性能优化点、还有卸载时利用清除副作用。对于首次挂载阶段，我们需要了解react的渲染流程是：通过我们书写的初始元素和一些其他可以生成虚拟节点的东西来生成虚拟节点。然后针对不同的节点类型去做不同的事情，最终将真实DOM挂载到页面上。然后执行渲染期间加入到队列的一些生命周期。然后组件进入到活跃状态。对于更新卸载阶段，需要注意的是有几个更新的场景。以及key的作用到底是什么。

CustomCamera功能介绍 与 展示小程序取景框内拍照实时显示当前时间显示当前经纬度显示当前街道信息可本地保存照片代码实现1、拍照功能拍摄照片：CameraContext.takePhoto(Object object)相机授权请求：wx.authorize(Object object) onShow: function () { this.getLocation(); var that = this wx.authorize({

umi是⼀个可插拔的企业级 react 应⽤框架。一、为什么用umi？开箱即用，内置 react、react-router 等类 next.js 且功能完备的路由约定，同时支持配置的路由⽅方式完善的插件体系，覆盖从源码到构建产物的每个生命周期高性能，通过插件支持 PWA、以路由为单元的 code splitting 等支持静态⻚面导出，适配各种环境，⽐如中台业务、⽆线业务、egg、⽀付宝钱包、云凤蝶等开发启动快，⽀持⼀键开启 dll 和 hard-source- webpack-plugin

Generator：生成器函数Generator函数是ES6提供的一种异步编程解决方案，语法行为和传统函数完全不同。function关键字与函数名直接只有一个*yield定义了内部不同的状态yield表达式只能在Generator函数⾥使用，在其他地方会报错function* helloWorldGenerator() { yield 'hello'; yield 'world'; return 'ending';}var hw = helloWorldGenera

组件化机制组件声明：Vue.component()initAssetRegisters(Vue) src/core/global-api/assets.js 组件注册使用extend方法将配置转换为构造函数并添加到components选项组件实例创建及挂载：观察生成的渲染函数"with(this){return _c('div',{attrs:{"id":"demo"}},[ _c('h1',[_v("虚拟DOM")]),_v(" "), _c('p',[_v(_s(foo))]),_v(" "),

模版编译的主要目的：将模版template转换为渲染函数render即template => render()模版编译必要性Vue 2.0需要用到VNode描述视图以及各种交互，手写显然不切实际，因此用户只需编写类似HTML代码 的Vue模板，通过编译器将模板转换为可返回VNode的render函数。体验模版编译带编译器的版本中，可以使用template或el的方式声明模板。compiler.html(function anonymous(){with(this){return _

Vue源码解析——异步更新队列+虚拟dom异步更新队列Vue高效的秘诀是一套批量、异步的更新策略。每一个组件对应一个watcher实例，在一个队列中插入watcher，再进行批量操作。概念事件循环：浏览器的一套工作机制。浏览器为了协调事件处理、脚本执行、网络请求和渲染等任务。宏任务：一系列任务的集合，代表着一个个离散的、独立工作单元。浏览器完成一个宏任务，在下一个宏任务执行开始前，会对页面进行重新渲染。主要包括创建主文档对象、解析HTML、执行主线JS代码以及各种事件如页面加载、输入、网络

学习虚拟dom之前，当然的知道jsx是干嘛用的，就像我们吃饭，吃西餐时得学习用刀叉，刚开始会吃饭时得学会怎么用筷子。JSX1、 什么是JSXJSX就是大家所说的语法糖，React 使用 JSX 来替代常规的 JavaScript。此外，JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。2、为什么需要JSX开发效率：使用 JSX 编写模板简单快速。执行效率：JSX编译为 JavaScript 代码后进行了优化，执行更快。类型安全：在编译过程中就能发现错误。3、原理ba