react补充
Additional react
Published: 2020-12-22

总结了setState两种写法、lazyLoad、State Hook、Effect Hook、Ref Hook、Fragment、Context、组件优化、render props、错误边界等

Code in GitHub: react2021

1. setState

setState更新状态的2种写法

	(1). setState(stateChange, [callback])------对象式的setState
            1.stateChange为状态改变对象(该对象可以体现出状态的更改)
            2.callback是可选的回调函数, 它在状态更新完毕、界面也更新后(render调用后)才被调用
					
	(2). setState(updater, [callback])------函数式的setState
            1.updater为返回stateChange对象的函数。
            2.updater可以接收到state和props。
            4.callback是可选的回调函数, 它在状态更新、界面也更新后(render调用后)才被调用。
总结:
		1.对象式的setState是函数式的setState的简写方式(语法糖)
		2.使用原则：
				(1).如果新状态不依赖于原状态 ===> 使用对象方式
				(2).如果新状态依赖于原状态 ===> 使用函数方式
				(3).如果需要在setState()执行后获取最新的状态数据, 
					要在第二个callback函数中读取

第二种方法中还能接收到props：

image-20201220221420182

第二种方法也能传回调函数：

image-20201220221728761

2. lazyLoad

路由组件的lazyLoad

	//1.通过React的lazy函数配合import()函数动态加载路由组件 ===> 路由组件代码会被分开打包
	const Login = lazy(()=>import('@/pages/Login'))
	
	//2.通过<Suspense>指定在加载得到路由打包文件前显示一个自定义loading界面
	<Suspense fallback={<h1>loading.....</h1>}>
        <Switch>
            <Route path="/xxx" component={Xxxx}/>
            <Redirect to="/login"/>
        </Switch>
    </Suspense>

3. Hooks

1. React Hook/Hooks是什么?

(1). Hook是React 16.8.0版本增加的新特性/新语法
(2). 可以让你在函数组件中使用 state 以及其他的 React 特性

2. 三个常用的Hook

(1). State Hook: React.useState()
(2). Effect Hook: React.useEffect()
(3). Ref Hook: React.useRef()

3. State Hook

(1). State Hook让函数组件也可以有state状态, 并进行状态数据的读写操作
(2). 语法: const [xxx, setXxx] = React.useState(initValue)  
(3). useState()说明:
        参数: 第一次初始化指定的值在内部作缓存
        返回值: 包含2个元素的数组, 第1个为内部当前状态值, 第2个为更新状态值的函数
(4). setXxx()2种写法:
        setXxx(newValue): 参数为非函数值, 直接指定新的状态值, 内部用其覆盖原来的状态值
        setXxx(value => newValue): 参数为函数, 接收原本的状态值, 返回新的状态值, 内部用其覆盖原来的状态值。这种函数的写法跟setState一样

useState()中参数：第一次初始化指定的值在内部做缓存的解释：

image-20201221212710736

当我们点击按钮+1的时候他是会重绘页面的，也就是会重新调用上面这个函数，那问题来了，每次调用函数都会执行一次React.useState(0)，这样会不会导致count又被初始化成0呢？答案是不会的，react在内部做了处理，将第一次初始化的值在内部做了缓存

那有两种以上的state需要维护的时候怎么办呢？

image-20201221213210695

很简单，写两个React.useState()

4. Effect Hook

(1). Effect Hook 可以让你在函数组件中执行副作用操作(用于模拟类组件中的生命周期钩子)
(2). React中的副作用操作:
        发ajax请求数据获取
        设置订阅 / 启动定时器
        手动更改真实DOM
(3). 语法和说明: 
        useEffect(() => { 
          // 在此可以执行任何带副作用操作
          return () => { // 在组件卸载前执行
            // 在此做一些收尾工作, 比如清除定时器/取消订阅等
          }
        }, [stateValue]) // 如果指定的是[], 回调函数只会在第一次render()后执行
    
