作为软件设计的通则，组件的划分要满足高内聚（High Cohesion）和低搞合（LowCoupling）的原则。 高内聚指的是把逻辑紧密相关的内容放在一个组件中。用户界面无外乎内容 交互行为和样式 传统上，内容由 HTML 表示，交互行放在 JavaScript 代码文件中，样式放css 文件中定义 这虽然满足一个功能模块的需要，却要放在三个不同的文件中，这其实不满足高内聚的原则 React 却不是这样，展示内容的 JSX 、定义行为的 JavaScript代码，甚至定义样式的 css ，都可以放在一个 JavaScript 文件中，因为它们本来就是为了实现 个目的而存在的，所以说 React 天生具有高内聚的特点。 低辑合指的是不同组件之间的依赖关系要尽量弱化，也就是每个组件要尽量独立保持整个系统的低搞合度，需要对系统中的功能有充分的认识，然后根据功能点划分模块，让不同的组件去实现不同 ...

环境搭建初始化在默认已有 node 环境下，先安装脚手架： 1npm install create-react-app -g 我们在命令行中执行下面的命令： 1create-react-app first_react_app 这个命令会在当前目录下创建一个名为 first_react_app 的目录，在这个目录中会自动添加一个应用的框架，随后我们只需要在这个框架的基础上修改文件就可以开发 React应用，避免了大量的手工配置工作： 12cd first_react_appnpm start 启动项目。 第一个组件在 first-react-app 目录下包含如下文件和目录： 12345src/public/README.mdpackage.jsonnode modules/ 在开发过程中，我们主要关注 src 目录中的内容，这个目录中是所有的源代码。create-react-app 所创建 ...

一、UI 组件React-Redux 将所有组件分成两大类：UI 组件和容器组件。UI 组件有以下特征：1234567只负责 UI 的呈现，不带有任何业务逻辑没有状态（即不使用 this.state 这个变量）所有数据都由参数（this.props）提供不使用任何 Redux 的 API 下面就是一个 UI 组件的例子。 12const Title = value => <h1>{value}</h1>; 因为不含有状态，UI 组件又称为”纯组件”，即它纯函数一样，纯粹由参数决定它的值。 二、容器组件容器组件的特诊恰恰相反：12345负责管理数据和业务逻辑，不负责 UI 的呈现带有内部状态使用 Redux 的 API 如果一个组件既有 UI 又有业务逻辑，那么将它拆分成下面的结构：外面是一个容器组件，里面包了一个UI 组件。前者负责与外部 ...

一、设计思想Redux 的设计思想很简单，就两句话。 123（1）Web 应用是一个状态机，视图与状态是一一对应的。（2）所有的状态，保存在一个对象里面。 下面就是详细解释。 二、基本概念和 API2.1 StoreStore 就是保存数据的地方，你可以把它看成一个容器。整个应用只能有一个 Store。Redux 提供 createStore这个函数，用来生成 Store。12import { createStore } from 'redux';const store = createStore(fn); 上面代码中，createStore函数接受另一个函数作为参数，返回新生成的 Store 对象。 2.2 StateStore对象包含所有数据。如果想得到某个时点的数据，就要对 Store 生成快照。这种时点的数据集合，就叫做 State。 当前时刻的 State，可 ...

一、ECMAScript2016 引包import 是 ECMAScript 2016的最新语法。如果加上大括号引用一个模块： 1import {fn,fn2} from "./a.js"; 表示：用fn来接受 a 模块中的exports.fn= function(){} 用fn2来接受 a 模块中的exports.fn2=function(){} 如果一个模块是一个类，它是这么写的： 1234567891011class People{ constructor(name){ this.name = name; } sayHello(){ alert("哈哈，我是" + this.name); }}export default People; //注意这里的ECMAScript2016的暴露语法 此时引包 ...

