[React最初的认识 | 青训营笔记]

76 阅读2分钟

简介

React 使用称为 JSX(JavaScript 和 XML)的 HTML-in-JavaScript 语法。用于动态构建用户界面的JavaScript库(只关注于视图)

特点

  1. 声明式编码
  2. 组件化编码
  3. React Native编写原生应用
  4. 高效(优秀的Diffing算法),最小化页面重绘
  5. 使用虚拟(virtual)DOM, 不总是直接操作页面真实DOM。

真实DOM与虚假DOM

  1. React提供了一些API来创建一种 “特别” 的一般js对象

const VDOM = React.createElement('xx',{id:'xx'},'xx')

  1. 虚拟DOM对象最终都会被React转换为真实的DOM
  2. 我们编码时基本只需要操作react的虚拟DOM相关数据, react会转换为真实DOM变化而更新界。

JSX

全称: JavaScript XML,react定义的一种类似于XML的JS扩展语法: JS + XML本质是**React.createElement(component, props, ...children)** 方法的语法糖。

JSX是js内定义的一套XML语法,可以解析出目标js代码,颠覆传统js写法。实质上HTML也是xml协议,有由浏览器解析,而JSX是由js解析。当然也可以通过构建工具先解析生成,如webpack(使用babel-loader),这样可以减少代码这行中js解析JSX的时间。JSX原本是使用reactjs官方自己提供的方法处理。ReactJS和React Native已经全部采用第三方Babel的JSX编译器实现。

模块

理解:向外提供特定功能的js程序, 一般就是一个js文件,随着业务逻辑增加,代码越来越多且复杂。

作用:复用js, 简化js的编写, 提高js运行效率。

组件

理解:用来实现局部功能效果的代码和资源的集合(html/css/js/image等等)。

作用:复用编码, 简化项目编码, 提高运行效率

  1. 组件从创建到死亡它会经历一些特定的阶段。
  2. React组件中包含一系列勾子函数(生命周期回调函数), 会在特定的时刻调用。
  3. 我们在定义组件时,会在特定的生命周期回调函数中,做特定的工作。

模块化

当应用的js都以模块来编写的, 这个应用就是一个模块化的应用