(4). 可以把 useEffect Hook 看做如下三个函数的组合
        componentDidMount()
        componentDidUpdate()
    	componentWillUnmount()

useEffect()有第二个参数，如果不写：

image-20201221214340457

默认监控所有参数，所有参数中哪怕有一个变了，就给调用这个useEffect

如果写一个空数组（就相当于componentDidMount）：

image-20201221214456293

那就谁也不监控，那useEffect只调用启动页面时的那一次

如果写了一点东西在数组里面（就相当于componentDidUpdate）：

image-20201221214553056

我只监测count这个变量，count一发生变化就调用useEffect

那有没有相当于componentWillUnMount的用法呢？

有的！

image-20201221215151076

上图红色函数返回的那个函数其实就相当于componentWillUnMount

具体调用：

image-20201221215328378

直接return一个函数，这个return的函数其实就是componentWillUnMount的钩子

5. Ref Hook

(1). Ref Hook可以在函数组件中存储/查找组件内的标签或任意其它数据
(2). 语法: const refContainer = useRef()
(3). 作用:保存标签对象,功能与React.createRef()一样

6. react-router新钩子

  • useHistory
  • useLocation
  • useParams
  • useRouteMatch

具体内容参考博客：https://www.asni.cn/2572

4. Fragment

使用

<Fragment><Fragment>
<></>

如果要用于遍历，我们知道react中遍历必须要传一个key，那就得用Fragment：

image-20201221220517624

Fragment里面是可以传入key的，但是注意：除了key，别的都不能传，那是因为Fragment到最后变成真实DOM的时候react会帮我们去掉他，但是有可能有遍历Fragment的需求啊，用到遍历就必须要传一个key进去，所以Fragment传key是可以的，传别的参数会报错

如果内部的东西简单，或者用不着遍历，可以直接写空标签：

image-20201221220813108

但是注意：空标签什么参数都传不了，连key也不行，这是与Fragment的区别，因此如果需要遍历的话，用空标签就不行了

作用

可以不用必须有一个真实的DOM根标签了

5. Context

输出某个组件的实例对象：

image-20201222205711420

里面的context就是我们要用的

理解

一种组件间通信方式, 常用于【祖组件】与【后代组件】间通信

使用

1) 创建Context容器对象：
	const XxxContext = React.createContext()  
	
2) 渲染子组时，外面包裹xxxContext.Provider, 通过value属性给后代组件传递数据：
	<xxxContext.Provider value={数据}>
		子组件
    </xxxContext.Provider>
	有点类似react-redux中的<Provider>标签（在Provider标签中传入state，就能将state传给App以及App的所有子组件）
    
3) 后代组件读取数据：

	//第一种方式:仅适用于类组件 
	  static contextType = xxxContext  // 声明接收context
	  this.context // 读取context中的value数据
	  
	//第二种方式: 函数组件与类组件都可以
	  <xxxContext.Consumer>
	    {
	      value => ( // value就是context中的value数据
	        要显示的内容
	      )
	    }
	  </xxxContext.Consumer>

image-20201222210639522

操作就是首先React.createContext()创建Context对象，取出其中的Provider，然后像上图这样使用。之后B组件及其后代都可以使用username这个变量了

那后代怎么收呢？

image-20201222211029000

首先必须声明该组件想要使用创建的Context，如上图，声明之后使用this.context即可收到

还需要注意的是：

image-20201222211235301

这个value是固定的，必须写value，写别的不好使

传多个参数：

image-20201222211351428

上面是类组件，如果是函数组件呢？

那就需要再从创建的Context中取出Consumer：

image-20201222211806158

image-20201222211838269

这里的value就是传给Provider的value，使用Consumer之后直接从value中取就行了

注意

在应用开发中一般不用context, 一般都用它的封装react插件

6. 组件优化

