m0_55990909的博客

理解：用于解决子组件出现问题导致整个程序出问题。错误边界：用来捕获后代组件错误，渲染出备用页面特点：只能捕获后代组件生命周期产生的错误，不能捕获自己组件产生的错误和其他组件在合成事件、定时器中产生的错误使用方式：getDerivedStateFromError配合componentDidCatch// 生命周期函数，一旦后台组件报错，就会触发static getDerivedStateFromError(error) { console.log(error); /

类似Vue的插槽，在组件的指定地方预留一个位置，根据需求存放组件，且可以携带参数。如何向组件内部动态传入带内容的结构(标签)?**Vue中：**使用slot插槽技术, 也就是通过组件标签体传入结构 <AA><BB/></AA>React中：1.使用children props: 通过组件标签体传入结构2.使用render props: 通过组件标签属性传入结构, 一般用render函数属性1. React中的父子组件2. React中父子组件另一.

用于避免重复渲染（执行render函数），提高效率Component的2个问题当组件中运行方法setState({})。哪怕该方法的参数为一个空对象，该组件和其子组件都会被重新渲染只当前组件重新render(), 就会自动重新render子组件 ==> 效率低效率高的做法只有当组件的state或props数据发生改变时才重新render()原因Component中的shouldComponentUpdate()总是返回true解决方法办法1:重写shouldC

**Context：**一种组件间通信方式, 常用于【祖组件】与【后代组件】间通信Context 通过组件树提供了一个传递数据的方法，从而避免了在每一个层级手动的传递 props 属性。props传值的缺陷：使用props属性进行组件向下传值的操作。当多个组件嵌套时候。你就需要慢慢逐层向上寻找初值。相关API**React.createContext：**创建一个上下文的容器(组件), defaultValue可以设置共享的默认数据const {Provider, Consumer}

Fragment 组件能够在不额外创建 DOM 元素的情况下，让 render() 方法中返回多个元素。一个常见模式是一个组件返回多个元素。Fragments 允许你将子列表分组，而无需向 DOM 添加额外节点。Fragment用来替换最外层div根标签，不在页面中显示，优化结构理解起来就是在我们定义组件的时候return里最外层包裹的div往往不想渲染到页面，那么就要用到我们的Fragment组件了。就和vue的< template ></ template >..

1. React Hook/Hooks是什么?Hook是React 16.8.0版本增加的新特性/新语法，可以让你在函数组件中使用 state 以及其他的 React 特性2. 三个常用的HookState Hook: React.useState()Effect Hook: React.useEffect()Ref Hook: React.useRef()State HookState Hook让函数组件也可以有state状态, 并进行状态数据的读写操作语法: const [

lazyLoad懒加载：需要使用的时候再进行加载当未使用懒加载时，页面一打开，就将所有的路由组件给加载到页面了如果路由组件很多，且用户不会真正访问到那么多的路由组件，那么就相当于加载了不需要的多余组件因此，可以使用路由懒加载，当用户真正需要访问的时候再去请求import {lazy, Suspense} from 'react'import {Route} from 'react-router-dom'//Loading是一般组件，不需要懒加载import Loading from '.

1、对象式的setStatesetState(stateChange,[callback])stateChange 为状态改变的对象（该对象可以体现出状态的更改）callback 是可选的回调函数，它在状态更新完毕后，界面也更新后（render调用后）才被调用import React, { Component } from 'react'export default class Demo extends Compontent { //初始化状态 state =