react

一 业务背景介绍 小女子毕业于湖南长沙某985二梯队大学，在深圳某厂工作，鉴于本校在深圳校友众多（大概4w+）, 急切需要一个校友交流的平台，传统的网站形式以及没落且无人问津，故打算开发 一个小程序+公众号的社交平台，供木讷的工科师兄师弟师姐师妹交流，初步计划的模块有资讯，交友，互助，捐赠，个人中心，代言母校，聚会活动，校友供需，后续会陆续来落实。 二 前端技术方案选型 原生 ：对性能特别苛刻 or 追求稳定 or 要用最新功能，请记住任何时刻原生都是最稳定性能最好的选择！！！！ KBone ：kbone 是一个致力于微信小程序和 Web 端同构的解决方案，微信小程序的底层模型和 Web 端不同，我们想直接把 Web 端的代码挪到小程序环境内执行是不可能的。kbone 的诞生就是为了解决这个问题，它实现了一个适配器，在适配层里模拟出了浏览器环境，让 Web 端的代码可以不做什么改动便可运行在小程序里。 MPVue ：是美团点评开源的一个使用 Vue.js 开发小程序的前端框架。框架基于 Vue.js 核心，mpvue 修改了 Vue.js 的 runtime 和 compiler 实现，使其可以运行在小程序环境中，从而为小程序开发引入了整套 Vue.js 开发体验。 WePY ：腾讯团队开源的一款类vue语法规范的小程序框架,借鉴了Vue的语法风格和功能特性,支持了Vue的诸多特征

来到新公司上班已经快一个月的时间，趁着空闲时间把自己这段时间的面试题进行一波总结，避免再次踩坑，有些问题还是需要自己去查一下，有时间的话会把答案补全 关于模块化的理解，AMD、CMD规范 AMD、CMD规范其实就是require.js、sea.js在推广过程中对模块规范化的产出 模块化就是将一个大文件拆分成相互依赖的小文件，再进行统一的拼装和加载。只有这样，才有多人协作的可能 响应式布局的原理 响应式布局就是根据不同的屏幕大小设置不同的样式 Media Queries（媒体查询） 是响应式设计的核心 Redux的原则 单一数据源 数据是只读的 state的更改只能由纯函数修改 怎么通过路由对不同账号进行权限管理 这个其实就是账号权限的问题，一般后台系统会用这个，路由鉴权的问题，一般需要后台同学配合 重绘和回流 重绘：只改变dom样式会触发重绘 如 color 回流：改变dom的布局 如padding 回流肯定会触发重绘，重绘不一定会触发回流 词法作用域，为什么叫词法作用域 词法作用域又叫静态作用域，是在词法解析阶段已经确定了一个变量的作用域 promise 和 async关系 async是Generator的语法糖，返回一个promise对象 ajax拦截全局请求 ajax与fetch的关系与区别 ajax的实质是 XMLHttpRequest react生命周期 实例化：

vue和react的区别 React严格上只针对MVC的view层，Vue则是MVVM模式 virtual（虚拟） DOM不一样，vue会跟踪每一个组件的依赖关系，不需要重新渲染整个组件树。而对于React而言，每当应用的状态被改变时，全部组件都会重新渲染，所以react中会需要shouldComponentUpdate这个生命周期函数方法来进行控制 组件写法不一样，React推荐的做法是 JSX + inline style，也就是把HTML和CSS全都写进JavaScript了，即'all in js'；Vue推荐的做法是webpack+vue-loader的单文件组件格式，即html，css，js写在同一个文件 数据绑定：vue实现了数据的双向绑定，react数据流动是单向的 state对象在react应用中不可变的，需要使用setState方法更新状态；在vue中，state对象不是必须的，数据由data属性在vue对象中管理 redux和vuex的区别 vuex是redux的基础上进行改变，对仓库的管理更加明确 使用mutation来替换redux中的reducer vuex有自动渲染的功能,所以不需要更新 vuex是专门为vue提供的状态管理工具,而redux是一个泛用的状态管理框架 vuex的实现原理 Vuex的状态存储是响应式的，当Vue组件从store中读取状态时

