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"))
标签:react,const,DOM,核心,app,js,React,JSX From: https://www.cnblogs.com/zhou--fei/p/17045142.html