关于各方面 杂七杂八的一些内容

1.Suspense&lazy：主要解决的就是网络IO问题。网络IO问题其实就是我们现在用Redux+saga等等:

在网速非常快的时候，可设置，整个数据到达Dom，更新完毕以后再渲染 ,也可以精确控制 loading 的状态

在网速非常慢的时候，可设置，精确到单个组件的等待、以及更新，然后再渲染.

跟路由懒加载配合使用，可以理解为在组件加载完成之前的loading动画。

文档https://segmentfault.com/a/1190000020247862?utm_source=tag-newest

2.Suspense参数fallback：参数是一个提醒的字符或者是一个组件

lazy(()=>important('path')) 动态加载路由

import React, { Component, Suspense, lazy } from 'react';
let TestComp = lazy(()=>import('./test.js')) 
    <Suspense
       fallback={
        <div style={styles.container}>
         <Loading />
        </div>
       }
      >
<TestComp />
    </Suspense>

文档：https://www.jianshu.com/p/178dc2e47b2b

3.PrivateRoute：自己封装的私有路由，只有登录的用户才能访问

文档：https://www.jianshu.com/p/6c6879567466

4.react router path 中通配符:

<Route path="/hello/:name">匹配/hello/car 匹配/hello/bus

<Route path="/files/*"> 匹配/files/ 匹配/files/a 匹配/files/a/b

文档: https://blog.csdn.net/jdjh1024/article/details/78602278

5.React修改默认端口号 node_modules文件夹下 -> react-scripts文件夹下 -> scripts文件夹下 -> start.js 修改51行处

6.NavLink： 一个特殊版本的 <Link>，它会在与当前 URL 匹配时为其呈现元素添加样式属性

import { NavLink } from 'react-router-dom';

<NavLink to="/about" activeClassName="red">About</NavLink> 

参数activeClassName：路由匹配时的className,不匹配则去除 

文档：https://www.jspang.com/detailed?id=33#toc26

7.Switch:用于渲染与路径匹配的第一个子 <Route> 或 <Redirect>。

<Switch> 只会渲染一个路由(会根据路由的顺序进行匹配，如果匹配成功立即取消继续匹配),

有三个路由 path为：/:user 、/user,、空 ，URL为/user 那么三个路由全部匹配，

如果使用swith只会匹配/:user(按顺序，第一个)

文档：https://www.jspang.com/detailed?id=33#toc27 && https://www.jianshu.com/p/ed5e56994f13?from=timeline

8.Redirect路由的重定向：可以在组件中：return (<div><Redirect from="/redirect" to="/Jspangb" /></div>)中使用，

参数：from：表示来自于什么链接，也就是当链接是redirect时，

我们触发跳转命令,to：表示要跳转到的链接，这里是跳转到Jspangb的组件中。

文档：https://www.jspang.com/detailed?id=49#toc216

9.react-route中的basename的作用：增加一级导航目录：

例如：http://localhost:1717/Jspangb 现在想访问同一个页面，

但是路径变成http://localhost:1717/demo/Jspangb。

这时候就可以使用basename属性来设置。basename属性是放在标签里边的。

文档：https://www.jspang.com/detailed?id=49#toc216

10.react-route中的forceRefresh的作用：开启或者关闭React Router

如果你把forceRefresh的值设置成真，它将关闭React路由系统，而真实的去服务器端请求信息。

文档：https://www.jspang.com/detailed?id=33#toc29

11. react-route-5种路由方式：

（1）BrowserRouter：浏览器的路由方式，也是我们一直在学习的路由方式，在开发中最常使用。

（2）HashRouter：在路径前加入#号成为一个哈希值。Hash模式的好处是，再也不会因为我们刷新而找不到我们的对应路径了。

（3）MemoryRouter：不存储history，所有路由过程保存在内存里，不能进行前进后退，因为地址栏没有发生任何变化。

（4）NativeRouter：经常配合ReactNative使用，多用于移动端，以后ReactNative课程中会详细讲解。

（5）StaticRouter：设置静态路由，需要和后台服务器配合设置，比如设置服务端渲染时使用。

文档:https://www.jspang.com/detailed?id=33#toc29

12.react-route中Prompt的使用,每次路由切换时进行提示：

注：MemoryRouter路由模式，<Prompt>不起作用。

import {Prompt} from 'react-router-dom';
return ( <div> <Prompt message="残忍离开？"/></div>)

两个属性：

（1）message：用于显示提示的文本信息。

（2）when：传递布尔值，相当于标签的开关，默认是true，设置成false时，<Prompt>失效

