React

用于构建用户界面的 JavaScript 库 —— 其核心功能中不涉及HTML和CSS。

其特点有三个：

1. 声明式/数据响应式
2. 组件化编程
3. 一次学习，到处编写 —— React可以创建网站、H5、WebApp、原生App

项目引入方式:

1. 脚本引入         
2. 脚手架创建     在服务器端编译/渲染

Babel

Babel：是开源社区开发的一款JS编译器，可以把浏览器不认识的JS变种（ES2022/TS/JSX等），转换为浏览器可以执行的标准JS代码。

使用得步骤

1. 

2.type="text/babel">.......

---------------------------------------------------------------------------------------------------------------------------------

获取原生父容器

var parent=document.queryselect('#app')

创建虚拟容器

var vparent=ReactDom.createRoot(parent);

//追加渲染子元素

vparent.render(btn);

JSX

JSX：JavaScript XML，使用XML语法创建JS对象的技术。这种语法本身是TS的一部分，与React没有必然的联系。

  使用JSX需要注意：

  1.语法类似于XML（严格来说不是HTML）

  2.有且只能有一个根元素，根元素下面可以有多个子/孙元素；如果根元素有多个，那就在外面再套一个父元素：<>、

  3.标签/属性名严格区分大小写

  4.标签必须闭合  

  5.因为浏览器不支持TS语法，也就不支持JSX语法；——必须使用一款TS编译器，把JSX语法转换为标准JS语句

  6.注意：JSX的本质是运行于严格模式下的React.createElement( )，是JS不是HTML！！！React项目可以不用JSX，但是使用了JSX，创建虚拟DOM元素语法会变得简单

  7.JSX语法中可以任意添加换行

  8.JSX中的注释：  {/* 注释内容 */}

  9.JSX中元素可以使用的属性与HTML标签的属性大体类似，但是有些是不同的，例如：

         HTML： class                           JSX：className

         HTML： onclick / onkeyup    JSX：onClick / onKeyUp

  10.JSX中可以执行数据绑定，不论是哪种绑定（内容绑定/属性绑定/样式绑定/事件绑定...）语法都是一样的：{ 表达式 }

         表达式}  style={表达式}  onClick={表达式}>{表达式}

         注意：React中“内容绑定”禁止绑定Object！！！“样式绑定”必须绑定一个样式Object！！！

React中自定义组件

 React中提供了两种创建自定义组件的语法：

 语法1： 函数式组件   ----获取参数为props

function ZhRating( props ){     return ☆☆☆☆☆ } let vchild =

类式组件(class component)

class Reating extends React.Component {

render(){

//this.props表示父类传的参

}

}

React中数据绑定都是通过{}  无论是样式还是属性 数字 ----属性可以不声明直接使用

通过props读取自定义组件的值

脚手架创建:    React项目只能为小写字母

下载:npm i -g create-react-app

运行脚手架工具,创建空白项目

create-react-app 项目名

npx create-react-app  项目名 -----如果没有就自动下载

---

node.js小工具 npx

JSX事件处理函数中的this  指向undefined   --------------面试

1. 可能性:this指向事件源对象       否---虚拟dom元素不能作为事件源
2. this指向class或实例               否-----类的实例方法指向另一个对象
3. this指向window                     否------babel编译后的结果处于严格模式
4. this指向undefined                  是

---

解决方案

一、箭头函数  -------箭头函数中的this指向它所在的类实例 //-------------传统函数中的this指向的为调用者

方案1：使用箭头函数(不能传参)  

f1=()=>{log(this)}

方案2:使用箭头函数(可以传参)

f1=function(){log(this)}

this.f1()}

   二、 bind-----------使用bind固定this

方案3.

f1=function(){

console.log(666)

}

方案4 使用bind固定this (生成且生成一次副本)

//语法要求:在子类构造方法中，第一句永远是调用父类的构造方法

   //面向对象基础理论:子类构造方法第一句必须是调用父类构造方法

construct(){

super()

this.f1=this.f1.bind(this)

}

f1=function(){console.log(this)}

//类组件

state={ count:8}    //只有在state中声明的数据变量才可以进行数据响应式 以对象的形式存在

通过setState进行数据改变  this.state({},()=>{})//重新更改的数据，回调函数

/*   count=6 */

//类的成员属性  记录当前变化的值

//count=3 类的普通成员不能实现 数据响应式

///只有state属性中的成员才能实现 数据响应式

//state类似于vue中的data

//在class类中数据属性以对象形式存在

///setstate 修改状态变量

state={

  count:8,

  uname:'yaya',

  age:18

}

