React-高阶组件
认识高级组件
高阶函数的维基百科定义:至少满足以下条件之一
1、接受一个或多个函数作为输入;
2、输出一个函数;
JavaScript中比较常见的 filter、map、reduce 都是高阶函数
那么说明是高阶组件呢?
- 高阶组件的英文是 Higher-Order Components，简称为 HOC;
- 官方的定义:高阶组件是参数为组件，返回值为新组件的函数;
我们可以进行如下的解析:
- 首先，高阶组件 本身不是一个组件，而是一个函数;
- 其次，这个函数的参数是一个组件，返回值也是一个组件
高阶组件的定义
import React,{PureComponent } from 'react'
class App extends PureComponent [
render (){return (<div>你好： {this.props.name}</div>)
}function enhanceComponent(WrappedComponent) [// 返回组件名NewComponent // return class NewComponent extends PureComponent {class NewComponent extends PureComponent {render()[return-<WrappedComponent {...this.props}/>}}//组件的名称都可以通过displayName来修改NewComponent.displayName= "kobe"; // 自定义组件名,一般开发调式才用到return NewComponent;
}
const EnhanceComponent = enhanceComponent(App);//export default App;
export default EnhanceComponent;
效果如下，
使用
<EnhanceComponent name="zhangsan">
- 高阶组件并不是React API的一部分，它是基于React的组合特性而形成的设计模式;高阶组件在一些React第三方库中非常常见:
- 比如redux中的 connect;
- 比如react-router中的 withRouter
高阶组件-props
案例一
import React,[ PureComponent ] from 'react';class User1 extends PureComponent {render(){return <h3>Home: {`昵称: ${this.props.nickname} 等级: ${this.props.level} 区域：${this.props.region}`}</h3>}
}class User2 extends PureComponent {render(){return <h3>Home: {`昵称: ${this.props.nickname} 等级: ${this.props.level} 区域：${this.props.region}`}</h3>}
}
// 定义一个高阶组件
function enhanceRegionProps(WrappedComponent) {return props =>{return <WrappedComponent {...props} refion="中国" />}
}
const Person1 = enhanceRegionProps(User1 );
const Person2 = enhanceRegionProps(User2 );class App extends PureComponent [render(){return(<div>App// <User1 nickname="张三" level={90} />// <User2 nickname="李四" level={30} /><Person1 nickname="张三" level={90} /><Person2 nickname="李四" level={30} /></div>}}
}
export default App ;
案例二
import React,[ PureComponent ,createContext] from 'react';
// 创建Context
const UserContext = createContext({nickname:"momo",level:21,region:'深圳'
})
class User1 extends PureComponent {render(){return <h3>Home: {`昵称: ${this.props.nickname} 等级: ${this.props.level} 区域：${this.props.region}`}</h3>}
}class User2 extends PureComponent {render(){return <h3>Home: {`昵称: ${this.props.nickname} 等级: ${this.props.level} 区域：${this.props.region}`}</h3>}
}
// 定义一个高阶组件
function enhanceRegionProps(WrappedComponent) {return props =>{return <UserContext.Consumer>{user => {// return <h3>Home: {`昵称: ${user.nickname} 等级: ${user.level} 区域：${user.region}`}</h3>;return <WrappedComponent {...props} {...user} />}}<UserContext.Consumer/>}
}
const Person1 = enhanceRegionProps(User1 );
const Person2 = enhanceRegionProps(User2 );class App extends PureComponent [render(){return(<div>App<UserContext.Provider value={{nickname:"why" ,level:23,region:'上海'}} ><Person1 /><Person2 /></ UserContext.Provider></div>}}
}
export default App ;
高阶组件存在的意义
-
我们会发现利用高阶组件可以针对某些React代码进行更加优雅的处理
其实早期的React有提供组件之间的一种复用方式是mixin，目前已经不再建议使用:- Mixin 可能会相互依赖，相互耦合，不利于代码维护
- 不同的Mixin中的方法可能会相互冲突
- Mixin非常多时，组件是可以感知到的，甚至还要为其做相关处理，这样会给代码造成滚雪球式的复杂性
-
当然，HOC也有自己的一些缺陷:
- HOC需要在原组件上进行包裹或者嵌套，如果大量使用HOC，将会产生非常多的嵌套，这让调试变得非常困难
- HOC可以劫持props，在不遵守约定的情况下也可能造成冲突;
-
Hooks的出现，是开创性的，它解决了很多React之前的存在的问题口比如this指向问题、比如hoc的嵌套复杂度问题等等
Portal 的使用
某些情况下，我们希望渲染的内容独立于父组件，甚至是独立于当前挂载到的DOM元素中(默认都是挂载到id为root素上的)
- Portal 提供了一种将子节点染到存在于父组件以外的 DOM 节点的优秀的方案:
- 第一个参数(child)是任何可染的 React 子元素，例如一个元素字符串或 fragment;
- 第二个参数(container)是一个 DOM 元素;就是要挂载到那个DOM上面
ReactDOM.createPortal(child，container);
通常来讲，当你从组件的 render 方法返回一个元素时，该元素将被挂载到DOM节点中离其最近的父节点