文档：https://www.jspang.com/detailed?id=33#toc210

13 .i18n前端语言国际化（具体使用暂无） 

文档：https://react.i18next.com/latest/withtranslation-hoc

14.window.onMessage和postMessage用来解决跨页面通信，或者通过iframe嵌套的不同页面的通信的

 发送：iframe.contentWindow.postMessage("AAAAA",);
 接受：window.onMessage = （e）=>{console.log(e)}

文档：https://www.cnblogs.com/super-yu/p/9480589.html

15.react-router-withRouter的作用和使用：

（1）是将一个组件包裹进Route里面, 

然后react-router的三个对象history, location, match就会被放进这个组件的props属性中.

路由组件可以直接获取这些属性，而非路由组件就必须通过withRouter修饰后才能获取这些属性了，比如

<Route path='/' component={App}/>

App组件就可以直接获取路由中这些属性了，但是，如果App组件中如果有一个子组件Foo，

那么Foo就不能直接获取路由中的属性了，必须通过withRouter修饰后才能获取到。

（2）.withRouter是专门用来处理数据更新问题的.在使用一些redux的的connect()或者mobx的inject()，

如果依赖于路由的更新要重新渲染，会出现路由更新了但是组件没有重新渲染的情况。

这是因为redux和mobx的这些连接方法会修改组件的shouldComponentUpdate。

在使用withRouter解决更新问题的时候，一定要保证withRouter在最外层，比如

withRouter(connect(Component))

文档：https://www.jianshu.com/p/62db676ba825 && https://www.jianshu.com/p/8d3cf411a639

16.react-PropTypes的使用和作用:对组件之间传递的值进行校验

import PropTypes from 'prop-types'
someComp.propTypes = {
sendVal:PropTypes .string
}

如果校验的值有出入，则会报waring

文档：https://www.jspang.com/detailed?id=46#toc263

17react-i18next 解决项目国际化的第三方插件。（文档：https://react.i18next.com/）

18.i18next-browser-languagedetector-浏览器文本语言检测

语言检测插件，用于在浏览器中检测用户语言，并支持：

（1）cookie（设置cookie i18next = LANGUAGE）

（2）sessionStorage（设置键i18nextLng = LANGUAGE）

（3）localStorage（设置键i18nextLng = LANGUAGE）

导航器（设置浏览器语言）

