react进阶 react进阶 纯组件、render props、插槽、错误边界

发表于 分类于 ， ， 阅读次数： Changyan： 本文字数： 834 阅读时长 ≈ 1 分钟
纯组件(PureComponent)、render props、插槽(ReactDOM.createPortal的使用)、错误边界(getDerivedStateFromError和componentDidCatch的用法和注意事项)

PureComponent 和render props和插槽

PureComponent

纯组件，用于避免不必要的渲染（运行render函数），提高效率

PureComponent是一个组件，如果一个组件继承自该组件，则该组件的shouldComponentUpdate会进行优化，会将组件的属性和状态进行浅比较，如果相等则不会重新渲染。

在函数组件中使用React.memo函数制作纯组件。

render props

用于解决某些组件的功能大致相同，仅仅是渲染界面不同。（可用高阶组件）

将一个函数作为一个组件的属性，其中函数的返回值作为渲染内容，通常该属性的名字为render(其他名字也行)

Portals

将会变成虚拟DOM树和真实DOM树不一致

插槽：将一个React元素渲染到指定的DOM容器中

使用ReactDOM.createPortal(React元素，真实的DOM容器),该容器返回一个React元素

注意

  1. React中的事件是包装过的
  2. 它的事件冒泡是根据虚拟DOM树来冒泡的，与真实的DOM树无关

错误边界

默认情况下，若一个组件在渲染期间（render）发生错误，会导致整个组件树全部被卸载

错误边界：是一个组件，该组件会捕获到渲染期间（render）子组件发生的错误，并有能力阻止错误继续传播

让某个组件捕获错误

  1. 编写生命周期函数 getDerivedStateFromError
    1. 静态函数
    2. 运行时间点：渲染子组件的过程中发生错误之后，在更新页面之前
    3. 注意：只有子组件发生错误，才会运行该函数
    4. 该函数返回一个对象，React会将该对象的属性覆盖掉当前组件的state
    5. 参数：错误对象
    6. 通常，该函数用于改变状态
  2. 编写生命周期函数 componentDidCatch
    1. 实例方法
    2. 运行时间点：渲染子组件的过程中发生错误更新页面之后，由于其运行时间点比较靠后，因此不太会在该函数中改变状态
    3. 通常该函数用于记录错误消息

细节

某些错误，错误边界组件无法捕获

  1. 自身的错误
  2. 异步的错误
  3. 事件中的错误

总结：仅处理渲染子组件期间的同步错误