REACT-REDUX

REACT-REDUX 是把redux进一步封装，适配react项目，让redux操作更简洁

• STORE文件夹中的内容和REDUX一模一样
• 在组件调取使用的时候可以优化一些步骤

与传统的react相比

1. 导出的不在是我们创建的组件，而是基于CONNECT构造后的高阶组件

   1	export default connect([mapStateToProps], [mapDispatchToProps])([自己创建的组件])

2. 以前我们基于SUBSCRIBE向事件池追加方法，如果容器状态信息发生改变，就会执行事件池里面的方法，达到组件重新渲染的目的；

3. REACT-REDUX帮我们优化redux的使用：“所有用到REDUX容器状态信息的组件，都会向事件池中追加一个方法，当状态信息改变，通知方法执行，把最新的状态信息作为属性传递给组件，组件的属性值改变了，组件也会重新渲染”

Provider 根组件

作用就是把创建的STORE可以供内部任何后代组件使用（基于上下文完成的）

• provider 组件中只允许出现一个子元素
• 把项目的store基于属性传递给Provider（这样后代组件中都可以方便简洁的使用这个store）
  阅读全文 »

HashRouter

1. 当前项目一旦使用HASH-ROUTER，则默认在页面的地址后面加上“#/”，也就是HASH默认值是一个斜杠，我们一般让其显示首页组件信息内容
2. HASH-ROUTER中只能出现一个子元素
3. HASH-ROUTER机制中，我们需要根据哈希地址不同，展示不同的组件内容，此时需要使用ROUTE

ROUTE

• PATH：设置匹配地址，但是默认不是严格匹配，当前页面哈希地址只要包含完整的它（内容是不变的），都能被匹配上
• PATH=’/‘ ：和它匹配的地址只有要斜杠即可（都能和它匹配）
• PATH=’/user’：“#/user/login”也可以匹配，但是“#/user2”这个无法匹配
• COMPONENT：一但哈希值和当前ROUTE的PATH相同了，则渲染COMPONENT指定的组件
• EXACT：让PATH的匹配严谨和严格一些（只有URL哈希值和PATH设定的值相等才可以匹配到）
• PATH=’/‘：“#/”匹配，但是“#/user”就不再匹配了
• STRICT
• RENDER：当页面的哈希地址和PATH匹配，会把RENDER规划的方法执行，在方法中一般做“权限校验”（渲染组件之前验证是否存在权限，不存在做一些特殊处理）

• 默认情况下，会和每一个ROUTE都做校验（哪怕之前已经有校验成功的），SWITCH组件可以解决这个问题，和SWITCH CASE一样，只要有一种情况校验成功，就不在向后校验了

redux基本概念

createStore

创建容器：需要把REDUCER传递进来

reducer作用

1. 记录所有状态修改的信息（根据标识action.type 设置修改状态）
2. 修改容器中的状态信息

参数

• state: 容器中原有的状态信息（如果第一次使用，没有原有状态，我们需要赋予一个默认值）
• action：dispatch任务派发时传递的行为对象（这个对象必有一个type属性，是操作的行为标识，REDUCER就是根据这个行为标识来识别该如何修改状态信息）

  1 2 3 4 5 6 7 8 9 10 11 12 13 14

  import {createStore} from 'redux'; let reducer = (state = {n: 0, m: 0}, action) => { switch (action.type) { case 'VOTE_SUPPORT': state = {...state, n: state.n + 1}; break; case 'VOTE_AGAINST': state = {...state, m: state.m + 1}; break; } return state;//=>只有把最新的STATE返回，原有的状态才会被修改 }; let store = createStore(reducer);

     Web开发最常用的高度就是 console.log ，虽然 console.log 占有一席之地，但很多人并没有意识到 console 本身除了基本 log 方法之外还有很多其他方法。 适当使用这些方法可以使调试更容易，更快速，更直观。

console.log()

     在console.log中除了常用的打印功能，如console.log(object)用来查看对象，也可以console.log(object,otherObject,string)这样对象和字符串都会整齐的记录下来。

     格式化功能cosnole.log(msg,values)，有点像java中的println。

1
2
3

console.log('I like %s but I do not like %s','Skittles',;pus)
// 会得到下面结果
I like Skittles but I do not like pus.

这里面用到了占位符，常见的占位符有：

• %o（字母o） 接收对象
• %s 接收字符串
• %d 小数或整数
• %c css首位占位符，后面的参数必须是css语句，用来对输出的内容进行css渲染，常见的方式有：文字样式，图片输出。

  1 2	console.log('I am a %cbutton', 'color: white; background-color: orange; padding: 2px 5px; border-radius: 2px'); // 后面的css样式 会应用在 字符串 ‘button’上，即占位符 %c 后面的内容

引言

       浏览器的内核是指支持浏览器运行的最核心的程序，分为两个部分的，一是渲染引擎，另一个是JS引擎。不同的浏览器有不同的内核，Trident（IE）、Gecko（火狐）、Blink（Chrome、Opera）、Webkit（Safari）。这里面大家最耳熟能详的可能就是 Webkit 内核了，Webkit 内核是当下浏览器世界真正的霸主。

页面加载过程

浏览器加载网页时，要经过以下几个要点：

• 浏览器根据 DNS 服务器得到域名的 IP 地址
• 向这个IP的服务器发送HTTP请求
• 服务器收到后 处理并返回HTTP请求
• 浏览器得到返回的内容

例如：在浏览器输入 https://juejin.im/timeline，然后经过 DNS 解析， juejin.im对应的 IP 是 36.248.217.149（不同时间、地点对应的 IP 可能会不同）。然后浏览器向该 IP 发送 HTTP 请求。服务端接收到 HTTP 请求，然后经过计算（向不同的用户推送不同的内容），返回 HTTP 请求，其实就是一堆 HMTL 格式的字符串，因为只有 HTML 格式浏览器才能正确解析，这是 W3C 标准的要求。

浏览器渲染过程

浏览器渲染过程大体分为如下三部分：

1. 浏览器会解析三个东西：

• 一是HTML/SVG/XHTML，HTML字符串描述了一个页面的结构，浏览器会把HTML结构字符串解析转换DOM树形结构。
• 二是CSS，解析CSS会产生CSS规则树，它和DOM结构比较像。
• 三是Javascript脚本，等到Javascript 脚本文件加载后， 通过 DOM API 和 CSSOM API 来操作 DOM Tree 和 CSS Rule Tree。

2. 解析完成后，浏览器引擎会通过DOM Tree 和 CSS Rule Tree 来构造 Rendering Tree。

• Rendering Tree 渲染树并不等同于DOM树，渲染树只会包括需要显示的节点和这些节点的样式信息。
• CSS 的 Rule Tree主要是为了完成匹配并把CSS Rule附加上Rendering Tree上的每个Element（也就是每个Frame）。
• 计算每个Frame 的位置，这又叫layout和reflow过程。
  最后通过调用操作系统Native GUI的API绘制。
  阅读全文 »