React(一)——基本介绍和JSX

 

React基本介绍及js文件的引入，ReactDOM.render()渲染页面，防止XSS攻击，编程范式，JSX的使用/语法规则/注释/输出数据类型/在属性上使用表达式，JSX列表渲染及条件渲染。

1.react基本介绍

一个用于构建用户界面的JavaScript库。

1.1起源

`React` 起源于 `Facebook` 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，做出来以后，发现这套东西很好用，就在2013年5月开源了，随后越来越多人开始关注和使用 `React`，慢慢的 `React` 就成为了当前最流行的前端开发框架之一。

1.2特点

• - `React` 采用了声明式编程范式，可以更加方便的构建 `UI` 应用
• - 内部封装更加高效的与底层`DOM`进行交互的逻辑，提高性能的同时也能帮助我们更加专注于业务
• - 可以很好的接纳其它框架或库与其进行配合

1.3React 全家桶

• - `React` : 提供框架（库）核心功能，如 `组件`、`虚拟DOM` 、渲染等
• - `create-react-app` : 脚手架，提供一套用于快速 构建和打包 `React` 项目的工具
• - `react-router` : 基于 `React` 的路由库
• - `redux、react-redux` : 状态管理库

2.React的加载引入

• - 基于浏览器           

  也可以引入通过 CDN 获得 React 和 ReactDOM 的 UMD 版本：

  开发环境：

  上述版本仅用于开发环境，不适合用于生产环境。压缩优化后可用于生产的 React 版本可通过如下方式引用：

  通过 CDN 的方式引入 React，官方建议设置 crossorigin 属性，同时建议验证使用的 CDN 是否设置了 Access-Control-Allow-Origin: * HTTP 请求，这样能在 React 16 及以上的版本中有更好的错误处理体验。

  示例：

  html:

   JS:

  ReactDOM.render(
      '
  开课吧
  ',
       document.getElementById('app')
  );

  结果：发现会将整个内容以及标签全部渲染出来

  

  原因：React内部是使用innerText而不是innerHTML进行渲染（为防止XSS攻击）

  正确写法：需要使用React专属的JPX格式才可以进行渲染，且需要引入的JS使用text/babel类型及babel的JS文件，且通过babel进行渲染

  ReactDOM.render(
      
  开课吧
  ,
       document.getElementById('app')
  );

  注意：使用JPX格式进行渲染，是babel内部通过ajax去访问的页面，所以页面必须运行在服务器上才能正常访问。否则会报错：

  

  解决：如果实在VSCode编辑其中可以下载插件，live server即可； 

  2.2ReactDOM.render()方法解析

  ReactDOM.render(element, container[, callback])：

  • element：要渲染的内容
  • container：要渲染的内容存放容器（页面某个节点）
  • callback：渲染后的回调函数

  2.3XSS注入攻击

  为了有效的防止 `XSS` 注入攻击，`React DOM` 会在渲染的时候把内容（字符串）进行转义，所以字符串形式的标签是不会作为 `HTML` 标签进行处理的。

  XSS攻击示例：通过表单的innerHTML方法会可以改变HTML上的各种标签，样式，JS等，极其不安全。

  3.编程范式

  就是编程的一种模式，比较流行的一些编程范式：

  • - 命令式编程
  • - 声明式编程
  • - 函数式编程

  3.1命令式编程

  告诉计算机怎么做（How？） - 过程

  在原生JavaScript中，UI的构建是使用了命令式的编程方式来完成的。

  let shadow = this.attachShadow({mode: 'open'});
  let style = document.createElement('style');
  
  style.textContent = `span {color:red}`;
  
  let span = document.createElement('span');
  
  span.innerHTML = '我是自定义元素的内容';
  span.classList.add('cred');
  
  shadow.appendChild(style);
  shadow.appendChild(span);

  3.2声明式编程

  告诉计算机我们要什么（What？） - 结果

  如sql语句和HTML：

  SELECT * FROM `USER` WHERE `gender`='男' ORDER BY `age` DESC;

  上面的 SQL就是一个典型的声明式编程，告诉数据库，我要什么结果，至于怎么查询出来结果，排序如何实现的过程 SQL并不关心，由内部（底层）实现。

  又如以下方法(此处也包括函数式编程)：

  ['k',1,2,'k',true,'b'].filter(v => Number.isFinite(v)).map(v=>v*10).reduce((c, v)=>c + v, 0);

  3.3React.js 中的声明式 UI

  我是自定义元素的内容

  4.DOM对象与Virtual DOM

  4.1DOM 对象

  DOM：文档对象模型，把文档（一堆字符，一堆有格式的字符）中的内容解析成JS中的对象格式，并且还提供许多的方法和特性来操作这些对象，同时对这些对象的操作还会同步反馈（更新）到这些对象对应的HTML中。

  浏览器会把页面中的元素映射为 JavaScript 中的对象，在 JavaScript 中通过对这些对象的访问来获取页面中对应元素及其内容。同时，对这些对象进行某些操作，又会反馈到页面中对应的元素上面。

  但是，原生 JavaScript DOM 对象内容和结构太复杂，有很多的特性是我们平时很少用到的，而且我们对对象的操作会立即反馈到页面（渲染），影响性能。因此react使用虚拟DOM。

  html:

  console.dir(document.querySelector("#app"));

   结果：发现原生DOM对象上有其所有的属性和对应的方法。

  

  4.2虚拟 DOM

  virtual DOM，参考原生 DOM 对象构建的一个对象，它的结构足够简单，同时优化渲染逻辑，减少变化带来的渲染性能影响。

  HTML：

  JSX:

  // console.dir(document.querySelector("#app"));
  const App = (
      
  
          
  开课吧
          
  web前端高级工程师
      
  );
  console.dir(App);
  ReactDOM.render(
      App,
      document.querySelector("#app")
  );

  生成的 virtual DOM 结构如下：发现虚拟DOM下有props属性；props下面有children，children下包括所有的HTML结构；children又会有自己的props，props下依然有children，一直到最后没有内容。react后面的各种都是通过虚拟DOM进行操作。

  

  5.JSX的使用

  `JSX` 是一个基于 `JavaScript` + `XML` 的一个扩展语法。

  • - 它可以作为 `值` 使用
  • - 它并不是 `字符串`
  • - 它也不是 `HTML`
  • - 它可以配合 `JavaScript 表达式` 一起使用

  需要引入babel库，内部是通过babel库去解析引入的app.js文件，再进行渲染的。使用babel库后，网络请求根本不会去加载自己引入的app.js文件，而是通过babel库中的ajax异步去加载，并且将加载过来的文件先通过babel进行解析成JS代码，再通过浏览器渲染出来。

  js/app.js：jsx

  ReactDOM.render(
      
  开课吧
  ,
      document.getElementById('app')
  );

  引入JSX解析库：babel-standalone.js：在浏览器中处理 `JSX`

  html：

  > 注意：如果包含 `JSX` 或引入的代码中包含 `JSX` ，需要设置 `script` 标签的 `type` 属性为：`text/babel`

  const App = (
      
  
          
  开课吧
          
  web前端高级工程师
      
  );

  6.JSX语法规则

  6.1结构

  每一个独立 `JSX` 结构的顶层有且只能有一个顶级父元素

  jsx：

  // 错误
  const App = (
    
  
      
  开课吧
      
  web前端高级工程师
    
    
  第二个
  );

  // 正确
  const App = (
    
  
      
  
        
  开课吧
        
  web前端高级工程师
      
      
  第二个
    
  
  );

  6.2在JSX中嵌入表达式

  • 在 `JXS` 中可以使用{表达式}嵌入`JavaScript`表达式

  表达式：能产生值的一组代码的集合。

  • - 变量
  • - 算术运算
  • - 函数调用
  • - ……

  if,while,for等是语句，JXS中不支持语句。

  示例：

  HTML:

  JS:

  let name = "kaikeba";
  let title = "welcome to kaikeba";
  const App = (
      
  
          
  {name}
          
  {title}
      
  );
  
  ReactDOM.render(
      App,
      document.querySelector("#app")
  );

  结果：

  

  • 注意：分清楚表达式与语句的区别，if、for、while这些都是语句，JSX不支持语句。

  {if (true) {...}
   // 错误

  7.JSX语法示例

  在 `JSX` 中，表达式输出的内容类型与使用位置也有一些区别

  7.1JSX中的注释

  
      {/*注释*/}
      {/*
              多行注释
      */}
  

  7.2JSX表达式输出数据类型

  • - 字符串、数字：原样输出
  • - 数组：转成字符串。相当于使用数组.join('')，即使用空字符串而不是JS中默认的逗号连接
  • - 其它对象不能直接输出。
  • - 布尔值、空、未定义会被忽略

  数组：发现数组在JSX表达式中输出时，会以字符串形式对元素进行连接。

  let arr = [2,7,3,4];
  const App1 = (
      
  
          {/*JSX输出数据类型：数组*/}
          
  {arr}
      
  );
  
  ReactDOM.render(
      App1,
      document.querySelector("#app")
  );

  其他对象：直接输出会报错

  {/*JSX输出数据类型：其他对象*/}
  let obj = {name:'lmf',age:23};
  const App2 = (
      
  
          
  {obj}
      
  );

   

  必须先对象转为数组，再输出：

  //JSX对象不能直接输出，需要转为数组后才能输出
  let obj = { name: 'lmf', age: 23 };
  let zMouse = {
      name: '子鼠',
      gender: '男',
      skills: ['JavaScript', 'Node.js'],
      interests: ['音乐', '足球', '编程']
  };
  
  function getObj(obj){
      let arr = [];
      for(let k in obj){
      arr.push(
  {k}:{
          Array.isArray(obj[k]) ? Object.keys(obj[k]).map(item => {
              return 
  {obj[k][item]}
          }) : obj[k]
      }
  )//注意此处使用了JSX语法，所以取值必须使用{k}
      }
      return arr;
  }
  
  const AppCont = (
      
  
          
  对象转为数组输出：{Object.keys(obj).map((k, v) => { return k + ': ' + obj[k] + '; ' })}
          对象转为数组输出(先通过方法生成列表循环数组，再调用方法(注意也需要在{}中进行调用)进行显示)：
          {getObj(zMouse)}
  
          对象循环列表输出：
          {/*注意：不能使用数组作为唯一key，['JavaScript', 'Node.js']没有可作为key的，[name:'JavaScript', remark:'较难']可将arr.name或arr.remark作为唯一key*/}
          
  
              {Object.keys(zMouse).map((k) => {
                  return 
  {k}:{
                      Array.isArray(zMouse[k]) ? Object.keys(zMouse[k]).map(item => {
                          return 
  {zMouse[k][item]}
                      }) : zMouse[k]
                  }
  
              })}
          
      
  );
  
  ReactDOM.render(
      AppCont,
      document.querySelector("#app")
  );

  结果：

  

  布尔值、空、未定义会被忽略：

  {/*JSX输出数据类型：布尔值，空或未定义*/}
  const App3 = (
      
  
          true:{true}
          
  
          undefined:{undefined}
          
  
          空:{}
      
  );
  
  ReactDOM.render(
      App3,
      document.querySelector("#app")
  );

  结果：

  

  7.3在属性上使用表达式

  JSX中的表达式也可以使用在属性上，但是使用的时候需要注意

  • 当在属性中使用{}的时候，不要使用引号包含

  jsx:

  let id = 'kaikeba';

  // 错误
  const App = (
      

);

// 正确
const App = (
    

);

• JSX更偏向JavaScript， 所以对于一些特殊的属性，使用的是JavaScript中的属性名风格。如className

jsx:

// 错误
const App = (
    

);

// 正确
const App = (
    

);

• 为了更加方便的操作元素的style，针对style这个属性有特殊的处理方式。style里的多个属性是以对象形式书写

const App = (