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的使用

某些情况下，我们希望渲染的内容独立于父组件，甚至是独立于当前挂载到的DOM元素中（默认都是挂载到id为root的DOM 元素上的）。

Portal 提供了一种将子节点渲染到存在于父组件以外的 DOM 节点的优秀的方案：

• 第一 个参数（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元素：

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

React还提供了Fragment的短语法，看起来像空标签 <> </>；

但是，如果我们需要在Fragment中添加key，那么就不能使用短语法；

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

5.StrictMode

StrictMode 是一个用来突出显示应用程序中潜在问题的工具：

• 与 Fragment 一样，StrictMode 不会渲染任何可见的 Ui
• 它为其后代元素触发额外的检查和警告
• 严格模式检查仅在开发模式下运行； 它们不会影响生产构建

StrictMode检查项：

• 识别不安全的生命周期

• 使用过时的ref API

• 检查意外的副作用
• 使用废弃的findDOMNode方法

• 检测过时的context APi

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