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 H1</h1>{createPortal(<h2>App H2</h2>, 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.statereturn (<><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