2017.11.21

1.半个月不写react

img标签没闭合

React.Component写成react.Component

ReactDOM.render写成reactDOM.render

ReactDOM.render写成({})

赋类名写的class=""

2.let {desc:megumi,suki} = this.props; 基本了解了解构赋值，desc和megumi不相等所以不简写

3.transition与animation的区别

相同点：都是随着时间改变元素的属性值

不同点：transiton需要hover这种类似的事件驱动

transition强调过渡，属性的变化，属性与时间是一个三次贝塞尔曲线

animation强调流程控制，以及关键帧的变化

4.flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。

如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

10年后老阮不会拿这个侵权来敲诈我10个yi吧？

5.两种三栏布局吧：flex和BFC

* {            margin: 0;            padding: 0;        }        .harem {            display: flex;        }        .megumi {            width: 100px;            /* flex:0 1 100px; */            height: 300px;            background-color:#6cf;        }        .eriri {            flex:1;            height: 300px;            background-color:lightgoldenrodyellow;        }        .utaha {            width: 150px;            /* flex:0 1 150px; */            height: 300px;            background-color:wheat;        }

BFC

.megumi {            float: left;            width: 200px;            height: 300px;            background-color:#6cf;        }        .utaha {            float: right;            width: 200px;            height: 300px;            background-color:wheat;        }        .harem {            height: 300px;            overflow: hidden;            background-color:lightgoldenrodyellow;        }

它们的html

<div class="harem">        <div class="megumi"></div>        <div class="eriri"></div>        <div class="utaha"></div>    </div>

6.什么是BFC？

 Block Formatting Context，块级格式化范围，一个独立的作用域。

如何形成一个bfc：

1.float的值不为none（float有left，right，none，inherit四个取值）

2.overflow的值不为visible（overflow有hidden，visible，scroll，auto，inherit）

3.display的值为table-cell，table-caption，inline-block三选一

4.position的值不为static或relative（position有static，relative，absolute，fixed）

7.浏览器渲染页面原理

http://www.jianshu.com/p/a32b890c29b1，作者齐修_qixiuss，简书的

百度一下也有好几个其他讲这个的，等以后到达这一步再来研究，现在只需要懂浏览器渲染的五个步骤：

JavaScript=>css(计算样式)=>layout(布局)=>paint(绘制)=>composite;

JavaScript：JavaScript实现动画效果，DOM元素操作等。
Style（计算样式）：确定每个DOM元素应该应用什么CSS规则。
Layout（布局）：计算每个DOM元素在最终屏幕上显示的大小和位置。由于web页面的元素布局是相对的，所以其中任意一个元素的位置发生变化，都会联动的引起其他元素发生变化，这个过程叫reflow。
Paint（绘制）：在多个层上绘制DOM元素的的文字、颜色、图像、边框和阴影等。
Composite（渲染层合并）：按照合理的顺序合并图层然后显示到屏幕上。

8.从输入URL到页面加载发生了什么?

https://segmentfault.com/a/1190000006879700  sf上的，现在看不进去了也看不懂，先标记下

9.MVVM简述

转自老阮

一、MVC

MVC模式的意思是，软件可以分成三个部分。

• 视图（View）：用户界面。
• 控制器（Controller）：业务逻辑
• 模型（Model）：数据保存

各部分之间的通信方式如下。

1. View 传送指令到 Controller
2. Controller 完成业务逻辑后，要求 Model 改变状态
3. Model 将新的数据发送到 View，用户得到反馈

所有通信都是单向的。

二、互动模式

接受用户指令时，MVC 可以分成两种方式。一种是通过 View 接受指令，传递给 Controller。

另一种是直接通过controller接受指令。

三、实例：Backbone

实际项目往往采用更灵活的方式，以 Backbone.js 为例。

1. 用户可以向 View 发送指令（DOM 事件），再由 View 直接要求 Model 改变状态。

2. 用户也可以直接向 Controller 发送指令（改变 URL 触发 hashChange 事件），再由 Controller 发送给 View。

3. Controller 非常薄，只起到路由的作用，而 View 非常厚，业务逻辑都部署在 View。所以，Backbone 索性取消了 Controller，只保留一个 Router（路由器） 。

四、MVP

MVP 模式将 Controller 改名为 Presenter，同时改变了通信方向。

1. 各部分之间的通信，都是双向的。

2. View 与 Model 不发生联系，都通过 Presenter 传递。

3. View 非常薄，不部署任何业务逻辑，称为"被动视图"（Passive View），即没有任何主动性，而 Presenter非常厚，所有逻辑都部署在那里。

五、MVVM

MVVM 模式将 Presenter 改名为 ViewModel，基本上与 MVP 模式完全一致。

唯一的区别是，它采用双向绑定（data-binding）：View的变动，自动反映在 ViewModel，反之亦然。Angular 和 Ember 都采用这种模式。

10.http协议

https://www.cnblogs.com/ranyonsue/p/5984001.html