世界新资讯：React核心概念与JSX

手机

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

世界新资讯：React核心概念与JSX

2023-01-11 23:06:26 来源：博客园

【资料图】

React概况React是一个只用来写HTML的UI页面的JS库，在MVC设计模式中它只相当于View，故：它并不是一个框架（MVC架构角色设计）。React组件内数据改动会自动更新到屏幕上。React项目是一个SPA单页面应用。使用create-react-app脚手架工具创建的应用会默认安装babel, webpack工具，支持ES6特性。React的特点声明式：在使用react编写UI页面的时候，编写的代码只是一种说明，说明页面长什么样子，而对于如何将这段声明描述转换成真实的页面DOM则有React框架来完成。组件化：react框架的开发是使用的组件化开发，将一个个可重复的块状UI封装成一个个组件，提供了代码的复用。学习一次到处运行：学了react, 则可以用来写Html前端页面，iOS，安卓移动端应用，VR虚拟现实等。这三种应用场景都需要导入React, 但是不同的场景需要导入不同的ReactDomReact库与React-Dom库React库：主要负责创建，管理react组件，它创建的react组件实际上是一个js对象，里面包含了要显示标签的描述说明。如：创建一个react元素对象。

// React.createElement创建的ele是一个js对象    // 第一个参数：要创建的React元素    // 第二个参数：该React元素的属性    // 第三个参数及其以后的参数：该React元素的子节点    const ele = React.createElement("h1", {id: "标题"}, "Helle React Ele");

React-Dom库：主要负责将react生成的组件，标签转换成真实的页面上的DOM元素。它主要是通过库提供的render方法进行实现ReactDOM.render

// ReactDOM.render将这个react生成的js对象，映射成真实的DOM元素并展示到屏幕上    // 第一个参数：要渲染的React元素    // 第二个参数：DOM元素，用于指定渲染到页面中的位置， 所以React创建的应用是SPA单页面应用。    ReactDOM.render(ele, document.getElementById("root"))

真实DOM与虚拟DOM

const ele3 = React.createElement("h2", {id:"title2"}, React.createElement("h3", {id:"title3"}, "hello, ele3"))const ele4 = 
hello, ele4
const ele5 = document.getElementById("demo")console.log("虚拟DOM", ele4)console.log("真实DOM", ele5)debuggerReactDOM.render(ele2,document.getElementById("rootReact"));

console.log("虚拟DOM", ele4)是一个普通的JS对象，它的类型是Objectconsole.log("真实DOM", ele5)也是一个普通的JS对象，它的类型是Object它们的区别是：console.log("虚拟DOM", ele4)因为只在React内部使用，它的方法是属性非常少，是一个很轻量的对象。console.log("真实DOM", ele5)因为是document上真实存在的对象，所以dom元素需要的属性和方法都有，所以它比较重。虚拟DOM就是使用React对象创建的ele元素如虚拟Dom对象：React.createElement("h3", {id:"title3"}, "hello, ele3")虚拟DOMele4：使用jsx编写的虚拟DOM

const ele4 = 
hello, ele4
ReactDOM.render(ele2,document.getElementById("rootReact"));

ele3: 使用js编写的虚拟Dom

const ele3 = React.createElement("h2", {id:"title2"}, React.createElement("h3", {id:"title3"}, "hello, ele3"))ReactDOM.render(ele2,document.getElementById("rootReact"));

babel转换过程将JSX翻译成JSele4：使用jsx编写的虚拟DOM通过babel转换器转换后，得到ele3: 使用js编写的虚拟Dom另外：在html页面中的script标签里，script的type默认是js,这里使用type="text/babel"是告诉浏览器，这块作用域用的是JSX, 并用babel进行解析。

<script type="text/babel">    let myDom = hello tan
;        //将虚拟DOM元素myDom, 渲染到真实DOM上去    ReactDOM.render(myDom,document.getElementById("rootReact"));</script>

使用脚手架创建项目方式一：本地全局安装reate-react-app脚手架工具

.npm install -g create-react-app  全局安装脚手架2.create-react-app --version        查看安装的版本3.create-react-app my-app           创建项目4.npm start/ yarn start             启动项目