//不可以直接修改状态变量需要通过setstate进行设置

//1）在setState中只会将state中存在相同的属性进行覆盖其他原样输出

//2）setstate是异步执行所以结果会慢一拍,可以通过回调函数进行设置输出

/* setState有两个参数 一个为操作的值       一个为回调函数 */

f1=()=>{

  this.setState({

    count:this.state.count-1

  },()=>{ //通过回调函数在修改之后，直接输出

    console.log("购买数量减少:",this.state.count);

  })

class生命周期:

第一阶段:挂载阶段

constructor()创建组件对象

render()渲染组件的内容

componentDidMount()组件完成挂载

第二阶段:更新阶段（state/props)

shouldComponentUpdate() 应该更新此组件吗   ----此周期在数据更新之前发生，所以数据还是原数据

注意:shouldComponentUpdate(newProps,newState){} 

this.state.count 为旧数据，所以想要获取新数据就可以从newstate中获取

包含了两个参数，newProps为父类传的参，newState为此组件自己所更新后的数据状态

{return true  //应该更新视图    -----------它里面的数据都会进行改变

return false  //不应该 更新视图

}

render() 重新渲染组件内容

componentDidUpdate() 组件更新完成

//组件即将卸载

  componentWillUnmount(){

console.log('组件已卸载');

  }

(难点)

函数式组件:没有状态，没有生命周期没有父类只有固定简单语法

hook：弥补不足(天然没有this)

1)钩子增加一些扩展的功能

2）每个hook函数，都必须以use开头

3）每个hook函数只能在函数式组件中进行使用、

4）hook函数只能出现在最顶层 不可被其他嵌套

React官方提供的常用钩子之一  --useState() 为组件添加状态变量

useState()

import {useState} import React

let[状态变量,修改状态变量的方法名]=useState(状态变量初始值)

udrEffect()           为组件添加生命周期

 //生命周期挂载    组件挂载+任意数据更新完成---（从无到有组件所有数据更新）

            useEffect(()=>{

              console.log('周期一 更新完成');

            })

            useEffect(()=>{

                  console.log('生命周期2  组件完成挂载+指定数据更新');

            },[count,age]) //参数2依赖列表 指定数据依赖触发

            useEffect(()=>{

                  console.log('生命周期3  只监视组件挂载');

            },[]) //如果依赖项为空，表示r不依赖任何数据，不调用

//周期4     用于监视组件数据的更新（获取旧值）和销毁--可用于执行清理操作

useEffect(()=》{

console.log(组件的挂载及更新 新值)

return()=>{

console.log('组件的任意数据(旧值)改变以及组件卸载')

}

}

）

//周期5 

useEffect(()=》{

console.log(组件的挂载及更新 新值)

return()=>{

console.log('组件的任意数据(旧值)改变以及组件卸载')

}

},[count]）//指定数据

//周期6           周期6只在卸载时进行设置更新

useEffect(()=》{

console.log(组件的挂载及更新 新值)

return()=>{

console.log('组件的任意数据(旧值)改变以及组件卸载')

}

},[]）//不指定任何数据

父组件的改变不一定会影响子组件，具体看，如果父组件卸载会影响，父组件给子组件传值

 React-native  npx create-native  项目名

列表渲染通过map映射:/* let list= emplist.map((value,i)=>{return

{value}

}) */

面试题:双向渲染

React中获取表单中的数据，两种方法

 React组件库:reactnative基于React框架移动端的一个组件 faceBook官方组件

---

//样式没有级联，不会进行继承，但有一个例外，在text中的text上可以进行设置有继承状态

//Rn中的样式只能用style属性赋值，没有class/className属性---Rn组件体系中没有任何一个属性时通用的

//写多个样式时可以通过数组形式，包含多个对象行内样式以及内部样式

//Rn中没有float、background、border、复用属性基本没有  display:只有flex和none两种选择

//RN的样式中没有选择器概念样式都时对象

//RN中的尺寸单位只有px与%  px必须省略没有rpx vw em等单位

//字体默认大小14px px要省略

//Rn中只有一个布局方式:display:flex   默认主轴为column

在多个样式下使用{[]}数组的形式包含多个样式，样式可为内部样式，行内样式，和外部样式，样式都以对象的形式进行声明定义

let style=styleSheet.create({ 属性名:{样式:'值'} })

在RN中单位只有px以及%  px必须进行省略

RN中 只有display:flex/none 布局 默认主轴为column

RN组件: 没有通用性比如 style title   ----组件中只有组件才具备innerText内容

Textinput:单行文本输入框/单行密码输入框/多行输入框

获取输入框中的内容，只能使用类似于普通react中受控组件的形式

setuname(text)}/>

  默认为false

view

text

statusBar：设置顶部状态栏状态

 

Image：使用source指定路径输入路径

//image图像   将服务器上的文件进行打包至app

//图片导入的语法  CJS/ES6/AMD/CMD

//本地图片是保存到计算机上的  无需指定尺寸

//推荐

let logo1 = require('../img/logo.png'); //CJS

import logo2 from '../img/logo.png';   //Es6

//远程图片:图片在远程服务器上，只可以通过URL地址访问  source{{uri:'地址'}} 远程图片需要手动指定宽高 否则默认为0

 uri:'https://cdn.tmooc.cn/bsfile//imgad///fff1186ad2ae4b0790825eae784cb041.jpg'}}/>