Taro 简介 现在支持小程序的平台太多了，例如： 微信小程序 QQ小程序 支付宝小程序 百度小程序 字节跳动小程序 针对他们都各自开发一套的话开发成本就太高了。 如果写一套代码，就能开发出适配这么多平台的小程序，是不是开发效率提升了好几倍。 Taro 的使命就是解决这个问题，多端支持，除了支持上面的那些小程序，还支持 H5、APP，一套代码，多处运行。 Taro 是京东的凹凸实验室推出的小程序框架，已经支撑了京东的多个核心业务，例如京东购物、京东到家。 Taro 在 GitHub 上收到 2.3w+ star，也很活跃，最近更新时间是 3 天前。 Taro 遵循的是 React 语法规范，只需要写一套代码，通过 Taro 编译工具，就可以编译出不同端的代码。 因为是基于 React，所以支持 React-Native，这样就可以轻松编译出 APP。 Taro 核心特性 支持使用 npm/yarn 安装管理第三方依赖。 支持使用 ES7/ES8 甚至更加新的 ES 规范，一切都可自行配置。 支持使用 CSS 预编译器，例如 Sass 等。 支持使用 Redux 进行状态管理。 支持使用 Mobx 进行状态管理。 小程序 API 优化，异步 API Promise 化等等。 学习资源 1. 免费 https://github.com/NervJS/awesome-taro

