React作用：提供jsx的语法糖支持和Component的功能
ReactDom作用：渲染虚拟Dom和控制桌面内容
ReactDom.render(){渲染虚拟Dom,Element元素}

核心概念：组件化！
组件：创建一个构造函数，使用ES6语法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

class App extends Component{
  constructor(){  //（ES6提供方法）
    和 super()结合使用,来继承Compoent的方法
    引入护法 state 状态（数据驱动视图）
    //所有初始化属性都会存放在state
    this.state={
      count:0;
    }
  }
  xxx(){//其他自定义事件}
  '{}'在任何地方都能插值
  render(){   //（React提供方法）
    *React插入事件的方法
    '{}'大括号的用法
    <button onClick={this.clickHandler}>点我</button>
  }
  //React里面function的=>(箭头函数)写法能改变this的指向（如果用function会打印出window对象而不是App对象），call()和bind()也可以绑定this
  // 在React中 修改state 不能直接修改 必须通过调用 this.setState()当前组建提供方法
  // 数据驱动视图，当修改state的时候，数据修改如何驱动的视图？当每修改一次state后，render()方法会重新再走一次
}

01.19分分析state和生命周期的匹配与使用

小心this的指向！

09-14 02 29分 :
插值数组

入门

1. 一个核心思想——组件化


2. 两位带头大哥——react & react-dom


3. 一个基本运作方式——数据驱动视图


4. 一位神秘卧底——jsx语法


5. 三位护法——state（状态）、props（属性）、refs（实例）


6. 一群打杂小弟——生命周期

create-React-app是一个全局的命令行工具用来创建一个新的项目
react-scripts是一个生成的项目所需要的开发依赖

一般我们开始创建react应用程序的时候，要自己通过npm或者安装项目的全部依赖，再写webpack.config.js，一系列复杂的配置，搭建好开发环境后写src源代码

现在如果你正在搭建react运行环境，使用create-react-app去自动构建你的程序。你的项目所在的文件夹下是没有配置文件的。react-scripts是唯一的额外的构造依赖

在你的package.json中，你的运行环境将有每一个你需要用来构建一个现代应用程序所需要的依赖，在配置文件中编写的配置代码，React脚本都帮你写了，比如：react-scripts帮你自动下载需要的webpack-dev-server依赖，然后react脚本自己写了一个nodejs服务端的脚本代码start.js来实例化.

WebpackDevServer，并且运行启动了一个使用express的Http服务器，现在你只需要专心写SRC源代码就可以了。省去了很多精力，最适合快速上手一个演示了。

React-scripts有以下支持，都帮你配置好了：

React，JSX，ES6和Flow语法支持。

ES6之外的语言扩展像对象扩展运算符。

直接从JavaScript导入CSS和图像文件。

自动翻译CSS，所以你不需要-webkit或其他前缀。

一个构建脚本来捆绑JS，CSS，和图像进行生产，具有源代码图。

示例:

//

今天学习了react

//

这是一个h2标签

//
//
//

  // 引入一个打杂的小弟  生命周期 方法
  render(){
    // var s = 'abc'
    // {} 插值 插槽  <%= %> 插值即可以插变量 也可以插函数
    return (
      <ul>
        <li>1</li>
        <li className='li2'>{3>4 ? '真的' : '假的'}</li>
        <li>{this.say()}</li>
        <li>{111}</li>
        <li>{this.state.name}</li>
        <li>{this.state.time}</li>
      </ul>
      )
  }
}
//抛出 App
export default App;

stringify: JSON转字符串

toString: 返回原型数组 // 返回字符串

ValueOf: 输出对象

toLocalString: 格式化时间字符串

V-bind用法: 计算属性基于this依赖进行缓存

Computed 与 Method 区别: Computed基于依赖缓存; Method每次都重新计算

前端-数据双向绑定

node-爬虫

Git plugin

学习笔记 (2019年7月3日 16:06:27)

前端面试难点

1
2
3
4
5
6
7

for (var i = 0; i < 5; i++) {
    setTimeout(function() {
        console.log(new Date, i);
    }, 1000);
}

console.log(new Date, i);

输出结果(第一个5后连续输出五个5)

5 -> 5,5,5,5,5

解读：
定时器为异步宏任务，在JS解释器EventLoop事件队列最末尾。须等待同步任务、异步微任务执行完后执行。

IIFE（Immediately Invoked Function Expression：声明即执行的函数表达式）

自执行函数表达式

1
2
3
4
5
6
7

for (var i = 0; i < 5; i++) {
  ~function(j) {  // j = i
    setTimeout(function() {
        console.log(new Date, j);
    }, 1000);
  }(i);
}

解释：利用闭包解决ES5没有块级作用域问题

1
2
3
4
5
6

function output(j) {
  setTimeout(fn, j * 1000)
}
for (var i = 0; i < 5; i++) {
  output(i)
}

解释： JS 中基本类型（Primitive Type）的参数传递是按值传递（Pass by Value）的特征

Promise

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