Component的2个问题

  1. 只要执行setState(),即使不改变状态数据, 组件也会重新render() ==> 效率低

  2. 只当前组件重新render(), 就会自动重新render子组件，纵使子组件没有用到父组件的任何数据 ==> 效率低

效率高的做法

只有当组件的state或props数据发生改变时才重新render()

原因

Component中的shouldComponentUpdate()总是返回true

解决

办法1: 
    重写shouldComponentUpdate()方法
    比较新旧state或props数据, 如果有变化才返回true, 如果没有返回false
办法2:  
    使用PureComponent
    PureComponent重写了shouldComponentUpdate(), 只有state或props数据有变化才返回true
    注意: 
        只是进行state和props数据的浅比较, 如果只是数据对象内部数据变了, 返回false  
        不要直接修改state数据, 而是要产生新数据
项目中一般使用PureComponent来优化

使用shouldComponentUpdate()钩子实例：

image-20201222213830055

这种写法适用于维护的state或者props中只有少数几个变量的时候，那手写shouldComponentUpdate()是可以的，但是一般情况下维护的变量个数都有好几个，因此一般情况下就直接使用PureComponent

image-20201222214224831

将Component换成PureComponent：

image-20201222214310011

PureComponent已经帮我们写完了shouldComponentUpdate()中的判断，不需要我们手写了

但是PureComponent仍旧存在一些小问题：

如果我们setState这么写：

image-20201222214602493

这样的setState就会失效

那是因为PureComponent底层做了一个浅对比，之前this.setState({carName: “xxx”})的时候传进去的对象跟state中维护的对象地址都不一样的，是两个对象，但是上图中obj先拿到了state的引用地址，之后调用this.setState的时候仍旧将obj这个对象放进去了，因此这里传入的对象地址跟state的对象地址就是同一个，由于PureComponent底层是浅对比，因此他会认为这两个对象没区别，就会跳过更新了（shouldComponentUpdate()阀门返回false）

同理，下面这种情况也是不行的：

image-20201222215613082

应该这么写：

image-20201222215655014

7. render props

如何向组件内部动态传入带内容的结构(标签)?

Vue中: 
    使用slot技术, 也就是通过组件标签体传入结构  <A><B/></A>
React中:
    使用children props: 通过组件标签体传入结构
    使用render props: 通过组件标签属性传入结构,而且可以携带数据，一般用render函数属性

children props

<A>
  <B>xxxx</B>
</A>
{this.props.children}
问题: 如果B组件需要A组件内的数据, ==> 做不到

之前我们是怎么确认父子关系的？

A里面用到B了，那B就是A的儿子

其实除了这种确认父子，还有一种情况可以确认父子：

首先还是A和B，一开始不知道A和B啥关系，直到我们在A的父亲里面写了这个东西：

image-20201222220906195

注意，光写上图红框框中的还不够，A中还得调用B，B才能render出来：

image-20201222220955565

为什么在children中能找到B呢？

那是因为A的标签体中写了B：

image-20201222221030819

那问题来了，这个时候的A怎么向B中传递数据？

使用render props

render props

<A render={(data) => <C data={data}></C>}></A>
A组件: {this.props.render(内部state数据)}
C组件: 读取A组件传入的数据显示 {this.props.data}

首先其实除了上面两种确认父子关系的方法，还存在第三种方法：

<A render={() => <B/>} />

这么写之后只需在A中拿到render函数并调用render()也可以渲染B，并且B就是A的儿子

这样其实就可以实现传参了：

image-20201222221425862

这就解耦了！！

下次把B换成C，直接实现AC父子，不需要再去A的代码里面改东西了！！

这就跟vue的插槽技术很像，先预留一个位置，到时候放什么都可以

8. 错误边界

image-20201222222748098

子组件出问题保证父组件可以加载，此时的子组件可以写一些别的东西，比方说网络繁忙之类的，而不是整个页面报错

这个时候就需要使用错误边界了

注意，错误边界需要在会发生错误的组件的父组件里面做

理解：

