React是一个用于创建用户界面(web界面和原生APP界面)的JS库,不涉及HTML和CSS ,在React框架中没有HTML和CSS 。由Facebook公司推出。
在MVVM框架中,经常会用到一个概念就是数据改变新更新虚拟DOM,再由虚拟DOM 去更新真实DOM ,这是因为虚拟DOM比真实DOM更轻
在控制台输出真实DOM和虚拟DOM对这种轻
会由明显的感受
//创建虚拟dom元素
let vchild = React.createElement(
'button',
{
title:'提交注册信息',
className:'succ'
},
'提交'
)
console.dir(vchild);
控制台输出,可以看到属性都很少
下面是真实DOM
<div id="app">
div>
<script>
let child = document.createElement('app')
console.dir(child);
script>
在控制台输出可以看到,它的属性很多
通过上面的对比,相信能够很清晰的感觉到虚拟DOM 与真实DOM 的轻重
JSX(JavaScript XML)是一种在 JavaScript 中编写可嵌入 XML/HTML 类型结构的语法扩展。它是 React 库中用于构建用户界面的核心部分。
JSX 的编译过程会将代码转换为普通的 JavaScript 对象,这些对象描述了界面的结构和行为。React 库根据这些对象来生成实际的 DOM 元素,并进行渲染。
下面是一个简单JSX示例,构建了一个购物车数量增减的小组件
let count = 5
let vchild =
{count} {/*这是一个注释*/}
//
// let parent = document.getElementById('app')
let vparent = ReactDOM.createRoot(app)
vparent.render(vchild)
render是将 React 组件渲染到指定 DOM 元素的关键方法。通过使用这个方法,你可以在你的应用程序中将 React 组件转化为可见的用户界面。
下面是一个简单的示例,通过JSX语法创建一个简单 的自定义组件,并在虚拟子元素中使用它,最后父元素使用render将组件渲染到真实页面上
<script src="./js/react.development.js">script>
<script src="./js/react-dom.development.js">script>
<script src="./js/babel.min.js">script>
<script type="text/babel">
// 创建自定义组件
function BuyCount(){
return
<button>-button>
<span>3span>
<button>+button>
div>
}
let vchild = <div>
<BuyCount />
<BuyCount>BuyCount>
div>
let vparent = ReactDOM.createRoot(app)
vparent.render(vchild)
React的数据绑定
在React 中所有的绑定都使用{}
完成,
-
内容绑定:<标签开始>{表达式}标签结束>
-
属性绑定:
-
样式绑定:
-
事件绑定:fn2(参数)}
-
双向数据绑定:涉及到hooks的使用
-
条件渲染:
-
列表渲染:{list.map((item,index)=>(
{item}))}
认识hooks(勾子)
hooks是React16.8引入的功能,它们是一组函数,允许您在函数组件中使用 React 的特性。使用 Hooks,您可以在无需编写类组件的情况下重用状态逻辑和其他 React 特性。
useState
用于在函数组件中添加和管理状态。它返回一个状态值和更新该状态值的函数,并且在组件重新渲染时保持状态不变。它是一个异步函数。
做一个简单的示例-计数器
let [count,setCount] = React.useState(0)
let f1 = function(){
setCount(count+1)
}
return (
)
在这个示例中,我们可以看到useState方法中可以解构出一个数组[变量,方法]=React.useState(初始值)
,只有在方法中变量的值发生变化时,才会被通知到React,最终在页面改变。
了解useState以后,React的数据绑定应该就比较好理解了
{/*双向数据绑定示例*/}
setAge(e.target.value)}/>
useRef
用于在函数组件中创建一个可变的引用,它返回一个可变的 ref 对象,并且在组件重新渲染时保持引用不变。用于在非受控组件中,接受组件的值。(受控组件:值由value绑定)
let r = useRef()
在提交时访问r.current.value
便能够将值取出
useEffect
副作用,辅助功能
用于React的生命周期
认识React的生命周期
-
方法1:组件挂载 + 任意数据更新 —— 迎接新数据
`useEffect( ()=>{} )`
-
方法2:组件挂载 + 依赖的数据更新 —— 迎接新数据
`useEffect( ()=>{},[数据1, ....] )`
-
方法3:组件挂载
` useEffect( ()=>{},[ ] )`
-
方法4:任意数据更新 + 组件卸载 —— 送走旧数据
`useEffect( ()=>{ return ()=>{} } )`
-
方法5:依赖的数据更新 + 组件卸载 —— 送走旧数据
`useEffect( ()=>{ return ()=>{}}, [数据1, ...] )`
-
方法6:组件卸载 —— 送走旧数据
` useEffect( ()=>{return ()=>{}}, [ ] )`
React Native
React Native 是React提供的一个用于构建移动应用程序的开源框架。它允许开发者使用 JavaScript 和 React 来创建原生的、高性能的移动应用。
与传统的原生开发方式不同,React Native 使用了一种称为"Bridge"的机制来连接 JavaScript 代码和原生代码。这样,开发者可以使用熟悉的 React 组件模型和 JavaScript 语言来构建用户界面,同时仍然能够访问原生平台的功能和特性。
RN中的可用组件
-
RN项目中禁止使用HTML标签;RNApp是原生App,底层是没有浏览器的,不能解析HTML代码;
-
RN项目中可以自定义组件
-
在RN项目中components目录下创建一个自定义组件
-
在父组件中可以直接使用
- RN项目还可以使用RN组件库中的组件
- 手册地址:https://reactnative.dev/docs/components-and-apis
RN中可用的样式
-
RN应用中没有浏览器,没有标准CSS解释器,也就不能使用标准CSS!RN模拟标准CSS实现了一套基于JS对象的样式系统。
-
RN中的样式分为三类:
-
行内样式:
-
内部样式: let ss=StyleSheet.create({danger:{color:'red'}})
-
外部样式:export let gss=StyleSheet.create({danger:{color:'red'}})
-
RN中的尺寸只有两种:% 和 px ,书写px时直接写数值就可以
-
默认字体大小14px,可以无限小
-
RN样式中没有class/className属性
-
RN中所有的复合属性都被拆分成单一属性,不再有复合值,类似与border
-
RN中的样式大多的都是可以跨平台使用的
-
style可以绑定样式组,但是只有最后一个生效,其他的样式被最后一个覆盖
-
RN中的样式没有继承特性,即父级的样式不会给到子级,但是中列外,上一级Text的样式可以传到下一级Text