React基础知识(一)

山人Ll
210 阅读2分钟

这是我参与8月更文挑战的第11天，活动详情查看：8月更文挑战

1. React简介

概述： 用于动态构建用户界面的 JavaScript 库(只关注于视图)

是一个将数据渲染为HTML视图的开源JavaScript库。

React解决的痛点：

  • 原生JS操作DOM繁琐、效率低（DOM-API操作UI）。
  • 使用JS直接操作DOM,浏览器会进行大量的重绘重排。
  • 原生JS没有组件化编码方案，代码复用率低。

React的特点

  • 采用组件化模式、声明式编码，提高开发效率及组件复用率。

    （声明式编码：不用什么事都亲力亲为，但要学习。/ 命令式编码：一步一步全部完成缺一不可。）

  • 使用虚拟(virtual)DOM, 不总是直接操作页面真实DOM。

    （真实DOM数据不可复用，哪怕只是改动一点也要全部重新渲染。react在真实数据与真实DOM之间加入了虚拟DOM，虚拟DOM是可以复用的，只渲染改动的地方。）

  • React Native 编写原生代码实现移动端应用

  • 高效（优秀的Diffing算法）

2. React的使用

babel可以将jsx文件转为js文件。

相关js库

  • react.js：React核心库。
  • react-dom.js：提供操作DOM的react扩展库。
  • babel.min.js：解析JSX语法代码转为JS代码的库。

引用库时，核心库在前，扩展库在后。

vscode中新建一个文件夹，在文件夹中新建js文件夹，引入上述3个库。

在新建js同级文件夹hello_react,在文件夹中新建文件hello.html，在页面中引入上述三个库。

JSX文件

  1. 全称: JavaScript XML

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

  3. 作用: 用来简化创建虚拟DOM

    1. 写法：var ele =

      Hello JSX!

    2. 注意1：它不是字符串, 也不是HTML/XML标签

    3. 注意2：它最终产生的就是一个JS对象

    4. 多行html用()包裹起来

  4. 标签名任意: HTML标签或其它标签

  5. 标签属性任意: HTML标签属性或其它

  6. 基本语法规则

    1. 遇到 <开头的代码, 以标签的语法解析: html同名标签转换为html同名元素, 其它标签需要特别解析

    2. 遇到以 { 开头的代码，以JS语法解析: 标签中的js表达式必须用{ }包含

  7. babel.js的作用

    1. 浏览器不能直接解析JSX代码, 需要babel转译为纯JS的代码才能运行

    2. 只要用了JSX，都要加上type="text/babel", 声明需要babel来处理

jsx语法规则

1.定义虚拟dom，不要写引号。

2.标签中混入JS表达式时，要用{}。

3.样式的类名指定不要用class, 要用className。

4.内联样式用style = {{ key:value }}包裹,属性名要写小驼峰。

5.虚拟DOM根标签只能有一个。

6.标签必须闭合。

7.标签首字母：

1）若小写字母开头，则将标签转为html中同名元素，若html中无该标签对应的同名元素，则报错。

2）若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错。

8.react可以帮助遍历数组，但不可以遍历对象。

能返回值的都是表达式

模块与组件、模块化与组件化的理解

模块

  1. 理解：向外提供特定功能的js程序, 一般就是一个js文件
  1. 为什么要拆成模块：随着业务逻辑增加，代码越来越多且复杂。
  1. 作用：复用js, 简化js的编写, 提高js运行效率

组件

  1. 理解：用来实现局部功能效果的代码和资源的集合(html/css/js/image等等)
  1. 为什么要用组件： 一个界面的功能更复杂
  1. 作用：复用编码, 简化项目编码, 提高运行效率

模块化

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

组件化

当应用是以多组件的方式实现, 这个应用就是一个组件化的应用。

avatar
文章
阅读
粉丝