错误边界(Error boundary)：用来捕获后代组件错误，渲染出备用页面

特点：

只能捕获后代组件生命周期产生的错误，不能捕获自己组件产生的错误和其他组件在合成事件、定时器中产生的错误

使用方式：

getDerivedStateFromError配合componentDidCatch

// 生命周期函数，一旦后台组件报错，就会触发
static getDerivedStateFromError(error) {
    console.log(error);
    // 在render之前触发
    // 返回新的state
    return {
        hasError: true,
    };
}

componentDidCatch(error, info) {
    // 统计页面的错误。发送请求发送到后台去
    console.log(error, info);
}

当parent的子组件出现错误的时候，会触发getDerivedStateFromError的调用，并携带错误信息

image-20201222223445611

父组件需要维护一个错误信息变量来接受从getDerivedFromError传过来的error

接到数据之后，怎么用就是我们的事了：

image-20201222223608638

注意！！！

错误边界只能在生产模式下使用，开发模式用不了

还有一点：

image-20201222224554027

他捕获的是生命周期产生的错误，别的错误是捕获不了的

render显然是生命周期函数，所以对于render产生的错误，是可以捕获的

但是像这种：

image-20201222224504323

这个test函数显然不是生命周期中的函数，因此对于test产生的错误就捕获不到

componentDidCatch

image-20201222224228461

渲染的时候子组件出了问题，就会调用componentDidCatch这个生命周期钩子

一般我们在里面给后台发送信息，用于提醒编码人员修改bug

9. 组件通信方式总结

组件间的关系：

  • 父子组件
  • 兄弟组件（非嵌套组件）
  • 祖孙组件（跨级组件）

几种通信方式：

    1.props：
        (1).children props
        (2).render props
    2.消息订阅-发布：
        pubs-sub、event等等
    3.集中式管理：
        redux、dva等等
    4.conText:
        生产者-消费者模式

比较好的搭配方式：

    父子组件：props
    兄弟组件：消息订阅-发布、集中式管理
    祖孙组件(跨级组件)：消息订阅-发布、集中式管理、conText(开发用的少，封装插件用的多)

10.如何修改项目启动端口号

  • 法一

    暴露webpack配置，然后在里面改

  • 法二

    修改start脚本

    示例：

    "start":"react-scripts start"
改为：
"start": "set PORT=9000 && react-scripts start"

  • 法三

    项目根目录新建.env文件

    修改项目启动端口时，在.env文件写入：

    PORT=8080

11..env文件配置全局环境变量

项目根目录新建.env文件配置全局环境变量

关于文件名：必须以如下方式命名，不要乱起名，也无需专门手动控制加载哪个文件

.env 全局默认配置文件，不论什么环境都会加载合并

.env.development 开发环境下的配置文件

.env.production 生产环境下的配置文件

修改项目启动端口时，在.env文件写入：

PORT=8080

如果是vue项目，则属性名必须以VUE_APP_开头，比如：VUE_APP_XXX

.env：

image-20210721215323939

.env.development：

image-20210721215638856

关于文件的加载：

根据启动命令vue会自动加载对应的环境，vue是根据文件名进行加载的，所以上面说“不要乱起名，也无需专门控制加载哪个文件”

比如执行npm run serve（具体看启动脚本）命令，会自动加载.env.development文件

启动项目后我们打印一下全局属性：

console.log(process.env) // process的介绍在JavaScript -senior中

image-20210721215918264

可见NODE_ENV被改为了"development"，覆盖掉了.env中的全局属性

.env中的全局属性NODE_ENV、VUE_APP_URL被覆盖，

.env中的全局属性VUE_APP_PREVIEW、VUE_APP_DEFAULT_PARAM被保留

12.使用react-app-rewired和customize-cra修改webpack的基本配置

antd全局引入及按需引入

antd中js代码一般是具备tree shaking的，css存在全局引入和按需引入两种

