发表于 | 分类于

REACT基础知识复习（一）：

  1. REACT是FACE-BOOK公司开发的一款MVC版JS框架
    MVC：Model（数据层）、VIEW（视图层）、CONTROLLER（控制层）
    核心思想：通过数据的改变来影响视图的渲染（数据驱动）

  2. 基于脚手架 CREATE-REACT-APP 快速构建一个REACT工程项目结构
    自动安装REACT的核心组件：REACT/REACT-DOM
    自动安装WEBPACK，并且完成相关的配置：

    • 区分了开发环境和生产环境
    • 安装BABEL以及对应的语言解析包，可以把REACT和ES6进行编译处理
    • 安装CSS/STYLE/FILE等加载器，处理CSS等合并压缩的问题
    • 安装了ES-LINT，可以进行代码检测
    • 安装了很多的插件，可以实现JS和CSS以及HTML的分离，打包，压缩等
    • 安装了WEBPACK-DEV-SERVER，可以在开发环境下，编译后自动创建服务，打开浏览器，当代码修改后，自动保存编译，页面自动刷新渲染等

使用脚手架

1
2
3
4
5
6
7
8
把脚手架安装到全局环境下，以后应用命令操作，完成项目结构的搭建
  $ npm install create-react-app -g

创建项目结构目录
  项目名遵循NPM发包命名规范：名字只能是/^[a-z0-9_-]$/
  $ create-react-app  项目名

特点：如果当前电脑安装了YARN，创建工程目录的时候，走的是YARN安装，YARN和NPM主体相同，但是处理起来还有一定的区别，所以我们以后继续向工程中安装模块以及执行配置脚本打包编译的时候，尽可能使用YARN，不建议和NPM混用
阅读全文 »

发表于 | 分类于

JSX中的事件绑定：

1
2
3
4
5
6
7
8
9
10
render(){
   return <button className='btn btn-success'
              onClick={this.support}>
          支持</button>;
}

support(ev){
   //=>THIS:undefined（不是我们理解的当前操作的元素）
   //=>ev.target：通过事件源可以获取当前操作的元素（一般很少操作，因为框架主要是数据驱动所有DOM的改变）
}

如果能让方法中的THIS变成当前类的实例就好了，这样可以操作属性和状态等信息

1
2
3
4
5
6
7
8
9
10
render(){
   //=>THIS:实例
   return <button className='btn btn-success'
              onClick={this.support.bind(this)}>
          支持</button>;
}

support(ev){
   //=>THIS:实例
}

1
2
3
4
5
6
7
8
9
10
render(){
   //=>THIS:实例
   return <button className='btn btn-success'
              onClick={this.support}>
          支持</button>;
}

support=ev=>{
  //=>THIS:继承上下文中的THIS（实例）, 真实项目中，给JSX元素绑定的事件方法一般都是箭头函数，目的是为了保证函数中的THIS还是实例
}
阅读全文 »

发表于 | 分类于

JSX渲染机制

  1. 基于BABEL中的语法解析模块（BABEL-PRESET-REACT）把JSX语法编译为 React.createElement(…) 结构

    1
    2
    3
    4
    5
    React.createElement(
          'h1',
          {id: 'titleBox',className: 'title',style: styleObj},
          '\u73E0\u5CF0\u57F9\u8BAD' //转义字符
      );
    1. 执行React.createElement(type, props, children)，创建一个对象（虚拟DOM）
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      {
         type:'h1'
         props:{
           id:'titleBox',
           className:'title',
           style:...,
           children:'珠峰培训'   //存放的是素中的内容
         }    
         ref:null,
         key:null,
         ...
         __proto__:Object.prototype
      }
    阅读全文 »

发表于 | 分类于

React是FaceBook（脸书）公司研发的一款JS框架（MVC）

React的脚手架

