react

Redux是一个充当状态容器的库，可帮助管理应用程序数据流；它是零依赖的，可以配合其他框架或者类库一起使用。在Redux架构中最重要的三部分是Actions，Store 以及 reducer Redux 工作流程 image.png 对照图例讲一个故事，更容易的去理解Redux!!!! Redux Flow是一个图书馆 借书的用户(组件) React Component ， 它说要借***书（对话） Action Creators ， 管理员 Store 接收到了对话，管理员去图书库 Readucers 里找这本书， 如果有那么它把书借给用户 安装 npm install --save redux 创建Redux 在src目录下新建store文件夹创建 index.js store import { createStore } from 'redux' ; //导入redux ， 从 redux 引入一个方法 createStore import reducer from "@/store/reducer" ; //导入库reducer， const store = createStore ( reducer , window . __REDUX_DEVTOOLS_EXTENSION__ && window . __REDUX_DEVTOOLS_EXTENSION__ ( ) )

　　第一次写博客，怕看客老爷们嫌啰嗦，直接先贴出我最后的解决方法： 把execution中nodeVersion和npmVersion字段放到插件的全局configuration字段中，再手动运行execution就可以了 一、问题背景 　　最近在学习spring boot，到了rest那部分后，发现自己并不会前端的内容，没办法进行前后端的集成。在选择了react作为我的前端框架后，又在网上搜索了一下怎么进行前后端集成，并没有找到太明白的方法。最后想着求助一下官方教程，果然找到了spring的一个官方教程指南： React.js and Spring Data REST ，讲解了怎么在工程中集成react。按照它的步骤step-by-step，到了引用frontend-maven-plugin插件的时候出现了问题... 二、问题描述 　　把教程里贴出来的plugin代码cv到我的pom.xml文件中后，自动下载了C:\Users\{user}\.m2\repository\com\github\eirslett\frontend-xxx等三个文件夹，但是执行install-node-and-npm，npm，webpack的时候却出了问题，报错： The parameters 'nodeVersion', 'npmVersion' for goal com.github

开发一个大型后台管理系统，应该用前后端分离的技术方案吗？ 话说这天，我们团队开会讨论了一个问题，不，与其说“讨论”，不如说“争吵”更合适。 背景是这样的： 我们要开发一个 xxx 后台管理系统，这个系统业务复杂、功能又多，大家的争吵集中在“这个系统是否应该用前后端分离的方案”。 这次争吵的问题比较典型，于是我就写了这篇文章。为了大家好理解，把“xxx 后台管理系统”泛化一下，变成： 开发一个大型后台管理系统，应该用前后端分离的技术方案吗？ 先说一下，本文中的观点肯定有人不认同，再加上我对前端技术掌握有限，所以大家批判的看吧。 1. 先审题，冷静的分析一下 前后端分离的优点多多，这不需要多说，大家人人都清楚。 来，讨论之前，我们先一起好好审审题。 结合“开发一个大型后台管理系统”这个约束条件，冷静的分析一下： • 什么是后台管理系统：首先后台管理系统这个称呼，意味着这是一个 B 端系统。可以小到部门级应用（客户投诉登记系统、办公设备台账系统），大一点可以是大集团级核心系统（500 强保险公司客服、呼叫中心），可以是 ERP、CRM、OA（SAP、用友、泛微协同），可以是一个 B2C 电商的商城后台、支付网关管理控制台，可以是 Saas 的管理后台（Salesforce、Teambition、Jira），可以大到阿里云控制台…… • 什么是大型：我理解大型系统是指功能模块多、交互复杂

[TOC] React 了解 React 是一个用于构建用户界面的 JAVASCRIPT库。 React 主要用于构建UI，可以理解为React 是 MVC 中的V(视图)。 React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站。 React 拥有较高的性能，代码逻辑较为简单。 React 特点 1.声明式设计 —React采用声明范式，可以轻松描述应用。 2.高效 —React通过对DOM的模拟，最大限度地减少与DOM的交互 3.灵活 —React可以与已知的库或框架很好地配合。 4.JSX —JSX是 JavaScript 语法的扩展。React开发不一定使用 JSX，官方建议使用。 5.组件 —通过React 构建组件，是的代码更加容易得到复用，能够很好的应用在大项目的开发中。 6.单向响应的数据流 —React实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。 快速构建一个React开发环境 1、创建本地文件夹，保存React项目 2、通过控制台输入 npm install -g create-react-app 使用npm安装create-react-app 3、完成上面的步骤之后，输入 create-react-app my-app 来创建一个项目 my-app 是创建出来的React 项目。 4