了解 React 之 hooks（一） 前言 useState useEffect useContext useReducer 前言 在 React 中使用 class 继承 React.Component，就可以在类里面使用各种各样的钩子函数，比如 componentWillMount、componentDidMount、componentWillUnmount 等。你也可以直接写 function 来构建 reander 方法，但是就无法使用钩子函数，无法使用 setState 修改状态。在 React 16 版本之后新增了 hooks 特性，hooks 特性的主要表现形式为：在 React 中可以直接使用函数的形式来完成所有组件逻辑。 useState useState 方法是用来修改数据状态。 import React , { useState } from 'react' ; import ReactDOM from 'react-dom' ; function App ( ) { const [ count , setCount ] = useState ( 0 ) ; return < div onClick = { setCount ( count + 1 ) } > { count } < / div > } ReactDOM . render ( < App /

源自： https://www.yuque.com/es2049/blog/al62bl 前言 封不平听在耳里，暗叫：“到这地步，我再能隐藏甚么？”仰天一声清啸，斜行而前，长剑横削直击，迅捷无比，未到五六招，剑势中已发出隐隐风声。他出剑越来越快，风声也是渐响，剑锋上所发出的一股劲气渐渐扩展，旁观众人只觉寒气逼人，脸上、手上被疾风刮得隐隐生疼，不由自主的后退，围在相斗两人身周的圈子渐渐扩大，竟有四五丈方圆。泰山派的一个道士在旁说道：“气宗的徒儿剑法高，剑宗的师叔内力强，这到底怎么搞的？华山派的气宗、剑宗，这可不是颠倒来玩了么？ 《笑傲江湖》中的“剑宗余孽”封不平本想仗着有嵩山派撑腰，一举夺了华山掌门宝座。可打了半天剑法上占不了便宜，最后只能使出“狂风快剑”，企图以内力取胜。可见，任何高明武功若无内功心法相辅，也是徒劳无功。 说回前端，如今的前端技术栈就如同武侠小说中的江湖一样，各门各派自成一体，可谓“百花齐放”、“百家争鸣”。 这边 React 、Vue 、AngularJS 、JQuery 谁还都谈不上能一统江湖。“武林新贵” Flux 、Redux 、Mobx 们已经忙着争夺谁是数据流框架老大。Native 端 RN 刚偃旗息鼓，Weex 就大有“ I’m the everywhere ”之势。连备受争议的 GraphQL 内部都还有 Apollo、Relay 掐来掐去。

过去，我一直想着抽时间写一个小的前端工具，以对代码进行自动化的重构。但是呢，经过我再三的考虑，我暂时取消了这个打算 —— 主要是没时间。（PS：人生长乐，写个 Charj） 但是呢，我打算写一篇文章记录一下相关的思路。 原因依据很多： 大部分国内的公司使用的都是 Vue，template、script、style 都耦合在一起； 大量的前端项目都是轻逻辑，不具有复杂的业务场景 前端系统被重写的频率太快了 JavaSript 语法太灵活，而 TypeScript 还未普及 …… 简单来说，在缺乏复杂场景的情况下，我不太想去写这样的工具。 如何构建前端自动化重构工具？ 在我之前写的那篇『重构的自动化』中，介绍了如何去做这样的工具： 构建特定语言的语法解析器。 设定代码坏味道的内容及标准。 针对于每一项坏味道，编写识别代码。 编写代码坏味道的建议改进和实施代码。 实现坏味道的自动化重构。 以 Vue 为例，这个过程便是： 寻找适用于 Vue 的 AST 生成工具。如 eslint-vue-parser 寻找和编写适用于 Vue 编码的相关规范。 对应规范寻找代码中的问题。 针对该问题寻找改进点 实现自动化重构 让我们来看个简单的示例，如我们的代码规范中，针对于 组件库 强制规范了一定要写 scoped 。而我们有大量的组件都没有相应的实践。这个时候，就可以通过这种方式来处理

想成为一个更好的开发者，那么理解数据结构、算法和基本编程思想是必须的。现在大多数问题都被现代工具和各种库解决了，但是对这些领域有一个更深的了解，将会大大拓宽你软件开发的视野。 就我自己而言，掌握这些概念是相当困难的，因为在我每天的工作里，几乎都不用这些。我正在写的这一系列文章就是为了提升我和那些跟我一样的人对这些方面的理解。 什么是递归 递归是主要的编程思想之一。毫无疑问，你已经在一些算法书籍和文章里，以及计算斐波纳契数列或者相似内容的例子里，看到了一些可怕的词汇。但作为一个网页开发人员，在你的日常编码工作或者实现排序算法时，可能并没有用到斐波纳契数列，至少我没有。 当我第一次开始阅读关于递归时，在理解哪里能被正确的使用时遇到了问题。我知道这个方法的好处以及在某些特定算法里的用途，但是很难找到更应该使用递归而不是迭代的场景。 在继续之前——本文希望你对递归和JavaScript有一个基本的了解。所以，让我们从一个我觉得容易理解的定义开始： 递归就是一个函数调用自身，直到达到某个特定状态。 让我们把它分为两部分，然后分别讨论。一个 调用自身的函数 意思是在函数体内，我们将调用同一个函数—— 初始化（inception） ，对吗？你第一次看见一个递归函数的时候，可能会打破你对函数执行的理解，但它绝对是正常的。 当我们使用递归，它会一直持续到 到达某一特定状态 为止。在某些情况下

欢迎关注“ 数智化转型俱乐部 ”！ 摘要 基于对Quick BI历年架构变迁中性能的排查、解决和总结，本文不从常规的性能优化 方式去描述，而将尝试结合项目的“个性”，总结整个前端层面相对“共性”的问题，从而提供一些前端性能解法方面的思路，帮助解决和避免前端性能问题。 随着前端的范畴逐渐扩大，深度逐渐下沉，富前端必然带来的一个问题就是性能。 特别是在大型复杂项目中，重 前端业务可能因为一个小小的数据依赖，导致整个页面卡顿甚至崩溃的问题，基于对Quick BI历年架构变迁中性能的排查、解决和总结，本文不从常规的性能优化 方式去描述，而将尝试结合项目的“个性”，总结整个前端层面相对“共性”的问题，从而提供一些前端性能解法方面的思路，帮助解决和避免前端性能问题。 1 引发性能问题原因？ 引发性能问题的原因通常不是单方面缘由，特别是大型系统迭代多年后，长期积劳成疾造成，所以我们要必要分析找到症结所在，并按瓶颈优先级逐个击破，拿我们项目为例，大概分几个方面： 1、资源包过大 通过Chrome DevTools的Network标签，我们可以拿到页面实际拉取的资源大小（如下图） 经过前端高速发展，近几年项目更新迭代，前端构建产物也在急剧增大，因为要业务先行，很多同学引入库和编码过程并没有考虑性能问题，导致构建的包增至几十MB，这样带来两个显著的问题： 弱(普通)网络下，首屏资源下载耗时长

对于React Router ，只要是用 React 框架的，都绕不过去。它能让你向应用中快速地添加视图和数据流，同时保持页面与URL间的同步。有了它你才能构建复杂的应用程序，让应用更有层次感。 不过大部分同学可能只停留在会用的层面，并没有去探究背后的原理，导致 面试一被问到路由相关问题就发怵，特别是大厂面试： 单页面应用Router的实现机制？ （这道是淘宝前端一面的面试题，有同学就栽在这道题上） 为什么 React Router 中使用 Switch 关键字 ？ React Router 与常规路由有何不同？ 它是怎么实现跳转不刷新页面的？ React 路由的底层实现原理是怎样的？ 不懂原理，根本答不上来这些问题，也就与心仪的offer无缘了。特别是想要进大厂的同学，React相关技术栈是必须掌握的。 别急，开课吧出品的 《React 前端路由原理解析》 资料包帮大家解决这个问题：从前端路由的概念到 React 前端路由优劣势，从原生js手写路由，到实现 react-router5，带你全面解析 React Router ! 你将收获： 1、深度理解路由概念及原理，轻松应对面试 2、掌握路由出现的背景以及优缺点 3、掌握完整路由库背后的设计思路 4、 掌握多种路由方式的使用场景 5、 手写实现 BrowserRouter、Route、Link 标签 《React