React核心概念与JSX

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"))