深入学习React高阶组件

tech2023-02-20 113

Mixin

在了解高阶组件之前我们先讲一下mixin很多初级前端工程师对mixin的概念并不是很了解，首先解释一下mixin mixin：在项目中有些一代码相同的代码会重复使用，我们就可以进行抽离，方便维护，为了解决这个问题就是包装成mixin方法，但是后来发现有mixin有很多弊端，也许可以说高阶组件就是mixin的衍生品，让我们进入今天的主题

高阶组件

高阶组件：本身是一个函数，这个函数接受一个组件做为参数，并且返回一个组件实现方式：属性代理和反向继承

示例：

function Hoc(WrappedComponent) {//hoc就是是个高阶组件接受一个组件做为参数 return class extends Component {//返回一个组件 render() { return ( <div> <h1>这是一个高阶组件</h1> <WrappedComponent></WrappedComponent> </div> ) } } }

那么高阶组件有什么用？

代码复用抽离state操作props获取实例布局更改接下来我们一个个例子查看它的好处

现在有一个组件ConfirmBox点击按钮后消失

class Dialog extends Component { constructor(props) { super(props); this.state = { show:true, msg:'这是一个对话框', title:'对话框' } } handleConfirm = () => { this.setState({ show:!this.state.show }) } render() { return ( <div style={{display:this.state.show?'block':'none'}}> <h1>{this.state.title}</h1> <p>{this.state.msg}</p> <button onClick={this.handleConfirm}>确认</button> </div> ) } }

属性代理

现在我们使用高阶组件把ConfirmBox组件里的state和回调函数抽离出来属性代理可以做什么？

抽离state操作props获取实例布局更改

接下来对props进行操作

function Hoc(WrappedComponent) {//hoc就是是个高阶组件接受一个组件做为参数 return class extends Component {//返回一个组件 constructor(props) { super(props); this.state = { show:true, msg:'这是一个对话框', title:'对话框' } } handleConfirm = () => { this.setState({ show:!this.state.show }) } render() { return ( <div> <h1>这是一个高阶组件</h1> <WrappedComponent {...this.state} handleConfirm={this.handleConfirm}></WrappedComponent> </div> ) } } } class ConfirmBox extends Component { constructor(props) { super(props); } render() { return ( <div style={{display:this.props.show?'block':'none'}}> <h1>{this.props.title}</h1> <p>{this.props.msg}</p> <button onClick={this.props.handleConfirm}>确认</button> </div> ) } }

现在我们已经把state和回调函数已经抽离到高阶组件中

function Hoc(WrappedComponent) {//hoc就是是个高阶组件接受一个组件做为参数 return class extends Component {//返回一个组件 constructor(props) { super(props); this.state = { show:true, msg:'这是一个对话框', title:'对话框' } } handleConfirm = () => { this.setState({ show:!this.state.show }) } render() { const newProps = { show:true, msg:'这是新的props' } return ( <div> <h1>这是一个高阶组件</h1> <WrappedComponent {...newProps} title={this.state.title} handleConfirm={this.handleConfirm}></WrappedComponent> </div> ) } } } class ConfirmBox extends Component { constructor(props) { super(props); } render() { return ( <div style={{display:this.props.show?'block':'none'}}> <h1>{this.props.title}</h1> <p>{this.props.msg}</p> <button onClick={this.props.handleConfirm}>确认</button> </div> ) } }

到这里不知道会不会有人感觉这个和React的UI和逻辑抽离很像，其实是没错的，UI和业务逻辑拆分也类似,那为什么还要有高阶组件呢这里需要强调一下高阶组件是函数意味着参数是动态的这一点很重要,如果有两个组件有同样的逻辑通过高阶组件只需要改变实参就可以实现而UI和业务逻辑拆分就不行。

假设：现在有一个ConfirmBox2和ComfirmBox1的逻辑一样那我们直接改变参数就可以了

Hoc(ConfirmBox2)

简单一行我们就把逻辑赋予给了ComfirmBox2 使用高阶组件相对比较灵活,这里我可能找的例子不好，请各位读者见谅。通过ref访问组件实例

<WrappedComponent {...newProps} title={this.state.title} handleConfirm={this.handleConfirm} ref={ref => this.myInstance = ref}></WrappedComponent>

这样我们就得到了组件实习了

反向继承（不推荐使用）

反向继承：既然有继承两字肯定和extends脱不了干系，反向继承就是通过继承传进来的组件参数并且在render调用super.render实现的反向继承：可以做什么？

操作state渲染劫持最简单例子： function Hoc(WrappedComponent) {//hoc就是是个高阶组件接受一个组件做为参数 return class extends WrappedComponent {//继承传进来的组件 render() { return ( super.render();//调用super.render ) } } }

操作state:根据state的show判断是否显示组件

渲染劫持

反向代理：为什么不推荐使用，因为操作state容易覆盖，并且生命周期函数也会覆盖

function Hoc(WrappedComponent) {//hoc就是是个高阶组件接受一个组件做为参数 return class extends WrappedComponent {//返回一个组件 static displayName = `HOC(${WrappedComponent.displayName || WrappedComponent.name})` componentWillMount() { // 可以方便地得到state，做一些更深入的修改。 this.setState({ msg: '这是hoc修改的值' //修改了msg的值 }); } componentDidMount(){ console.log("hoccomponentDidMount") } render() { if(this.state.show) { return super.render() }else { return null } } } } class ConfirmBox extends Component { constructor(props) { super(props); this.state = { show:true, msg:'这是一个对话框', title:'对话框' } } handleConfirm = () => { this.setState({ show:!this.state.show }) } componentDidMount() { console.log("comfirmbox componentDidMount") } render() { return ( <div style={{display:this.state.show?'block':'none'}}> <h1>{this.state.title}</h1> <p>{this.state.msg}</p> <button onClick={this.state.handleConfirm}>确认</button> </div> ) } }

从图片可以看出被包裹组件的componentDidMount生命周期函数组覆盖了，如果要调用需要使用super.componentDidMount去调用，而且state也被覆盖了另外最重要一点反向继承不能保证子组件完全被渲染，这是什么意思？就是被包裹组件里的可能会丢失

高阶组件使用场景

页面渲染

function Hoc(WrappedComponent) {//hoc就是是个高阶组件接受一个组件做为参数 return class Test extends Component {//返回一个组件 static displayName = `HOC(${WrappedComponent.displayName || WrappedComponent.name})` constructor(props) { super(props); this.state = { show:true, msg:'这是一个对话框', title:'对话框' } } handleConfirm = () => { this.setState({ show:!this.state.show }) } componentDidMount() { console.log(this.myInstance) } render() { const newProps = { show:true, msg:'这是新的props' } if(this.state.show) { return <WrappedComponent {...newProps} title={this.state.title} handleConfirm={this.handleConfirm} ref={ref => this.myInstance = ref}></WrappedComponent> }else { return null } } } }

逻辑复用:现在假设有两个确认框组件，他们的逻辑一样，只有样式不同，那我们就可以使用高阶组件来实现

import React,{Component} from 'react' import './Hoc.css' function Hoc(WrappedComponent) {//hoc就是是个高阶组件接受一个组件做为参数 return class Test extends Component {//返回一个组件 static displayName = `HOC(${WrappedComponent.displayName || WrappedComponent.name})` constructor(props) { super(props); this.state = { show:true, msg:'这是一个对话框', title:'对话框' } } handleConfirm = () => { this.setState({ show:!this.state.show }) } componentDidMount() { console.log(this.myInstance) } render() { const newProps = { show:true, msg:'这是新的props' } if(this.state.show) { return <WrappedComponent {...newProps} title={this.state.title} handleConfirm={this.handleConfirm} ref={ref => this.myInstance = ref}></WrappedComponent> }else { return null } } } } class ConfirmBox extends Component { constructor(props) { super(props); } render() { return ( <div className={'confirmWrap'} style={{display:this.props.show?'block':'none'}}> <h1>{this.props.title}</h1> <p>{this.props.msg}</p> <button className={'btn'} onClick={this.props.handleConfirm}>确认</button> <button>取消</button> </div> ) } } class ConfirmBox2 extends Component { constructor(props) { super(props); } render() { return ( <div className={'confirmWrap2'} style={{display:this.props.show?'block':'none'}}> <span>{this.props.title}</span> <p>{this.props.msg}</p> <button>取消</button> </div> ) } } export default { comfirmBox:Hoc(ConfirmBox), comfirmBox2:Hoc(ConfirmBox2) }

可以看出组件只是样式不同，逻辑相同我们就可以使用高阶组件来实现逻辑复用

最新回复(0)