React项目总结

本文是关于创建一个React项目的记录：

项目中使用的技术栈：

react

react

dom

typescript

Agora

ali-oss

moment.js

dexie

mobx

1.config-overrides.js文件：需要在项目中配置一些webpack配置，需要在根目录下新建一个名为config-overrides.js文件。

2.react双向绑定数据中先绑定value属性，

如果是函数组件，然后在onChange里面需要写setValue。

如果是class组件，然后在onChange里面需要写setState({})

3.获取url参数的两种方式：

一是在配置路由的时候path="/home/:id",使用react-dom-router的hook函数useParams()获取到的是{id:xx}

二是使用react-dom-router的hook函数useLocation()获取到的是window.location对象。使用userLocation().search得到的是?x=xx&y=xx，

使用new URLSearchParams(userLocation().search)将window.location.search变成键值对的对象，使用new URLSearchParams(useLocation().search).get('x')获取的是键x的值。

URLSearchParams是用来解析search变成对象。

4.环境变量使用dotenv来实现，dotenv是一个零依赖的模块，它能将环境变量中的变量从.env文件加载到process.env中。process.env是node的全局变量。cross-env是解决多平台正确设置或使用环境变量。

react-app-rewired的作用：通过react的脚手架create-react-app创建项目，如果没有执行eject命令的话，是没有其他配置文件，此时，需要用到customize-cra和react-app-rewired，然后在根目录下新建一个名为

config-overrides.js文件，在此文件中进行配置。

4.Partial<数据类型>是typescript里面的高级数据，是将数据类型里面的属性变成可选。

5.js中new的作用：

(1)创建了一个空的对象{}。

(2)将空对象的__proto__指向构造函数的原型。

(3)将空对象作为构造函数的上下文(即改变this指向)。

(4)对构造函数的返回值作判断。如果构造函数返回的是简单数据类型则忽略，如果构造函数返回的是复杂数据类型则直接返回该复杂数据类型。

6.for in主要是用在object上，遍历的是object自身的属性，特点有：

(1)遍历的是可枚举的属性。

(2)非Symbol属性。

(3)顺序不定。

是用obj.hasOwnProperty(k)来判断k是自身属性还是继承来的属性，自身属性则返回true,非自身(即继承属性)则返回false。

6.map、object、arry、set的区别和关联。

Map和object的区别？

(1).obj的key是string或者symbol，Map的key可以为任意数据类型。

(2).obj的顺序是按照先数字再string来排序，不是按照push的顺序。map是按照set的顺序。

(3).Map可通过size属性获取大小。obj通过Object.keys(obj).length来获取大小。

(4).创建实例的方法不一样。

obj通过obj={};obj= new Object();obj = Object.create(原型)来创建实例。

map通过map = new Map()来创建实例。

(5).新增数据和访问数据的方法不一样。

obj中通过obj.key=value来新增一个数据，通过obj.x来访问数据。

map中通过map.set(key,value)来新增一个数据，通过map.get(key)来访问数据。

(6).删除数据的方法不一样。

obj中使用delete obj.x进行永久删除，或者使用obj.x=undefined将x赋值为undefined。Object中没有原生的delete方法,没有clear obj方法。

map中使用原生的delete方法来删除数据，map.delete(key)，删除成功则返回true，否则返回false。map.clear()来清空map。

(7).判断某一个值是否在obj和map里面不一样。

在obj中使用 x in obj，在map中使用map.has(key)来判断。

(8).map自身支持迭代，obj不支持。

typeof obj[Symbol.iterator]结果为undefined。

typeof map[Symbol.iterator]结果为function。、

让obj使用for of方法(即让obj拥有迭代器属性)：手动给obj添加迭代器：

obj[Symbol.iterator]=function(){

const _this= this;

const keys = Object.keys(this);

let index = 0;

return {

next(){

return {

value:_this[keys[index++]],

done:index>keys.length

}

}

}

}

何时使用map和obj?

(1).当要存储的是简单数据类型，key为string或者symbol时，优先使用obj,因为obj可以使用字面量来创建，更高效。

(2).当需要在单独的逻辑中访问属性或者元素的时候,使用obj。

