React核心概念与JSX

Posted 2023-01-12 滴水微澜

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, 但是不同的场景需要导入不同的ReactDom

 

React库与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 = <h2><h3>hello, ele4</h3></h2>
const ele5 = document.getElementById(\'demo\')

console.log(\'虚拟DOM\', ele4)
console.log(\'真实DOM\', ele5)
debugger

ReactDOM.render(ele2,document.getElementById(\'rootReact\'));

console.log(\'虚拟DOM\', ele4)是一个普通的JS对象，它的类型是Object

console.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\')

 

虚拟DOM

ele4：使用jsx编写的虚拟DOM

const ele4 = <h2><h3>hello, ele4</h3></h2>

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翻译成JS

ele4：使用jsx编写的虚拟DOM

通过babel转换器转换后，得到

ele3: 使用js编写的虚拟Dom

 

另外：

在html页面中的script标签里，script的type默认是js,

这里使用type="text/babel"是告诉浏览器，这块作用域用的是JSX, 并用babel进行解析。

<script type="text/babel">
    let myDom = <h1>hello tan</h1>;
    
    //将虚拟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 = <h1>"hello React !!"</h1>
ReactDom.render(p1, document.getElementById("root"))

为什么能在react脚手架项目中可以直接使用jsx, 而不能直接在js中使用jsx， 是因为create-react-app脚手架中默认加入了babel转换工具，使用@babel/preset-react做这层转换。

 

jsx注意点

1.react中的属性是驼峰命名

2.与html的标签中属性不同的情况class->className

3.如果标签中没有内容，那么可以直接/>结束

3.定义jsx时可以使用（）包裹，放置编译器自动插分号陷阱。

 

在jsx中使用js变量，其实也是在js语法糖中使用js变量。

jsx中引入js表达式时需要用，需要注意Vue中插入变量使用的是双花括号插值表达式

1.可以放表达式，不可以放if,for语句

2.jsx标签变量也可以放

3.不可以方法对象，style可以放对象

 

js表达式是什么？

是一个带返回值的变量或其他 如：

1.a
2.a+b
3.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 <h4>加载中...</h4>
   else 
    return <h4>加载完成</h4>
  

//2.三元运算符
loadData = () => 
  return loading ? <h4>加载中...</h4> : <h4>加载完成</h4>

//3.逻辑运算符
loadData = () => 
  return loading && <h4>加载中...</h4>



const container = (
    <div>
      loadData()
    </div>
)
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 = (
    <div>
        songs.map((item)=><li key=item.id>item.name</li>)
    </div>
)
ReactDom.render(container, document.getElementById("root"))

样式渲染

jsx样式设置有2种方式

1.通过style=color:"red", textAlign:"center"对象的方式设置

2.通过className="title"类名的方式设置

//样式渲染
const artile = function () 
  return <p className="title" style=color:"red", textAlign:"center">这是一篇文章</p>



const container = (
    <div>
      artile()
    </div>
)

ReactDom.render(container, document.getElementById("root"))