1.认识高阶函数
- 高阶组件 本身不是一个组件，而是一个函数
- 函数的参数是一个组件，返回值也是一个组件
高阶组件的定义
import ThemeContext from "../context/theme_context"function withTheme(OriginComponent) {return (props) => {return (<ThemeContext.Consumer>{value => {return <OriginComponent {...props} {...value} />}}</ThemeContext.Consumer>)}
}export default withTheme2.高阶函数的意义
优点：
- 利用高阶组件可以针对某些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 ModalApp.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 App4.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 App5.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