(3).JSON直接支持obj,但不支持map。

(4).map是纯粹的hash,而obj还存在一些其他内在逻辑，所以在执行delete的时候会有性能问题，所以写入删除密集的情况应该使用map。

(5).map会按照插入的顺序保持元素的顺序，obj做不到。

(6).map在存储大量元素的时候性能表现更好，特别是在代码执行时不能确定key的类型的情况。

数组和set的区别？

(1)set是只有key的一组数据，所有元素都是唯一的，没有重复，类似数组。

(2)使用set = new Set([1,2,2])或者set = new Set()来创建。

(3)set.add(key)添加值(再加入值时，Setbuhui不会转换数据类型)，set.delete(key)删除值，set.clear()清空，set.has(key)判断某元素是否存在,使用set.keys()和set.values()和set.entries()方法来遍历。

(4)set转变为数组：Array.from(set)。

数组转变为set:new Set([1,2,2])。

7.array.find((currentValue,index,arr)=>xxx,thisValue),返回的是arr中第一个满足条件的值，若找到则停止迭代；若没找到则返回undefined。

第一个参数必需，thisValue可选(执行回调时用作this的对象)。

8.var myFile = new File(bits,name[,options])通过File()构造器创建新的File对象实例。

bits是一个包含ArrayBuffer、ArrayBufferView、Blob、或者DOMString对象的Array,或者任何这些对象的组合。

name表示文件名称或文件路径。

9.ali-oss(ali的OpenStorageService):阿里的云存储服务，即云储存服务。前端使用ali-oss对应的node平台的api。

10.moment.js:是一个用于解析、校验、操作、显示日期和时间的js工具库。

11.dexie:是IndexDB的一个最小化包装。可用来存储日志等。

12.Axios:是一个基于promise的HTTP库，可以用在浏览器和node.js中。

13.worker-loader!./log.worker:webpack的worker loader模块，作用是注册script变成web worker。

web worker的作用是为js创建多线程环境，允许主线程创建Worker线程，将一些任务分配给后者运行。在主线程运行的同时，worker线程在后台运行，两者互不干扰。

等到worker线程完成计算任务，再把结果返回给主线程。这样的好处是：一些计算密集型或高延迟的任务，被worker线程负担，主线程(通常负责ui交互)就会很流畅，不会被阻塞或拖慢。

14.mobx和mobx-react:是一套成熟的状态管理工具,mobx的核心理念是简单、可扩展的状态管理库。通过触发action,来修改observable,进而来更新observer。

(1)observable:来定义可观察者数据。定义的可观察数据，通常也是组件的状态。可观察者数据就是可以观察到数据的读取、写入,并进行拦截。原理是：在读取数据时，mobx使用getter来拦截，并记录该组件和可观察对象的依赖关系。

在被写入时，mobx使用setter进行拦截，并通知依赖它的组件重新渲染。

mobx.observable()接受一个参数，该参数可以是任意数据类型，返回一个observable类型的参数，虽然返回的参数类型变了，但是使用方法基本和原有一致(原始数据类型除外)。

Mobx可以在组件外部和组件内部定义组件状态，这样，组件逻辑和组件视图便很容易分离，兄弟组件之间的状态也很容易同步。

(2)observer:定义ReactComponent组件。

mobxReact.observer():接受一个React组件作为参数，并将其转变成响应式组件。

响应式组件：即仅当组件依赖的可观察数据发生变化时，组件才会自动响应，并重新渲染。

当可观察数据发生变化时，mobx会调用forceUpdate直接更新组件，不再需要手动使用shouldComponentUpdate进行性能优化。

(3)action:在action中，对可观察数据进行修改。

在mobx中是可以直接修改可观察对象，来进行更新组件，但不建议这么做。如果在任何地方都修改可观察数据，将导致页面状态难以管理。

mobx.action()接受一个函数为参数。

(4)computed:有缓存的需要计算的数据，如果没有改变，则从缓存中获取。

mobx-react中的MobXProviderContext核心是创建MobXProviderContext.Provider并将store传递给子孙组件，mobx-react中的MobXproviderContext需与mobx-react的Provider配合使用。