React是一款框架：具备自己开发的独立思想(MVC：Model View Controller)

  • 划分组件开发
  • 基于路由的SPA单页面开发
  • 基于ES6来编写代码(最后部署上线的时候，我们需要把ES6编译成ES5 =>基于Babel来完成编译)
  • 可能用到Less/Sass等，我们也需要使用对应的插件把他们进行预编译
  • 最后为了优化性能（减少HTTP请求次数），我们需要把JS或者CSS进行合并压缩
  • …
  • webpack来完成以上页面组件合并、JS/CSS编译加合并等工作

前端工程化开发

  • 基于框架的组件化/模块化开发

  • 基于WEBPACK的自动部署

    但是配置WEBPACK是一个相对复杂的工作，我们需要自己安装很多的包，还需要自己写相对复杂的配置文件…如果我们有一个插件，基于它可以快速构建一套完整的自动化工程项目结构，那么有助于提高开发的效率 =>“脚手架”
    VUE：VUE-CLI
    REACT：CREATE-REACT-APP

create-react-app 的使用

  • $ npm install create-react-app -g
    把模块安装在全局环境下（目的：可以使用命令），MAC电脑安装的时候，前面需要加SUDO，否则没有权限
  • $ create-react-app [项目名称]
    基于脚手架命令，创建出一个基于React的自动化/工程化项目目录，和npm发包时候的命名规范一样，项目名称中不能出现：大写字母、中文汉字、特殊符号（-或者_是可以的）等
阅读全文 »

发表于 | 分类于

知识点：AJAX

async javascript and xml 异步的JS和XML

  1. 在AJAX中的异步不是我们理解的同步异步编程，而是泛指“局部刷新”，但是我们在以后的AJAX请求中尽可能使用异步获取数据（因为异步数据获取不会阻塞下面代码的执行）

  2. XML是一种文件格式（我们可以把HTML理解为XML的一种）：可扩展的标记语言，它的作用是用自己扩展的一些语义标签来存储一些数据和内容，这样存储的好处是清晰的展示出数据的结构

    1
    很久以前，AJAX刚刚兴起的时候，客户端从服务器端获取数据，服务器为了清晰的表达数据结构，都是返回XML格式的内容，当下，我们获取的数据一般都是JSON格式的内容，JSON相对于XML来说，也能清晰表达数据结构，而且访问里面数据的时候操作起来比XML更简便（但是现在某些项目中，服务器返回给客户端的数据不单纯是数据，而是数据和需要展示的结构拼接好的结果(类似于我们自己做的字符串拼接)，换句话说，是服务器端把数据和结构拼接好返回给我们，此时返回的数据格式一般都是XML格式的字符串）

AJAX操作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//=>创建AJAX实例：IE6中是不兼容的，使用的是new ActiveXObject来实现的
let xhr = new XMLHttpRequest();

//=>打开请求：发送请求之前的一些配置项
//1.HTTP METHOD 请求方式
// GET/DELETE/HEAD/OPTIONS/TRACE/CONNECT
// POST/PUT
//2.URL 向服务器端发送请求的API（Application Programming Interface）接口地址
//3.ASYNC 设置AJAX请求的同步异步，默认是异步（写TRUE也是异步），FALSE是同步，项目中都使用异步编程，防止阻塞后续代码执行
//4.USER-NAME/USER-PASS：用户名密码，一般不用
xhr.open([HTTP METHOD],[URL],[ASYNC],[USER-NAME],[USER-PASS]);

//=>3.事件监听：一般监听的都是 READY-STATE-CHANGE 事件（AJAX状态改变事件），基于这个事件可以获取服务器返回的响应头响应主体内容
xhr.onreadystatechange=()=>{
    if(xhr.readyState===4 && xhr.status===200){
       xhr.responseText;
    }
};

//=>4.发送AJAX请求：从这步开始，当前AJAX任务开始，如果AJAX是同步的，后续代码不会执行，要等到AJAX状态成功后在执行，反之异步不会
xhr.send([请求主体内容]);
阅读全文 »