react

一，对象实体对比 vue的对象实体依然是html，而react的对象实体已经变味jsx，一种新的语法结构。 vue的html与react的jsx都可以进行拆分，拆分成更细小的组件，组件之间可以传值。 二，生命周期 显然二者都有生命周期概念，生命周期让静态对象实体变为动态实体。 vue的生命周期： beforeCreate created beforeMount mounted beforeDestroy destroyed react的生命周期 constructor componentWillMount render() componentDidMount componentWillReceiveProps shouldComponentUpdate componentWillUpdata render() componentDidUpdate() componentWillUnmount() 三，修改系统 修改系统第一步是赋值，因为不管是html还是jsx都只是一个结构，没有数据的结构，所以第一步是赋予数据。 赋予数据的方式有 vue data是数据集合 v-for，v-if，v-show，v-else，v-else-if，v-bind，v-on，refs，{{}}，props； react 在es6中，可以在this.state中产生初始化数据

先来vue的吧，先上图,生命周期就好比一个人重出生到青少年再到青年再到中年在到老年到死亡的一个过程，不同的过程做不同的事情。 好了，上代码 beforeCreate ：数据还没有挂载呢，只是一个空壳 created :这个时候已经可以使用到数据，也可以更改数据,在这里更改数据不会触发updated函数 beforeMount：虚拟dom已经创建完成，马上就要渲染,在这里也可以更改数据，不会触发updated mounted ：此时，组件已经出现在页面中，数据、真实dom都已经处理好了,事件都已经挂载好了 beforeUpdate:重新渲染之前触发,然后vue的虚拟dom机制会重新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比之后重新渲染 updated:数据已经更改完成，dom也重新render完成 beforeDestory :销毁前执行（$destroy方法被调用的时候就会执行）,一般在这里善后: 清除计时 器、清除非指令绑定的事件等等... destroyed:组件的数据绑定、监听...都去掉了,只剩下dom空壳，这里也可以善后 常用的生命周期也就 标红的那几个了， ************** React的生命周期 ************** React 生命周期分为三种状态 1. 初始化 2.更新 3.销毁（其实vue差不多啊） //

摘要 以React技术栈为主分享我们在大规模企业应用建设过程中遇到的问题，对前后端分离架构的思考，前后端分离的技术方案，前后端分离过程中的实践经验，前后端分离带来的效果与价值，以及目前存在的问题与未来可能的尝试。 应用的现状 我们的应用拥有接近100w的用户、3K+的QPS、5亿+的单表数据、万亿级别的资金流，但是同样也面临着诸多问题。 首先是颜值低，换肤受限、无法集成更好的前端框架和组件。然后是前后端的高度耦合使得无法快速的响应业务变化，维护成本也随着应用规模不断攀升，性能方面也受到限制，沟通成本提高。其次是无法跨终端，渲染和跳转强依赖于后端，业务逻辑分散。最后就是强状态性，应用中很多的数据是与用户的会话绑死的，由此造成没有水平伸缩的能力，智能化、自动化、服务化同样受限。 我们经过思考认为理想的状态应该是这样的，前端方面具备高颜值、个性化、多渠道、多终端的特质；而在后端上需要能做到微服务化、水平伸缩、高可用、自动化甚至智能化。 解决方案-前后端分离 定义 在之前的应用中后端是Java，前端是Browser（浏览器）。但是现在Node出现了，它被包含在大前端中用来替换原来的MVC部分，这样后端就可以脱离出来处理纯服务化的部分，前端也可以专注于纯前台的领域。 各自的职责 前端方面Browser负责数据的展现和收集、事件的响应和处理、DOM的操作、请求的发送和响应的处理

-S 即-- save（保存） 包名会被注册在package.json的dependencies里面，在生产环境下这个包的依赖依然存在 -D 即-- dev（生产） 包名会被注册在package.json的devDependencies里面，仅在开发环境下存在的包用 -D，如babel，sass-loader这些解析器 啥也不写 包名不会进入package.json里面，因此别人不知道你安装了这个包（...智障） npm install -d 就是 npm install --save-dev 安装到开发环境 例如 gulp ，babel，webpack 一般都是辅助工具 npm insatll -s 就是npm install --save 安装到生产环境 如 vue ,react 等 npm -i 与npm install -s与-d的区别 npm i module_name -S = > npm install module_name --save 写入到 dependencies 对象 npm i module_name -D => npm install module_name --save-dev 写入到 devDependencies 对象 npm i module_name -g 全局安装 i 是install 的简写 -S 就是 --save 的简写 -D就是-