一、webpack学习1.1 前端工程化概述在前端开发的初始阶段，开发者通常只用关心html，css，javascript。但由于 项目变得越来越大 迭代更新越来越频繁 团队合作越来越多紧密 对编程体验要求越来越高 逐步形成了很多“最佳实践”。有很多免费的工具都可以使用。这些工具都是依赖Node.js的。 包管理工具：依赖越来越复杂（实际上没有那么复杂），所以此时就利用bower和npm可以有效管理依赖。package.json文件和bower.json文件很好用，可以看见项目的后台依赖、前端依赖。 脚手架：现在的项目结构挺复杂，比如react+angular就要配半天，所以为了方便你起步，出现了yeman、slush。 前端工作流工具：比如gulp、grunt，这两个工具可以用gulp.config.js文件或者grunt.config.js文件列出清单，让这两个工具做什么， ...

表达式 ”2”+3+4 的值为？ 1A."27" B.9 C."234" D."9" //C Cookie, LocalStorage 与 SessionStorage的区别？详细解答 特性 Cookie localStorage sessionStorage 数据的生命期 一般由服务器生成，可设置失效时间。如果在浏览器端生成Cookie，默认是关闭浏览器后失效 除非被清除，否则永久保存 仅在当前会话下有效，关闭页面或浏览器后被清除 存放数据大小 4K左右 一般为5MB 同左 与服务器端通信 每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题 仅在客户端（即浏览器）中保存，不参与和服务器的通信 同左 易用性 需要程序员自己封装，源生的Cookie接口不友好 源生接口可以接受，亦可再次封装来对Object和Arr ...

一、React起步1.1 bower 的使用bower是前端界的npm。npm有npm install命令，bower也有bower install命令。用来管理、维护前端开发中的JS库的。 bower只负责前端库，nodejs的东西它不管，比如你bower拿不到mongodb的。 自定义bower的安装目录 在项目根下创建一个名为.bowerrc的文件然后 123{ "directory" : "js/lib" //指定bower安装的目录} 执行bower install react可以看到文件下载到 js 文件夹下的 lib 文件夹中了。 bower初始化 12bower init // 在git bash中执行会出错，在windows cmd 中执行此命令 会提示你输入一些基本信息，根据提示按回车或者空格即可，然后会生成一个bower.json文件，用来 ...

1. 网页生成的过程要理解网页性能为什么不好，就要了解网页是怎么生成的。 网页的生成过程，大致可以分成五步。 1、HTML代码转成DOM； 2、CSS代码转成CSSOM（CSS Object Model）； 3、结合DOM和CSSOM，生成一棵渲染树（包含每个节点的视觉信息）； 4、生成布局（layout），即将所有渲染树的所有节点进行平面合成； 5、将局部绘制（paint）在屏幕上。 这五步里面，第一步到第三步都非常快，耗时的是第四步和第五步。 “生成布局”（flow）和”绘制”（paint）这两步，合称为”渲染”（render）。 2. 重排和重绘网页生成的时候，至少会渲染一次。用户访问的过程中，还会不断重新渲染。 以下三种情况，会导致网页重新渲染。 12345修改DOM修改样式表用户事件（比如鼠标悬停、页面滚动、输入框键入文字、改变窗口大小等等） 重新渲染，就需要重新生成布局和重新 ...

老规矩，先上两张图： 浏览器第一次请求时： 浏览器后续请求时： 浏览器缓存，也就是客户端缓存，既是网页性能优化里面静态资源相关优化的一大利器，也是无数web开发人员在工作过程不可避免的一大问题，所以在产品开发的时候我们总是想办法避免缓存产生，而在产品发布之时又在想策略管理缓存提升网页的访问速度。了解浏览器的缓存命中原理，是开发web应用的基础，本文着眼于此，学习浏览器缓存的相关知识，总结缓存避免和缓存管理的方法，结合具体的场景说明缓存的相关问题。希望能对有需要的人有所帮助。 1. 浏览器缓存基本认识1.1 基本概念和优点浏览器缓存(Brower Caching)是浏览器在本地磁盘对用户最近请求过的文档进行存储，当访问者再次访问同一页面时，浏览器就可以直接从本地磁盘加载文档。 浏览器缓存的优点有： 1）减少了冗余的数据传输，节省了网费 2）减少了服务器的负担，大大提升了网站的性能 3）加快了 ...