react高阶组件的一些运用

今天学习了react高阶组件，刚接触react学习起来还是比较困难，和大家分享一下今天学习的知识吧，另外缺少的地方欢迎补充哈哈

高阶组件(Higher Order Components,简称:HOC)

是 React 中用于重用组件逻辑的高级技术, 它本身不是react中的组件, 而是一个函数,

这个函数接受一个react组件作为参数,并返回一个新组件, 实现了对原有组件的增强和优化,

可以对原有组件中的state, props和逻辑执行增删改操作, 一般用于代码重用和组件增强优化。

高阶组件的使用场景

1, 需要代码重用时, react如果有多个组件都用到了同一段逻辑, 这时,就可以把共同的逻辑部分提取出来,

利用高阶组件的形式将这段逻辑整合到每一个组件中, 从而减少代码的逻辑重复。

2, 需要组件增强优化时, 比如我们在项目中使用的组件有些不是自己写的, 而是从网上C下来的,

但是第三方写的组件可能比较复杂, 有时不能完全满足需求, 但第三方组件不易修改, 此时也可以用高阶组件,

在不修改原始组件的前提下, 对组件添加满足实际开发需求的功能。

高阶组件的实现方式

高阶组件的实现方式有两种：

1, 属性代理: 通过创建新组建来包裹原始组件, 把原始组件作为新组建的子组件渲染

功能: 可实现对原始组件的 props数据更新和组件模板更新。

　　下面是实现属性代理的代码片段：

　　(1), 新建高阶组件文件 MyHOC.jsx

　　(2), 在文件中创建函数函数的参数是一个组件OldCom(参数可以自定义), 函数的返回值也是一个组件 NewCom(自定义)

function MyHoc(OldCom){
      return class NewCom extends React.Component{
        render(){
            let newProps = { age: 10, sex: '男' }
            return (
              <OldCom {...newProps} ></OldCom>
            )
        }
      }
    }
 
// 导出高阶组件函数
export default MyHOC;
 
// 属性代理: 通过创建新组建来包裹原始组件, 把原始组件作为新组建的子组件渲染
// 功能: 可实现对原始组件的 props数据更新 和 组件模板更新

2, 反向继承: 通过创建新组建继承自原始组件, 把原始组件作为父组件

　功能: 可实现对原始组件的state状态数据更新和组件模板更新。

　下面是实现反向继承的代码片段：

 1 function MyHOC (OldCom){
 2       return class NewCom extends OldCom{
 3         componentDidMount() {
 4           this.setState({ name: '李四' })
 5         }
 6         render() {
 7           return super.render()
 8         }
 9       }
10     }
11
12 // 导出高阶组件函数
13 export default MyHOC;
14
15  // 反向继承的state数据, 不能在render中改, 会进入死循环
16  // 一般在生命周期函数或自定义函数中更新state

高阶组件的渲染劫持

通过高阶组件可以把原始组件的模板进行修改和替换

渲染劫持指对一个组件渲染内容的装饰或修改, 一般通过高阶组件来实现,

把一个组件传入高阶组件, 可以对这个组件的模板进行修改后执行渲染,

也可以阻止组件渲染,并修改组件中的数据和逻辑。

下面是渲染劫持的代码片段

 1 function MyHOC (OldCom){
 2     return class NewCom extends OldCom{
 3         componentDidMount() {
 4             this.setState({ name: '李四' })
 5         }
 6         render() {
 7             // 以下模拟订单页渲染, 从状态管理中取出登录状态, 加以判断
 8             let isLogin = true;
 9             if(isLogin){
10
11                 // 此时,要渲染父组件,就要用父组件对象super渲染
12                     return super.render()
13              }else{
14                    this.props.history.push("/login")
15                     return null
16             }
17         }
18     }
19 }
20 export default MyHOC

渲染劫持的应用

一般用于一些需要登录状态的页面, 在路由请求渲染页面(如订单页)之前,

使用高阶组件判断是否已登录,如果已登录,返回订单页模板, 如果没有登录,返回空,并跳转到登录页

最后在使用用高阶组件的时候，别忘了导入组件，

路径改成你文件路径导入:

import 自定义名称 from "高阶组件所在路径"

是发