十一、高阶组件 & Portals的使用 & createPortal & fragment

1. 高阶组件定义

是一个函数 + 参数为一个组件 + 返回值是一个新的组件

• 对传入组件做一个拦截、做功能扩充
• 为了实现代码的复用
• 这样下面实例中每一个包裹的组件都有 newInfo的数据信息

function loginAuth(originComponent) {
    class newComponent extends React.PureComponent {
        constructor() {
            super()
            this.state = {
                newInfo: {
                    name: 'luffy',
                    age: 17
                }
            }
        }
        render() {
            return <originComponent {...this.state.newInfo} {...this.props} />
        }
    }
    return newComponent
}
export default loginAuth

2. 常见的高阶组件

2.1 memo

// 为了实现函数组件的性能优化 类似于 PureComponent
const newHello = memo(function Hello(props) {
    // 内部其实就是对组件做了个拦截，对新旧PROPS做了个diff比较
    return <h2>XXXX</h2>
})

2.2 forwardRef

juejin.cn/post/716207…

3. Portals的使用

import { createPortal } from "react-dom";
export class App extends PureComponent {
  render() {
    return (
      <div className="app">
        <h2>默认渲染在默认的root节点里</h2>
        {createPortal(<h3>另起炉灶</h3>, document.querySelector("#luffy"))}
      </div>
    );
  }
}

4. fragment

• 类似于vue的 template

import React, { PureComponent, Fragment } from "react";

export class App extends PureComponent {
  render() {
    return (
      <Fragment>
        <h2>标题Header</h2>
        <h2>标题Header</h2>
        <h2>标题Header</h2>
      </Fragment>
      // 语法糖 遍历的时候不能省略
       <>
        <h2>标题Header</h2>
        <h2>标题Header</h2>
        <h2>标题Header</h2>
      </>
      // <div className="wrap">
      //   <h2>标题Header</h2>
      // </div>
    );
  }
}

export default App;