15.rtm(real-time Messaging):实时消息。Agora RTM SDK是声网提供的用于实现消息通道、呼叫、聊天、状态同步等功能的SDK。

rtc(real-time Communication):实时通信。Agora RTC SDK是声网提供的用于实现音频视频实时通信的SDK。

16.Agora相关知识点。

AgoraRTC全局模块:通过调用API建立连接，控制音视频通话和直播服务。

AgoraRTC的方法有：

(1)核心方法：

createClient:创建本地客户端;

(2)本地音视频采集：创建音视频轨道对象的方法。

createMicrophoneAudioTrack:通过麦克风创建一个音频轨道对象;

createCameraVideoTrack:通过摄像头创建一个视频轨道对象;

createMicrophoneAndCameraTracks:同时创建麦克风音频轨道对象和摄像头视频对象;

createScreenVideoTrack:通过屏幕共享创建一个视频轨道对象;

createBufferSourceAudioTrack:通过音频文件创建一个音频轨道对象;

createCustomAudioTrack:创建一个自定义的音频轨道对象;

createCustomVideoTrack:创建一个自定义的视频轨道对象;

(3)媒体设备查询：查询相关设备的方法。

getDevices:获取媒体设备列表;

getCamera:获取摄像头列表;

getMicrophone:获取麦克风列表;

getPlaybackDevices:获取音频播放设备列表;

getElectronScreenSources:获取Electron屏幕共享源列表;

(4)日志管理：管理日志，如打开、关闭、设置日志。

enableLogUpload:打开日志上传功能;

disableLogUpload:关闭日志上传功能;

setLogLevel:设置日志等级;

(5)全局事件回调：音视频采集设备状态变化事件、音频轨道自动播放失败事件。

onCameraChanged：视频采集设备状态变化回调;

onMicrophoneChanged:音频采集设备状态变化回调;

onAudioAutoplayFailed:音频轨道自动播放失败回调;

(6)其他：

checkSystemRequirements:检测浏览器兼容性;

getSupportedCodec:获取支持的编码格式;

AgoraRTC中的类：

(1)AgoraRTCClient类：AgoraRTCClient是一个本地客户端对象，代表一个通话中的本地用户;提供音视频通话的核心功能，比如

join:加入频道;

leave:离开频道;

publish:发布本地音视频轨道;

unpublish:取消发布本地音视频轨道;

subscribe:订阅远端用户的音视频轨道;

unsubscribe:取消订阅远端用户的音视频轨道;

(2)LocalTrack类：LocalTrack是是Agora Web SDK中用于定义本地音视频轨道的抽象类，可用于本地播放和发布。

派生类对象有本地音频轨道和本地视频轨道：

本地音频轨道有：

LocalAudioTrack:最基础的本地音频轨道对象，包含了基础的本地音频控制,如播放、设置音量控制，通过AgoraRTC.createCustomAudioTrack创建;

MicrophoneAudioTrack:本地麦克风音频轨道对象，比LocalTrack多一些控制麦克风的方法，通过AgoraRTC.createMicrophoneAudioTrack创建;

BufferSourceAudioTrack:通过读取音频数据源创建的本地音频轨道，比LocalAudio多一些控制音频数据源的方法，通过AgoraRTC.createBufferSourceAudioTrack创建;

本地视频轨道有：

LocalVideoTrack:最基础的本地视频轨道对象，包含了基础的本地视频控制，如播放、美颜,通过AgoraRTC.createCustomVideoTrack或者AgoraRTC.createScreenVideoTrack创建;派生自LocalTrack;

CameraVideoTrack:本地摄像头视频轨道对象，比LocalVideoTrack多了一些控制摄像头和编码参数的方法，通过调用AgoraRTC.createCameraVideoTrack创建;派生自LocalVideoTrack;

(3)RemoteTrack类：RemoteTrack是Agora Web SDK中用于定义远端音视频轨道的抽象类。

需要先调用AgoraRTCClient.subscribe订阅远端用户，然后从远端用户对象AgoraRTCRemoteUser中获取派生自RemoteTrack的RemoteAudioTrack对象和RemoteVideoTrack对象。