从合并请求角度谈性能优化   性能优化是前端非常重要的一块，可下手的地方有很多，比如图片层次、JS层次、webpack工程层次、CSS层次、CDN层次等等，其中关于请求的优化是整个项目运行中非常重要的一块，所以这次我们来讲一下请求优化的一个小方法。 来看需求   最近在一个React项目中有看见一个类似结构的代码，其中reqData、reqListData、reqProData是三个函数，内部分别有三个不同的Promise请求，请求获得数据后，将数据保存至this.state中。 componentDidMount() { this.reqData(); this.reqListData(); this.reqProData(); } /** * 第一个请求 **/ reqData() { ajax.getData().then(res => { // do something with this.setState({}) }) } /** * 第二个请求 **/ reqListData() { ajax.getListData().then(res => { // do something with this.setState({}) }) } /** * 第三个请求 **/ reqProData() { ajax.getProData().then(res => { // do

备注：<=> 意为等价于； 1、npm install <=> npm i --save <=> -S --save-dev <=> -D npm run start <=> npm start // 对应"scripts"里的"start"命令 少敲几下键盘，何乐而不为 2、npm i --save-dev <packname> 工程构建（开发时、“打包”时）依赖 ；例：xxx-cli , less-loader , babel-loader... 在 package.json 文件里面体现出来的区别就是，使用 --save-dev 安装的插件，被写入到 devDependencies 对象里面去，而使用 --save 安装的插件，则被写入到 dependencies 对象里面去。 3、npm i --save <packname> 项目（运行时、发布到生产环境时）依赖；例：antd , element,react... 那 package.json 文件里面的 devDependencies和dependencies对象有什么区别呢？ devDependencies是对开发环境所需依赖的声明(构建工具，测试工具) ，比如：babel，webpack，都放到当前目录。 而 dependencies是对生产环境所需依赖的声明(开发应用中使用的框架，库) ，比如：jq，react

摘要 　　 在react中，大多数业务逻辑都组件化；极大的减轻了代码的冗余度，如果组件的层次比较深的话，组件的import就比较费劲，在import时使用“../../components/test”的方式，组件的import就会稍显混乱、组件代码不容易维护。为了可高效的、快速的维护组件代码，废弃“../../”的组件引入方式，配置一个组件路径重写的方式引入组件。 配置内容 　　 我在之前就介绍过在react中引入less的配置，同样的为了配置一个路径别名，使用customize-cra来覆写webpack底层配置。(配置覆写webpack需要的插件以及第三方库就不在复述，不清楚的可以去参考 Ant Design 官方的配置说明) 路径别名重写方式一 const { override } = require('customize-cra'); const path = require("path"); module.exports = override( config =>{ config.resolve.alias = { "@": path.resolve(__dirname, "src") }; return config; }, ); 路径别名重写方式二 const { override, addWebpackAlias } = require('customize-cra

摘要 　　 在react中，大多数业务逻辑都组件化；极大的减轻了代码的冗余度，如果组件的层次比较深的话，组件的import就比较费劲，在import时使用“../../components/test”的方式，组件的import就会稍显混乱、组件代码不容易维护。为了可高效的、快速的维护组件代码，废弃“../../”的组件引入方式，配置一个组件路径重写的方式引入组件。 配置内容 　　 我在之前就介绍过在react中引入less的配置，同样的为了配置一个路径别名，使用customize-cra来覆写webpack底层配置。(配置覆写webpack需要的插件以及第三方库就不在复述，不清楚的可以去参考 Ant Design 官方的配置说明) 路径别名重写方式一 const { override } = require('customize-cra'); const path = require("path"); module.exports = override( config =>{ config.resolve.alias = { "@": path.resolve(__dirname, "src") }; return config; }, ); 路径别名重写方式二 const { override, addWebpackAlias } = require('customize-cra

自从Vue3 Beta发布以来，我就尝试在小项目中使用它了，不得不说真是香，虽然对新手可能不太友好，但是对于用过React Hooks的人来说简直不要太爽，解决了React Hooks多次运行以及性能优化等多项心智负担，但是就在刚刚做好的一个动效在自己手机上完美运行，美滋滋的拿去给同事测试，然而同事的苹果手机却没有任何动态效果： 而在我的手机效果是这样的： 这个特效的逻辑是这样的：首先获取后置摄像头权限进行拍摄，然后在视频上方循环播放帧动画（ 其实就是仿AR ），由于公司无力开发AR模型，只能让美工渲图然后web端做个伪AR，那么问题来了，如果是WebGL做出来的模型即使代码量很大，也依然就几百K顶多1M，但是帧动画就不一样了，美工给了我几百张图，每一张大概在50k左右，加在一起十多M二十来M的，加载时间太长了，所以需要一个等待动画，这个等待动画就是一个小心心，小心心里面是你摄像头目前拍摄到的画面，这个小心心会随着你加载的图片的数量而越来越大，当加载完毕后小心心占满全屏( 也就是看不到小心心啦 )。如果还是不明白到底是个什么样的效果，可以微信扫码进行体验： 注意：最好用浏览器打开，还没开发完，可能会有bug！ 组件间传值 在帧动画那个组件里请求的图片，但是图片请求了多少张这个数值需要传递到小心心那个组件去，发现$emit这种vue2传值法居然不好使了！ // 子组件 import

While you’re writing your tests it can be helpful to see what the DOM looks like. You can do this with React Testing Library’s debug function which will log a formatted and syntax highlighted state of the DOM at the time it is called. const { getByLabelText, debug } = render(<FavoriteNumber />) Using it: test('renders a text input with placeholder Search beer', () => { const { getByLabelText, debug } = render(<FavoriteNumber />) const input = getByLabelText(/favorite number/i) debug(input) // output input dom debug() // output whole component dom expect(input).toHaveAttribute('type', 'number')