方式二：临时使用远程reate-react-app脚手架工具npx是npm v5.2.0引入的一条指令，用于提升包内命令行工具使用体验。可以不先按照到本地而直接使用create-react-app脚手架工具。yarn是Facebook发布的包管理器，用于替代npm, 功能和npm一样。，具有快速，可靠，安全的特点。

npx create-react-app my-app           创建项目2.npm start/ yarn start             启动项目

通过使用reate-react-app脚手架创建的项目，默认已经安装了babel，所以项目已经默认支持ES6语法。如可以使用import导入方式代替require("")方式了因为react项目是SPA单页面应用，所以在使用reate-react-app脚手架创建的项目里，可以只保留index.html和index.js这两个源代码文件。其中index.html是单页面应用的根页面。index.js是react项目的入口。其中webpack编译器编译的入口就是index.js文件。最简单的react项目实现中，index.js文件这样写。

import React from "react";import ReactDOM from "react-dom";const ele = React.createElement("h1", {title: "文章的标题"}, "Hello React")ReactDOM.render(ele, document.getElementById("root"))

JSX是React的核心功能，它是声明式的体现，用JSX可以在JS中体现html结构。通过在JSX中使用JS表达式的方式，实现了React的条件渲染，列表渲染来描述UI的布局结构。React使用className或style={{}}设置样式布局, 并且React完全是利用了JS的能力，而非造轮子增强html的功能，如for循环在React中用map方法，而在Vue中使用v-for方法。JSX概况jsx : javascript xml可以理解成在js中编写html。这里写的jsx语句本质上是 React.createElement这类js语句的语法糖。p1和p2是等价的。

let p1 = React.createElement("h1",null,"hello React !!")let p2 = "hello React !!"
ReactDom.render(p1, document.getElementById("root"))

为什么能在react脚手架项目中可以直接使用jsx, 而不能直接在js中使用jsx，是因为create-react-app脚手架中默认加入了babel转换工具，使用@babel/preset-react做这层转换。jsx注意点1.react中的属性是驼峰命名2.与html的标签中属性不同的情况class->className3.如果标签中没有内容，那么可以直接/>结束3.定义jsx时可以使用（）包裹，放置编译器自动插分号陷阱。在jsx中使用js变量，其实也是在js语法糖中使用js变量。jsx中引入js表达式时需要用{}，需要注意Vue中插入变量使用的是{{}}双花括号插值表达式1.可以放表达式，不可以放if,for语句2.jsx标签变量也可以放3.不可以方法{对象}，style可以放对象{{}}js表达式是什么？是一个带返回值的变量或其他如：

1.a2.a+b3.list.map()它们在左边都可以用一个const var = 进行接收。这个接收的值是{}要展示的值

js语句是什么

js语句是什么1.if(){}2.for(){}3.switch(){}这些没有返回指定值的代码就是js语句，它们不能放到React的{}中

2.内联样式，要用style={{key:value}}3.标签首字母首字母小写，React会自动转换成对应的html标签首字母大写，React会寻找定义的组件条件渲染//1.if else表达式//2.三元运算符//3.逻辑运算符

let loading = false//条件渲染//1.if else表达式let loadData = () => {  if (loading) {    return 加载中...
  } else {    return 加载完成
  }}//2.三元运算符loadData = () => {  return loading ? 加载中...
 : 加载完成
}//3.逻辑运算符loadData = () => {  return loading && 加载中...
}const container = (          {loadData()}    
)ReactDom.render(container, document.getElementById("root"))

列表渲染1.使用map做列表映射2.list下要设置key做唯一标识, 并且这个key最好不要用index下标，防止对数据删除时造成混乱

//列表渲染const songs = [    {id:1,name:"大约在冬季"},    {id:2,name:"菊花台"},    {id:3,name:"捉泥鳅"}]const container = (            {songs.map((item)=>{item.name}
)}    
)ReactDom.render(container, document.getElementById("root"))

样式渲染jsx样式设置有2种方式1.通过style={{color:"red", textAlign:"center"}}对象的方式设置2.通过className="title"类名的方式设置

//样式渲染const artile = function () {  return 这是一篇文章
}const container = (          {artile()}    
)ReactDom.render(container, document.getElementById("root"))

关键词：逻辑运算符主要负责可以使用