今年算是经历颇多的一年了，腾讯和华为都走了几趟（一共面试了四个部门），拿了两个offer。（开心.png），但还是挂了两次，有点遗憾。 面试题总结 面试完之后，赶紧总结了一波，前端这个岗位，这两家大厂的面试思路和面试问题其实都差不多： 1. JS底层： 说一说js的原型与继承。 分析一下优秀的前端框架源码，这么写的优缺点在哪。 this指向问题，this的深拷贝如何实现，这个也是高频率被问到的问题。 js事件流是怎么样体现的。 柯里化函数。 2. 数据层： 写过中间件么？ 了解koa么？ 数据安全是怎么处理的。 axios 与 fetch的实现。 3. HTTP相关： 跨域问题的产生与解决。 http1.1时如何复用tcp连接。 http2.0新的变化。 http报文的请求分成几个部分？ 前端与后台交互的时候会产生几次握手，分别做了什么？ 4. 框架： 说一说vue的源码的响应式与数据驱动，主要是问原理。 Vue与react的区别在哪，这个也是问底层实现。 虚拟dom、diff算法等等，基本没问到过怎么去使用。 像组件传值啥的没提过。还有就是路由的管理 有没有封装过组件库， dev-server是怎么跑起来的。 5. 服务端与工具 主要是Node的问题，有没有拿node做过中间层。 Node的线程处理、事件循环。 这个主要就是 webpack 与 babel 的配置

前言 最近这段时间经常有朋友问我 前端技术现在如此繁杂，我到底应该如何学习 。这个话题太大了，几句话回答不好；也由于这个问题确实困扰了很多前端开发人员，所以我也就着手系统的输出这篇文章。 虽然这篇文章花了很长时间，肯定也有其局限性；希望各位不吝指出。 入题 我们俨然能感受到前端岗位现在已经发展成了最重要的研发岗位之一，所以对我们提出的要求也就越来越高。所以我们需要学的也就不仅仅只是 CSS & HTML & JavaScript 了。但这三大件一直都是前端的根本，这一点从未改变。而这三大件中 JavaScript 又是重中之重。 接下来我会结合我的一点经验，给出前端学习路线的一些具体建议。 目录 三大件学习 库工具 前端框架（ MVVM ）的学习 浏览器 & 计算机基础 前端工程化 性能优化 Nodejs 数据结构和算法 依葫芦画瓢 三大件学习 现在每年依旧有很多初级入门的前端开发。所以对初入门的朋友也给出一点意见。 刚入门的朋友，我觉得不应该一开始就学习像 Vue、TypeScript、Webpack 等知识。应该把重点放在 CSS & HTML & JavaScript 基础知识的学习上。 CSS & HTML 对于刚入门的朋友我依旧建议先将 CSS(3) & HTML(5) 的知识点认真学习一边。学习的途中最好是学习完一部分就自己在敲一遍代码，加深自己的记忆。 当然如果你愿意

华为5G折叠屏幕的发布，迎来新的一个设备——移动端的折叠设备华为Max;华为Max设备分辨率有以下几种 8.0，6.8，6.38，这三种场景下页面展示都是不一样的表现，需要我们在开发中注意监听屏幕变化，来动态加载我们的页面，更换场景； 华为官网展示了华为Max的多屏幕操作，从前端而言：这需要我们做好不同屏幕下业务呈现的多样性，以及交互的流畅性；5G的来领，数据传输极大提升，视频下载速度会提高，html5新标签video,会迎来新的发展，视频下载和存储，以及视频播放过程中内存占用问题需要考量，以及poster的使用时机需要把握，4G和5G切换，兼容问题等。 下面是我针对华为Max做出的适配方法，仅供参考，不对之处，望大家指正 head标签中引入不同样式文件，适配不同的设备 <link rel="stylesheet" media="screen and (max-device-width:1240px)" href="max.css" /> 　　针对max可以编写不同的样式表，特殊化max的布局，减少页面的重绘重排； 使用vue、react、angular等组件化框架，可以结合框架的声明周期，我们获取设备的不同宽度，加载不同的页面组件和业务，可以友好地做到一套代码兼容多端设备；可见对于代码兼容性和拓展性依旧是我们学习和工作的重点

