网站功能有哪些,上海高端定制网站公司,wordpress 文章批量移动,网站建设就选1.认识高阶函数 高阶组件 本身不是一个组件#xff0c;而是一个函数函数的参数是一个组件#xff0c;返回值也是一个组件
高阶组件的定义
import ThemeContext from ../context/theme_contextfunction withTheme(OriginComponent) {return (props) {retur…1.认识高阶函数 高阶组件 本身不是一个组件而是一个函数函数的参数是一个组件返回值也是一个组件
高阶组件的定义
import ThemeContext from ../context/theme_contextfunction 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-domexport 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 ./Modalexport class App extends PureComponent {render() {return (div classNameapph1App H1/h1{createPortal(h2App H2/h2, document.querySelector(#why))}{/* 2.Modal组件 */}Modalh2我是标题/h2p我是内容, 哈哈哈/p/Modal/div)}
}export default App
4.Fragment的使用 在之前的开发中我们总是在一个组件中返回内容时包裹一个div元素 如果希望不渲染这层的div就可以通过Fragment实现Fragment 允许你将子列表分组而无需向 DOM 添加额外节点 React还提供了Fragment的短语法看起来像空标签 / 但是如果我们需要在Fragment中添加key那么就不能使用短语法 import React, { PureComponent, Fragment } from reactexport class App extends PureComponent {constructor() {super() this.state {sections: [{ title: 哈哈哈, content: 我是内容, 哈哈哈 },{ title: 呵呵呵, content: 我是内容, 呵呵呵 },{ title: 嘿嘿嘿, content: 我是内容, 嘿嘿嘿 },{ title: 嘻嘻嘻, content: 我是内容, 嘻嘻嘻 },]}}render() {const { sections } this.statereturn (h2我是App的标题/h2p我是App的内容, 哈哈哈哈/phr /{sections.map(item {return (Fragment key{item.title}h2{item.title}/h2p{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/Profileexport class App extends PureComponent {render() {return (divStrictModeHome//StrictModeProfile//div)}
}export default App