全局引入就是按照antd官网的做法把所有css引入：

import 'antd/dist/antd.css';

按需引入在GitHub的react2021仓库中有示例代码，具体步骤为：

首先根目录创建config-overrides.js，然后在文件中写入：

const path = require('path')
const {
  override,
  fixBabelImports,
  addLessLoader
} = require('customize-cra')

module.exports = override(
  // 配置antd按需加载
  fixBabelImports('import', {
      libraryName: 'antd',
      libraryDirectory: 'es',
      style: true
  }),
  // 配置antd自定义主题
  addLessLoader({
      lessOptions: {
          javascriptEnabled: true,
          modifyVars: { '@primary-color': 'green' }
      }
  })
)

更多介绍请看博客：https://blog.csdn.net/weixin_46398902/article/details/104505491

然后在package.json配置文件中修改：

"scripts": {
-   "start": "react-scripts start",
+   "start": "react-app-rewired start",
-   "build": "react-scripts build",
+   "build": "react-app-rewired build",
-   "test": "react-scripts test",
+   "test": "react-app-rewired test"
}

配置项目路径映射

  • 法一

    用到的工具包跟上面antd按需引入一样，首先根目录创建config-overrides.js，然后在文件中写入：

    const path = require('path')
const {
  override,
  addWebpackAlias,
  addDecoratorsLegacy,
  fixBabelImports,
  addLessLoader,
} = require('customize-cra')
  
module.exports = override(
  // 配置装饰器。使用的时候就可以 @高阶组件 || @高阶组件(参数)
  addDecoratorsLegacy(),
  // 配置路径映射
  addWebpackAlias({
    '@': path.resolve(__dirname, 'src'),
  }),
  // 配置antd按需加载
  fixBabelImports('import', {
      libraryName: 'antd',
      libraryDirectory: 'es',
      style: true
  }),
  // 配置自定义主题
  addLessLoader({
      lessOptions: {
          javascriptEnabled: true,
          modifyVars: { '@primary-color': 'green' }
      }
  })
)

    更多介绍请看博客：https://blog.csdn.net/weixin_46398902/article/details/104505491

    然后在package.json配置文件中修改：

    "scripts": {
-   "start": "react-scripts start",
+   "start": "react-app-rewired start",
-   "build": "react-scripts build",
+   "build": "react-app-rewired build",
-   "test": "react-scripts test",
+   "test": "react-app-rewired test"
}

  • 法二

    暴露webpack配置之后在里面修改路径映射相关的配置

13. 路由守卫

作用：可以通过用户的权限等级控制用户可访问的页面（其实也并不是非得是权限上的，就是通过一些逻辑来控制路由的跳转，最常用于控制用户对于某些敏感页面的访问）

参考：https://blog.csdn.net/qq_45677671/article/details/116168250（【React】路由详解）

14.函数式组件（Function Component）

参考：https://blog.csdn.net/m0_45315697/article/details/107235793（React函数式组件 -函数式组件传值、常用hook的使用(useState、seEffect、useRef)）

注意看下面这段代码：

interface PropsType{
  info: string;
  msg?: string; // ? 表示可以为undefined
}
const app: React.FC<PropsType> = ({msg}) => { //{msg}相当于解构赋值，从props中解构
  return(
    <h1>hello,{msg}</h1>
  )
}
// 其中诸如interface（在这里用于限定字段类型）、React.FC<xxx>（React Function Component）等都是TypeScript中的东西

关于Vue

vue跟react很像，react有的概念他基本上也都有

这里补充几个关于Vue的知识点

https://blog.csdn.net/sinat_16998945/article/details/102488163（new Vue()创建一个新的 Vue 实例）

https://segmentfault.com/a/1190000022937276（Vue 函数式组件的使用技巧）

关于vue函数式组件、生命周期钩子、slot插槽、内置组件、自定义指令、路由等更多知识点请参考vue官网：https://cn.vuejs.org/guide/introduction.html