1.React 1.1React介绍 由Facebook开源 用于构建用户界面的 JavaScript 库 相关网站 http://www.ruanyifeng.com/blog/2015/03/react.html https://react.docschina.org/ 1.2React的特点 声明式编码（Declarative） 告诉机器你想要的是什么，让机器去实现。而无需告诉机器如何去实现 组件化编码(Component-Based) 组件：用来实现特定功能代码和资源的集合（html/css/image） 支持客户端和服务器端渲染 更高效 单向数据流 1.3为什么高效 使用虚拟DOM 用虚拟DOM映射真实DOM，新增标签的时候修改的是虚拟DOM,真实DOM不发生改变，当我们完成所有操作进行打包渲染页面时，真实DOM会发生改变，这样减少了页面渲染次数 高效DOM diff算法，最小化页面重绘（局部渲染） 2React的基本使用 2.1本地环境的搭建 引入文件 react.js：React的核心库。这个包，是专门用来创建React组件、组件生命周期等。 react-dom.js:操作DOM的扩展库。这个包，主要封装了和 DOM 操作相关的包（比如，把组件渲染到页面上）。 babel.min.js:将 JSX语法 解析为 纯JS语法代码。 本地库引入并实现第一个hello

　　 开篇 　　不想做将军的士兵不是好士兵，这句话可以有很功利的理解方式，对应到我们自己很可能是：不想做CTO的程序员不是好程序员！几年前对这句话的理解与现在有很多不同，因为我现在已经是一名中小型公司的CTO了，这句话真实的理解方式其实应该是：我们每个程序员要有远大的梦想（理想），这个涉及到我们的格局，只有格局足够高了才能走的更远，如韩信受胯下之辱而不怒为例就是，后面受委屈的时间多着呢，忍得住才能走的更远，看得到远方也就不会为如今的愁苦困扰了，所以来个佛系三连：随便吧，就这样，也可以。 　　一般来说，中小型公司（好的创业团队），研发人员基本为50-100人的配置，原则上不会让CTO统管产品、UI、运营等，如果你看见一个公司CTO会统管以上一切，很有可能他是产品出生、市场出生、运营出生、销售畜生，但就不会是技术出生，这个角色真正的称呼是COO。我这边团队大概在80人左右，也会有自己的产品，但是公司级业务都是统一的产品团队在握到手里，有时候老板是最大的产品经理，有时候市场是，更多的时候还是产品自己是，各个部门都有一个太极阴阳平衡在里面，如果这种平衡失衡的话，公司一般来说是走不远的，这里后面有章节会介绍到，这里不赘述。 　　这个是CTO并不是终点系列，大家已经可以猜到，其实后面更多的是自己工作中的一些吐槽，或者说一些经验。人嘛，都需要一个发泄总结的平台于是便拿起了我这个尘封已久的账号

今天给大家分享一个开源项目——AMS，一个由唯品会开源的，基于类json配置的管理后台前端解决方案。 背景 我们先来回顾一下，管理后台的搭建方式。 最原始的方式，前后端还未分离，前后端代码融合一起，往往是后端把整个管理后台负责了 发展到前后端分离和JQ兴起，前端可以完全手写实现，也可以使用类似bootstrap这些框架进行快速搭建 在发展到React/Vue这些MVVM框架的兴起，也产生了很多对应的配套，比如Element-ui、Ant Design 由于管理后台对UI要求不高以及功能通用，UI框架的使用给前端带来极大的方便，前端可以不需要再关心UI组件的实现，只需要把UI框架提供的组件像搭积木一样搭建，然后再去写数据交互逻辑，就可以比较快的实现一个管理后台。 这样看好像很完美，特别是用着高质量的UI框架，坑少～ 但是！积木搭久了，你会发现还是要写不少代码： UI组件代码。比如你写一个列表，拿Element-ui举例，你可能需要用到 el-table 、 el-table-column ，然后再来个分页 el-pagination 。可能90%的场景都是这样的，但是你每次都要写，即使复制，可能也要微调 搭完UI，然后要写数据逻辑交互，比如请求个列表接口，梳理接口字段，把数据塞到表格，然后处理分页时的数据交互逻辑。同理，每个项目每个列表都要这样。 上面举例的只是一个列表场景