（4）querystring（附加?lng=LANGUAGE到URL）

 (5) htmlTag（添加html语言标记，并在选项中传回'en';}，

 (6)  cacheUserLanguage（lng，options）

 {//选项->在选项中// // lng->当前语言传递，将在init之后和changeLanguage //上调用// //}，};

文档：https://www.nodenpm.com/i18next-browser-languagedetector/package.html

19.运算符：！！强制类型转换：转换的结果必定为boolean，不需要去猜它是null/undefined其他乱七八糟的类型

20.withTranslation 加载特定的命名空间,类似于懒加载模块的感觉

t函数（翻译）将默认设置为该名称空间，

withTranslation('ns1')(MyComponent);

在组件中进行查找：

this.props.t('key');

也可以声明多个命名空间

withTranslation(['ns1', 'ns2', 'ns3'])(MyComponent);

文档：https://react.i18next.com/latest/withtranslation-hoc

21. export {defalut} from './index.js' 默认的接口导出一个类：等于以下写法(起了个名字)：

   import index from './index.js'
   export default index ；

文档：https://es6.ruanyifeng.com/#docs/module#export-default-%E5%91%BD%E4%BB%A4

22.react-clsx的用法和用途：

一个微型（228B）实用程序，用于className有条件地构造字符串。

还可以作为模块的更快，更小的插入式替换classnames

主要时配合jss拼接使用的

23.react-ConnectedRouter:

connected-react-router是一个绑定react-router到redux的组件，

来实现双向绑定router的数据到redux store中，

这么做的好处就是让应用更Redux化，可以通过向仓库派发动作的方式实现路由跳转。

可以在action中实现对路由的操作。

每次路径发生变化时可以把最新的路径放到仓库里面，以便随时在仓库中获取。

文档：https://segmentfault.com/a/1190000022795897

24.redux-combineReducers用于 Reducer 的拆分。

你只要定义各个子 Reducer 函数，然后用这个方法，

将它们合成一个大的 Reducer

文档：http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_one_basic_usages.html

25.token无痛刷新 文档：https://www.jianshu.com/p/58f05bf13b7d

26.event.preventDefault() 方法阻止元素发生默认的行为（form表单url跳转）。

27.ReactTooltip 可实现鼠标悬停显示使用描述

文档：https://www.cnblogs.com/zizaiwuyou/p/10868410.html

28.ThemeProvider 设置组件主题

文档：https://www.cnblogs.com/Answer1215/p/7355634.html

29.gtag代码追踪和统计：

将事件数据发送到 Google Analytics（分析）、Google Ads 和 Google Marketing Platform

分析和统计用户的一些行为。

文档：https://developers.google.cn/analytics/devguides/collection/gtagjs/?hl=zh-cn

30.json() 方法接收一个 Response 流，

并将其读取完成。它返回一个 Promise，

Promise 的解析 resolve 结果是将文本体解析为 JSON。

fetch('http://xxx/xxx')
   .then((res) => {
    return res.json();
   })
   .then((res) => {
    console.log(res); //请求到的数据
   });

文档：https://developer.mozilla.org/zh-CN/docs/Web/API/Body/json

31.fetch()方法：Fetch API 提供了一个 JavaScript 接口，

用于访问和操纵 HTTP 管道的一些具体部分，例如请求和响应。

它还提供了一个全局 fetch() 方法，该方法提供了一种简单，

合理的方式来跨网络异步获取资源。

fetch('http://xxx/xxx')
   .then((res) => {
    return res.json();
   })
   .then((res) => {
    console.log(res); //请求到的数据
   });

文档：https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch

32.react-redux中的Provider和content的使用：

可以理解为把redux中的一些state或者是action单独的引入，（statesToProps/dispatchToProps）

当作当前组件的props来使用。

文档：https://www.jspang.com/detailed?id=48#toc278 && https://segmentfault.com/a/1190000015042646

33.tinymce-react富文本编辑器

文档：https://blog.csdn.net/qq_39024012/article/details/104179562 

&& https://www.cnblogs.com/helloClock/p/9488623.html

34.Immutable：immutable对象是不可直接赋值的对象，它可以有效的避免错误赋值的问题

在react中，immutable主要是防止state对象被错误赋值。

  Immutable几种方法：

  fromJS() 是最最最常用的将原生 JS 数据转换为 ImmutableJS 数据的转换方法。

  toJS（）：将一个Immutable数据转换为JS类型的数据。

  merge：浅合并，新数据与旧数据对比，旧数据中不存在的属性直接添加，就数据中已存在的属性用新数据中的覆盖

  mergeDeep：深合并，新旧数据中同时存在的的属性为新旧数据合并之后的数据

  equals：对比两个Immutable类型的数据是否相等

  使用方式类似于 JSON.parse() ，接收两个参数： json 数据和 reviver 函数

  Immutable 的几种数据类型

  OrderedSet : 有序的 Set ，根据数据的 add 进行排序。

  Stack：有序集合，支持使用unshift（）和shift（）添加和删除。

  Map：无序索引集，类似JavaScript中的Object

  Set：没有重复值的集合。

文档：https://segmentfault.com/a/1190000010676878

35.react路由 引入组件的三种方法：

1.最初的原型component={Bar}

2.匿名函数组件component={() => <Bar/>}

3.改用render避免重复创建匿名组件render={() => <Bar/>}

render形式主要是为了向路由组件里传递参数，component形式无法传递参数.

render：render={props => <AAA {...props} data1={...} data2={...} data3={...} data4={...} />}

component： <Route path="/luyou" component={luyou} />

component一般是做首页路由分发的，render是做页面跳转或组件引入的

36.normalize（规范化），前端数据格式化工具。

相信很多前端都碰到过此类问题： 后端给的api数据格式不是我想要的，

拿到数据之后还得自己遍历一次，改造成自己想要的格式，然后再使用起来。

文档：https://zhuanlan.zhihu.com/p/55984381

37.node工具之nodemon

nodemon是一种工具，可以自动检测到目录中的文件更改时通过重新启动应用程序来调试基于node.js的应用程序

实例代码：   "build:watch": "nodemon --watch src --exec npm run build --ext \"ts,vue\"",

意思就是监听src目录下的 ts/vue文件 一旦变化了 就执行：npm run build 命令

一般在插件的应用场景比较多

参考文档：https://www.jianshu.com/p/f60e14db0b4e

38.阻止事件冒泡 举例：在一个a标签内 嵌入一个div

这个div有自己的点击事件，点击这个div的时候不想让它触发a标签的跳转方法就需要阻止事件冒泡

    dom.onclick=function(e){
         e.stopPropagation();
       	  e.preventDefault();
	 }

39,react 给组件添加初始化的props

xxxxx.defaultProps = {
  xx: 112
};