React的高阶函数

1.认识高阶函数

• 高阶组件 本身不是一个组件，而是一个函数
• 函数的参数是一个组件，返回值也是一个组件

高阶组件的定义

import ThemeContext from "../context/theme_context"
 
function withTheme(OriginComponent) {
  return (props) => {
    return (
      <ThemeContext.Consumer>
        {
          value => {
            return <OriginComponent {...props} {...value} />
          }
        }
      ThemeContext.Consumer>
    )
  }
}
 
export default withTheme

2.高阶函数的意义

优点：

• 利用高阶组件可以针对某些React代码进行更加优雅的处理
• 解决早期React使用Mixin混入，引起的相互依赖，相互耦合，不利于代码维护

缺点：

• HOC需要在 原组件上进行包裹或者嵌套，如果大量使用HOC，将会产生非常多的嵌套，这让调试变得非常困难
• HOC 可以劫持props，在不遵守约定的情况下也可能造成冲突

3.Portals的使用

• 第一 个参数（child）是任何可渲染的 React 子元素，例如一个元素，字符串或 fragment
• 第二个 参数（container）是一个 DOM 元素

通过React内置的createPortal函数实现 

 Modal.jsx

import React, { PureComponent } from 'react'
import { createPortal } from "react-dom"
 
export class Modal extends PureComponent {
  render() {
    return createPortal(this.props.children, document.querySelector("#modal"))
  }
}
 
export default Modal

 App.jsx

import React, { PureComponent } from 'react'
import { createPortal } from "react-dom"
import Modal from './Modal'
 
export class App extends PureComponent {
  render() {
    return (
      <div className='app'>
        <h1>App H1h1>
        {
          createPortal(<h2>App H2h2>, document.querySelector("#why"))
        }
 
        {/* 2.Modal组件 */}
        <Modal>
          <h2>我是标题h2>
          <p>我是内容, 哈哈哈p>
        Modal>
      div>
    )
  }
}
 
export default App

4.Fragment的使用

如果希望不渲染这层的div，就可以通过Fragment实现，Fragment 允许你将子列表分组，而无需向 DOM 添加额外节点；

import React, { PureComponent, Fragment } from 'react'
 
export class App extends PureComponent {
  constructor() {
    super() 
 
    this.state = {
      sections: [
        { title: "哈哈哈", content: "我是内容, 哈哈哈" },
        { title: "呵呵呵", content: "我是内容, 呵呵呵" },
        { title: "嘿嘿嘿", content: "我是内容, 嘿嘿嘿" },
        { title: "嘻嘻嘻", content: "我是内容, 嘻嘻嘻" },
      ]
    }
  }
 
  render() {
    const { sections } = this.state
 
    return (
      <>
        <h2>我是App的标题h2>
        <p>我是App的内容, 哈哈哈哈p>
        <hr />
 
        {
          sections.map(item => {
            return (
              <Fragment key={item.title}>
                <h2>{item.title}h2>
                <p>{item.content}p>
              Fragment>
            )
          })
        }
      
    )
  }
}
 
export default App

import React, { PureComponent, StrictMode } from 'react'
// import { findDOMNode } from "react-dom"
import Home from './pages/Home'
import Profile from './pages/Profile'
 
export class App extends PureComponent {
  render() {
    return (
      <div>
        <StrictMode>
          <Home/>
        StrictMode>
        <Profile/>
      div>
    )
  }
}
 
export default App