Skip to content

react组件如何通信

  1. 父子组件通过 属性 和 props 通讯
  2. 通过 context 通讯
  3. 通过第三方的状态库来进行通信

react中的生命周期

class组件

周期名解释
constructor类的初始构建函数,初始化state和props
componentWillMount准备开始搭载dom
render渲染dom的函数
componentDidMountdom搭载完毕
shouldComponentUpdatestat状态发生变化,这这一步可以阻止状态变化
componentDidUpdatestate已经发送变化
componentWillUnmount组件准备卸载

hooks组件

周期名解释
hookshooks本身调用的
useEffect当第二个参数为总数组dom挂载完毕会调用第一次的回调函数
useEffect当第二个参数为总数组返回一个函数将会在dom卸载时调用
useEffect当第二个参数为state或者props当数组里面的依赖发生变更时调用

高阶组件是什么?

react高阶函数官方文档介绍

TIP

简单来说,高阶函数是指,以组件为参数,返回一个新的组件,比如说react-router的withRouter 和 redux的connect

javascript
import React, { useState } from "react";

const withHight = (Component) => {
  return () => {

    const [hightCount,setHightCount] = useState();

    return <Component hightCount={hightCount} setHightCount={setHightCount} />;
  };
};

export default withHight;
1
2
3
4
5
6
7
8
9
10
11
12

react-router中有哪几种组件

BrowserRouterHashRouter 在外层的根组件

Route 每个页面组件的容器

Switch 可以是页面每次只渲染一个Route

Link 页面跳转组件,类似于a标签