公司项目中有一个关于图标库管理的需求，大致需要在页面能够动态去更改对应svg图标的大小、颜色等(这里的更改颜色限制线性图标)。在网上查找了相关资料，做了技术的预研及demo的编写，在此记录一下。

市面上的主流框架，相信作为一个前端搬砖人员，或多或少都会有所接触到。如ReactJs、VueJs、AngularJs。那么对于每个框架的使用来说其实是比较简单的，还记得上大学时候，老师曾经说过:"技术就是窗户纸，捅一捅就破了"，也就是说，任何一门技术，只要深入去研究，那么它也不再是很神秘的东西了。我个人在工作中用VueJs是...

对于市面上的一些优秀UI库，如element-ui、Ant Design React、React Material-UI等，其中每个组件的核心实现由两部分组件：属性、行为。而作为一枚程序员，你是否想过自己去进行一个UI组件库的实现呢？那么本篇文章就是从认识组件化思想开始，并逐步为大家实现一个基础的UI组件库。

在日常开发中，往往可能同时多个项目并行进行开发，功能完成开发，进行代码打包、发布的时候，可能会出现一些问题。如一个基于vue框架的前端项目，部署的环境有测试环境、线上环境，手动打包发布。由于操作失误可能导致发布到测试环境的代码发布到正式环境。所以，一套自动化打包、部署方案对于前端工程师来说，是很有必...

数据通信的方式有很多种，其中websocket就是一种用于IM的常用数据通信方式，如在线客服、QQ、微信等，或多或少都使用到了这一技术。所以了解以及掌握websocket是很有必要的

所有向服务器提交的HTTP数据，其实都是一个表单 FromData是一种容器，用于模拟表单，向服务器提交数据，有两种使用方法 创建空白FromData对象，然后向其中添加数据 将<from>标签直接转化为一个FromData对象 使用FromData 注册一个用户： {代码...} 上面的代码就简单介绍了FromData的第一种用法(创建对象的方式)，...

js原生支持，比XHR强大，易用的数据交互对象。 fetch的两个步骤 基本使用 {代码...} Response(res)对象成员 ok:是否成功 headers:响应头对象 status/statusText:状态码/状态文本 redirected:是否重定向过 {代码...} 运行结果：可以看到fetch的第一个then里面成功的回调响应对象的一些信息，哎，仔细观察，发现并没有我们...

在开发中，不可避免的需要进行数据之间的交互，而这些数据往往是通过与服务器端进行交互得到，并进行相应的处理等 传统数据通信方式总结 原生XHR对象:用起来麻烦，而且功能受限 jsonp方式:jsonp可以跨越，但本质上是在绕过同源策略的限制，会带来比较严重的安全隐患，已逐步淘汰 $.ajax:功能丰富、易用，但jQuery本身已...

第一步、基础环境 初始化 项目初始化 npm init -y 安装webpack npm i webpack 安装react npm i react react-dom -s 项目基础框架 入口文件(src/index.js) {代码...} 主组件(src/App.js) {代码...} webpack.config.js {代码...} webpack.config.js {代码...} 样式检查 {代码...} 配置自动补充css样式前缀，并设置浏览器相...

与VueJs的区别 Vue更注重视图的自动同步，使用习惯偏向前端人员 React更注重组件及其状态的管理，使用习惯偏向程序人员 React生态圈 jsx:扩展了js自身的语法，是React的基础 Flux:React的数据流组件 Redux:比Flux更加简单，易用 React-Native:用react编写原生移动应用 React-Server:服务端渲染React组件 JSX jsx是一门独...

组件的状态是一种保存、处理和使用给定组件内部信息的方法，并允许你实现其自身的逻辑。状态本身其实是JavaScript中一个简单的对象(Plain Old Java[Script] Object)，并且改变它是使组件重新进行渲染的几种方法之一。

前面有一篇文章比较详细的介绍了redux，那么这篇文章主要是对redux中的几个角色进行深入的理解。主要有以下几个部分: store action reducer combineReducers bindActionCreators 理解Store const store = createStore(reducer) store中常用的三个方法： getState()-获取state对象 dispatch(action)-当从UI上改变某个状态...

React Router 4是一组导航组件，在你的React应用程序中提供声明性路由。在这个教程中，将通过一个实际的例子来介绍React Router 4是怎样使用的。

高阶组件接收组件作为参数，返回新的组件 {代码...} 这种模式通常使用函数来实现，基本上是一个类工厂（是的，一个类工厂！）。 withTimer.js {代码...} App.js {代码...} Context API 当应用中多个组件需要使用全局状态时，这时可以使用Context API 新的 context API 主要由以下三部分组成: React.createContext 用于传...

React类似VueJs一样具有自己的生命周期，它们的生命周期都会经历三个阶段：挂载、更新、卸载，而每一个阶段都有其对应的不同的钩子函数，只有充分了解其生命周期，在进行编码的过程中才能在不同的钩子函数中做我们自己想做的事情

一般来说，当需要根据角色判断使用方式、与服务器大量交互 (例如使用 WebSocket)、视图需要从多个来源获取数据，也就是说在交互复杂、多数据源时；或者从组件的角度考虑，如果需要组件的状态广播等时需要使用。

在我们使用React来构建单页App的时候，最大的区别是，导航一个页面应用程序并不涉及到一个全新的页面。而是你的整个应用是在同一个页面进行操作的。当你加载网页内容的时候，将会变得有一点困难，困难的部分不是加载内容本身，这相对来说比较容易，而是确保单页应用的行为与用户习惯性的操作行为保存一致，更显著的是，...