button组件:没有style属性不可以设置样式 只可在title="确定内容"项目中一般不使用，使用text代替

pressable：pressIn/pressOut/onpress/onLongpress   按压

let[btnbackground,setbtnBackground]=useState('#090')
setbtnBackground('#070')} onPressOut={()=>setbtnBackground('#090')} >
      登录
      

TouchableOpacity：触摸时修改透明度

    //activeOpacity 修改触摸时的透明度

      忘记密码

     

---

RN项目中常用的js API

1)ToastAndroid.show()吐司消息提示  ----只适用于android,

持续时间有两种:long/short  Toast.Android.show('消息提示',ToastAndroid.short)；

2）fetch() 异步请求方法

RN项目中发起异步的服务器端请求

//使用fetch发起get请求

let url=".."

//向指定url发起异步请求，等待得到响应消息

let res=await fetch(url)

//读取响应消息主体,直至读完，再进行Json解析

let data=await res.json()

//使用fetch发起post请求

let url=''

let options={

method:'POST',

headers:{'Content-Type':'application/json'},

body:JSON.stringif({k:v,k:v})

//向指定url发起异步请求，等待得到响应消息

let res=await fetch(url，options)

//读取响应消息主体,直至读完，再进行Json解析

let data=await res.json()

}

3）Alert.alert();弹出一个警告框(模态对话框)

  //弹出提示框   （模态状态框） onPress:()=>{}按压事件触发
      Alert.alert('错误','登录失败!服务端返回信息'+data.msg,[{text:'确定',onPress:()=>{}},{text:'取消'}])

4）AsyncStorage.setItem()/getItem()/removeItem()/clear()  客户端本地缓存

示例:

//保存此次登录返回的身份令牌
//如果err存在表示存储错误
AsyncStorage.setItem('userToken',data.token,err=>{
  if(err){
    Alert.alert('错误','客户端令牌存储失败',[{text:'确定'}])
  }else{
    ToastAndroid.show('令牌保存成功',ToastAndroid.LONG)
  }
})

H5:sessionStorage/localStorage   暂时存储和长期存储   --同步

uniapp:uni.setStorage()/uni.setStotageAsync()       --同步异步

RN：AsyncStorage.setItem()                               --异步

手机性能比pc差所以一般使用异步方法

路由跳转和路由导航:

浏览器应用 （h5/网页）:react-router.dom

脱离浏览器 （RN）:react-nativation

//导航按顺序显示  navigationContainer(导航容器<->路由器 )->（导航器<->路由列表）->navigator->Screen(路由)

RN项目中使用第三方模块 react-navigation 来实现路由和导航功能；   

 官网：https://reactnavigation.org/    最新版本：6.x

 使用步骤：

 ①在RN项目中安装必需的react-navigation相关模块

         npm install @react-navigation/native

         npm install react-native-screens

         npm install react-native-safe-area-context

         npm install @react-navigation/native-stack 如果需要栈式导航

         npm install @react-navigation/bottom-tabs   如果需要底部标签页式导航

 ②使用之前安装好的3GB+安卓构建环境，重新构建一遍APP安装文件

         npx  react-native  run-android

 ③在安卓模拟器中重新安装App，重新设置开发服务器的IP和端口号，重新启动App

 ④创建必需的“页面/屏幕”组件，为每一屏分配路由地址：

         //App.js

        //创建原生的栈式导航器，解构得到导航器对象和屏幕对象

          let {Navigator,Screen}=createNativeStackNavigator();

                   导航容器（类似于之前的路由器）

                                      导航器（类似于之前的路由列表）

          name类似path,component都是存放路由导入时的名称

           此处name设置标题栏

                                        屏幕（类似于之前的路由对象）

                          ......

                                        屏幕（类似于之前的路由对象）