网站建设的作用有哪些,页面设计源代码,找人做网站没有做好报案有用吗,如何找网站建设客户本文来自#React系列教程#xff1a;https://mp.weixin.qq.com/mp/appmsgalbum?__bizMzg5MDAzNzkwNAactiongetalbumalbum_id1566025152667107329) 一. 高阶组件
1.1. 认识高阶组件
什么是高阶组件呢#xff1f;相信很多同学都听说过#xff0c;也用过 高阶函数https://mp.weixin.qq.com/mp/appmsgalbum?__bizMzg5MDAzNzkwNAactiongetalbumalbum_id1566025152667107329) 一. 高阶组件
1.1. 认识高阶组件
什么是高阶组件呢相信很多同学都听说过也用过 高阶函数它们非常相似所以我们可以先来回顾一下什么是 高阶函数。
高阶函数的维基百科定义至少满足以下条件之一
接受一个或多个函数作为输入输出一个函数
JavaScript中比较常见的filter、map、reduce都是高阶函数。
那么什么是高阶组件呢
高阶组件的英文是 Higher-Order Components简称为 HOC官方的定义高阶组件是参数为组件返回值为新组件的函数
我们可以进行如下的解析
首先 高阶组件 本身不是一个组件而是一个函数其次这个函数的参数是一个组件返回值也是一个组件
高阶组件的调用过程类似于这样
const EnhancedComponent higherOrderComponent(WrappedComponent);高阶函数的编写过程类似于这样
function higherOrderComponent(WrapperComponent) {return class NewComponent extends PureComponent {render() {return WrapperComponent/}}
}组件的名称问题
在ES6中类表达式中类名是可以省略的所以可以可以写成下面的写法
function higherOrderComponent(WrapperComponent) {return class extends PureComponent {render() {return WrapperComponent/}}
}另外组件的名称都可以通过displayName来修改 完整的代码我们可以这样来编写
import React, { PureComponent } from react;function higherOrderComponent(WrapperComponent) {return class NewComponent extends PureComponent {render() {return WrapperComponent/}}
}class App extends PureComponent {render() {return (divApp/div)}
}export default higherOrderComponent(App);高阶组件并不是React API的一部分它是基于React的组合特性而形成的设计模式
高阶组件在一些React第三方库中非常常见
比如redux中的connect比如react-router中的withRouter
在我们的开发中高阶组件可以帮助我们做哪些事情呢
1.2. 高阶组件的使用
1.2.1. props的增强
不修改原有代码的情况下添加新的props
假如我们有如下案例
class Header extends PureComponent {render() {const { name, age } this.props;return h2Header {name age}/h2}
}export default class App extends PureComponent {render() {return (divHeader nameaaa age{18} //div)}
}我们可以通过一个高阶组件让使用者在不破坏原有结构的情况下对某个组件增强props
function enhanceProps(WrapperCpn, otherProps) {return props WrapperCpn {...props} {...otherProps} /
}const EnhanceHeader enhanceProps(Header, {height: 1.88})有点拦截器和java动态代理的意思
利用高阶组件来共享 Context 属性
import React, { PureComponent, createContext } from react;const UserContext createContext({nickname: 默认,level: -1
})function Header(props) {return (UserContext.Consumer{value {const { nickname, level } value;return h2Header {昵称: nickname 等级 level}/h2}}/UserContext.Consumer)
}function Footer(props) {return (UserContext.Consumer{value {const { nickname, level } value;return h2Footer {昵称: nickname 等级 level}/h2}}/UserContext.Consumer)
}const EnhanceHeader enhanceProps(Header, { height: 1.88 })export default class App extends PureComponent {render() {return (divUserContext.Provider value{{ nickname: why, level: 90 }}Header /Footer //UserContext.Provider/div)}
}利用高阶组件withUser
import React, { PureComponent, createContext } from react;const UserContext createContext({nickname: 默认,level: -1
})function withUser(WrapperCpn) {return props {return (UserContext.Consumer{value {return WrapperCpn {...props} {...value}/}}/UserContext.Consumer)}
}function Header(props) {const { nickname, level } props;return h2Header {昵称: nickname 等级: level}/h2
}function Footer(props) {const { nickname, level } props;return h2Footer {昵称: nickname 等级: level}/h2
}const UserHeader withUser(Header);
const UserFooter withUser(Footer);export default class App extends PureComponent {render() {return (divUserContext.Provider value{{ nickname: why, level: 90 }}UserHeader /UserFooter //UserContext.Provider/div)}
}1.2.2. 利用高阶组件进行鉴权判断
在开发中我们可能遇到这样的场景
某些页面是必须用户登录成功才能进行进入如果用户没有登录成功那么直接跳转到登录页面
这个时候我们就可以使用高阶组件来完成鉴权操作
function LoginPage() {return h2LoginPage/h2
}function CartPage() {return h2CartPage/h2
}export default class App extends PureComponent {render() {return (divCartPage//div)}
}编写鉴权的高阶组件
function loginAuth(Page) {return props {if (props.isLogin) {return Page/} else {return LoginPage/}}
}完整的代码如下
import React, { PureComponent } from react;function loginAuth(Page) {return props {if (props.isLogin) {return Page/} else {return LoginPage/}}
}function LoginPage() {return h2LoginPage/h2
}function CartPage() {return h2CartPage/h2
}const AuthCartPage loginAuth(CartPage);export default class App extends PureComponent {render() {return (divAuthCartPage isLogin{true}//div)}
}1.2.3. 生命周期劫持
import React, { PureComponent } from react;class Home extends PureComponent {UNSAFE_componentWillMount() {this.begin Date.now();}componentDidMount() {this.end Date.now();const interval this.end - this.begin;console.log(Home渲染使用时间:${interval})}render() {return (divh2Home/h2p我是home的元素,哈哈哈/p/div)}
}class Detail extends PureComponent {UNSAFE_componentWillMount() {this.begin Date.now();}componentDidMount() {this.end Date.now();const interval this.end - this.begin;console.log(Detail渲染使用时间:${interval})}render() {return (divh2Detail/h2p我是detail的元素,哈哈哈/p/div)}
}export default class App extends PureComponent {render() {return (divHome/Detail//div)}
}我们可以定义如下高阶组件
function logRenderTime(WrapperCpn) {return class extends PureComponent {UNSAFE_componentWillMount() {this.begin Date.now();}componentDidMount() {this.end Date.now();const interval this.end - this.begin;console.log(Home渲染使用时间:${interval})}render() {return WrapperCpn {...this.props}/}}
}const LogHome logRenderTime(Home);
const LogDetail logRenderTime(Detail);完整代码如下
import React, { PureComponent } from react;function logRenderTime(WrapperCpn) {return class extends PureComponent {UNSAFE_componentWillMount() {this.begin Date.now();}componentDidMount() {this.end Date.now();const interval this.end - this.begin;console.log(${WrapperCpn.name}渲染使用时间:${interval})}render() {return WrapperCpn {...this.props}/}}
}class Home extends PureComponent {render() {return (divh2Home/h2p我是home的元素,哈哈哈/p/div)}
}class Detail extends PureComponent {render() {return (divh2Detail/h2p我是detail的元素,哈哈哈/p/div)}
}const LogHome logRenderTime(Home);
const LogDetail logRenderTime(Detail);export default class App extends PureComponent {render() {return (divLogHome /LogDetail //div)}
}这个写法其实就是提取公共代码进行复用而已。
1.3. 高阶函数的意义
我们会发现利用高阶组件可以针对某些React代码进行更加优雅的处理。
其实早期的React有提供组件之间的一种复用方式是mixin目前已经不再建议使用
Mixin 可能会相互依赖相互耦合不利于代码维护不同的Mixin中的方法可能会相互冲突Mixin非常多时组件是可以感知到的甚至还要为其做相关处理这样会给代码造成滚雪球式的复杂性
当然HOC也有自己的一些缺陷
HOC需要在原组件上进行包裹或者嵌套如果大量使用HOC将会产生非常多的嵌套这让调试变得非常困难HOC可以劫持props在不遵守约定的情况下也可能造成冲突
Hooks的出现是开创性的它解决了很多React之前的存在的问题比如this指向问题、比如HOC的嵌套复杂度问题等等。