const tasks = []; // 这里存放异步操作的 Promise
const output = i => new Promise(resolve => {
    setTimeout(() => {
        console.log(new Date, i);
        resolve();
    }, 1000 * i);
});

// 生成全部的异步操作
for (var i = 0; i < 5; i++) {
    tasks.push(output(i));
}

// 异步操作完成之后，输出最后的 i
Promise.all(tasks).then(() => {
    setTimeout(() => {
        console.log(new Date, i);
    }, 1000);
});

学习笔记(2019年7月4日 17:11:44)

promise 和 await/async 的区别

以往的异步方法无外乎回调函数和Promise。但是Async/await建立于Promise之上。

display:table-cell下两栏自适应布局demo

等高布局

发现

新建终端

ctrl+shift+~

选择使用空格缩进并配置

ctrl+k j

跳转行

ctrl+g

演练场

• Multi-Cursor Editing(多光标编辑)
  

  1. 框选择-按下Ctrl+Shift+Alt+下箭头键,Ctrl+Shift+Alt+右转,Ctrl+Shift+Alt+UpArrow,Ctrl+Shift+Alt+LeftArrow选择一个文本块,你也可以按住Shift+Alt,选择鼠标文本。
  2. 添加一个光标-按Ctrl+Alt+UpArrow或Ctrl+Alt+向下箭头,在上面或下面添加一个新的游标,你也可以用Ctrl+Click来在任何地方添加光标。
  3. 创建游标上出现的所有字符串的字符串-选择一个实例例如背景颜色和媒体未绑定。现在您可以通过简单地输入来替换所有实例。
     

• IntelliSense(智能提示)
  

  • Alt+Z/Alt+X

• Line Actions(行操作)

  1. 复制一条线,并将其插入到当前位置的上方或下方,分别使用Shift+Alt+向下箭头或Shift+Alt+UpArrow。
  2. 用Alt+UpArrow和Alt+向下箭头移动整行或选择行。
  3. 用Ctrl+Shift+K删除整个行。
     
     
  • 提示:另一个非常常见的任务是注释掉一个代码块——您可以通过按Ctrl+/来切换注释。

• Rename Refactoring(更名重构)
  

  • 可以很容易地重命名一个符号,例如函数名或变量名。在符号“Book(例子)”中按F2重命名所有实例——这将发生在项目中的所有文件中。您还可以在右键单击上下文菜单中看到重构。
  • JSDoc提示:上面的示例还展示了通过使用JSDoc注释获得智能感知提示的另一种方法。您可以通过调用Book函数并查看功能和参数的智能感知体验中增强的上下文来尝试这一点。

• Refactoring via Extraction(!通过提取重构)

  • 有时候,您希望将已经编写好的代码添加到一个单独的函数中,或者稍后再使用它。选择要提取的行并按Ctrl+.或者点击这个小灯泡,选择其中的一个提取到……选项。通过在第3行或任何其他您想要提出的通用代码中选择if-子句中的代码来尝试它。

• Formatting(格式化)

  • 如果没有良好的格式化程序,让代码看起来很棒是很困难的。幸运的是,使用Shift+Alt+F或格式化的整个文档可以用Ctrl+K Ctrl+F来应用当前的选择。这两个选项都可以通过右键单击上下文菜单获得。
  • Tip: 可在扩展库中提供其他格式化程序。格式化支持也可以通过设置来配置,例如启用编辑器。

• Code folding(代码折叠)

  • 在一个大的文件中,它通常可以用来折叠代码段以增加可读性。要做到这一点,你只需按Ctrl+Shift+[折叠代码-按Ctrl+Shift+]即可展开。折叠也可以用左边沟中的+/-图标来完成。按Ctrl+Shift+Alt+[或按Ctrl+Shift+Alt+]折叠所有部分。
  • 提示:折叠是基于缩进的,因此可以应用于所有语言。简单地缩进你的代码来创建一个可折叠的部分,你可以用Ctrl+K Ctrl+1和Ctrl+K Ctrl+5这样的快捷方式折叠一定数量的级别。

• Errors and Warnings(错误和警告)

  • 在编辑代码时,会高亮显示错误和警告。在下面的示例中,您可以看到许多语法错误。按下F8,你可以按顺序浏览它们,并看到详细的错误信息。当您纠正它们时,弯角和滚动条指示器将会更新。

• Snippets(片段)

  • 您可以通过使用片段大大加快编辑速度。简单地开始键入尝试,从建议列表和按Tab中选择trycatch来创建一个try->catch块。您的光标将被放置在文本错误,以方便编辑。如果有多个参数存在,则按Tab键跳到它。

只要父元素的posiiton设置为relative，子元素的位置就是相对于父元素的，这样设置子元素的bottom为0，即可将子元素置于父元素底部。

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

.parent{  
    position: relative;  
    width:200px;  
    height: 100px;  
    background: dodgerblue;  
}  
.content{  
    position: absolute;  
    width: 200px;  
    height: 30px;  
    background: orange;  
    bottom: 0;  
}