美文网首页React
React组件化(二)高阶组件、装饰器、复合组件

React组件化(二)高阶组件、装饰器、复合组件

作者: key君 | 来源:发表于2019-10-30 15:17 被阅读0次
高阶组件

定义:是一个函数,它接收一个组件并返回另一个组件
基本使用

import React, { Component } from 'react'
//基础组件
function Child(props){
    return <div className="border">Child</div>;
}
//传入一个组件 返回一个组件
const foo = (Cmp) => {
    //可能带参数 返回props
    return (props) => {
        return <Cmp {...props}/>;
    }
}

export default class HocPage extends Component {
    render() {
        const Foo = foo(Child);
        return (
            <div>
                <Foo/>
            </div>
        )
    }
}

装饰器
import React, { Component } from 'react'

// function Child(props){
//     // console.log(props);
    
//     return <div className="border">Child</div>;
// }
//返回组件
// const foo = (Cmp) => {
//     //可能带参数 返回props
//     return (props) => {
//         return <Cmp {...props}/>;
//     }
// }



const foo = Cmp => props => {
    return (
        <div className="border">
            <Cmp {...props}/>
        </div>
    )
}

//装饰器 不支持function 可以多层嵌套
@foo
@foo
class ChildSceond extends Component{
    render(){
        return <div className="border">Child</div>
    }
}

export default class HocPage extends Component {
    render() {
        // console.log(this.props);
        // const Foo = foo(Child);
        return (
            <div>
                {/* <Foo/> */}
                <ChildSceond/>
            </div>
        )
    }
}

先安装

git add .
git commit -m 'up'
yarn eject

配置package.json

"babel": { "presets": [
  "react-app"
  ], "plugins": [
  [
  "@babel/plugin-proposal-decorators", {
  "legacy": true }
  ] ]
  }

安装装饰器器插件

npm install @babel/plugin-proposal-decorators --save-dev

yarn add @babel/plugin-proposal-decorators --dev

然后启动 如果报错 删除node_modules 再yarn install一下再启动

npm start

有警告的话在根目录创建jsconfig.json

{
    "compilerOptions": {
      "experimentalDecorators": true
    }
  }
组件复合 具名插槽与不具名插槽

components/Layout.js

import React, { Component } from 'react'
import TopBar from './TopBar';

export default class Layout extends Component {
    componentDidMount(){
        const {title} = this.props;
        document.title = title;
    }
    render() {
        const {children,showTopBar} = this.props;
        const a = [];
        if(children.$$typeof){
            //不具名 直接是节点
            a.push(children);
        }else{
            //具名是个对象
            for (let item in children) {
                //对象里面的value是节点
                a.push(children[item]);
            }
        }
        
        return (
            <div>
                {
                    showTopBar && <TopBar/>
                }
                {/* {children.btn}
                {children.txt} */}
                {
                    //可以适应具名插槽或不具名插槽 但是不能一起混着来
                    a.map((item,index) => {
                        return <React.Fragment key={index}>{item}</React.Fragment>
                    })
                }
            </div>
        )
    }
}

components/TopBar.js

import React, { Component } from 'react'
import { handleComsumer } from '../AppContext'

//高阶函数
// const handleComsumer = Cmp => props => {
//     return <Consumer>{ctx => <Cmp {...ctx} {...props}/>}</Consumer>;
// }

export default class TopBar extends Component {
    render() {
        const Top = handleComsumer(TopBarHandle);
        return (
            <Top/>
            // <Consumer>
            //     {
            //         ctx => <TopBarHandle {...ctx}/>
            //     }
            // </Consumer>
        )
    }
}

function TopBarHandle(props){
    return (<div className="topBar">
        {props.user.name}
    </div>)
}

pages/UserPage.js

import React, { Component } from 'react'
import TopBar from '../components/TopBar'
import Layout from '../components/Layout'

export default class UserPage extends Component {
    render() {
        return (
            <Layout showTopBar={true} title="用户中心">
                {/* <div>
                    <h1>UserPage</h1>
                </div> */}
                {
                    {
                        btn: <button>按钮</button>,
                        txt: '文案'
                    }
                }
            </Layout>
        )
    }
}

相关文章

  • React组件化(二)高阶组件、装饰器、复合组件

    高阶组件 定义:是一个函数,它接收一个组件并返回另一个组件基本使用 装饰器 先安装 git add .git co...

  • React高阶组件

    React高阶组件 在开始聊高阶组件之前我们先来看下高阶函数和高阶组件在形式上的差异: 一、什么是装饰器模式: 要...

  • ES7 装饰器模式的配置

    装饰器模式简介 在使用 React 框架编程中,我们用高阶组件的时候,使用时往往需要用高阶组件函数包裹当前组件来导...

  • 利用 React 高阶组件实现一个面包屑导航

    什么是 React 高阶组件 React 高阶组件就是以高阶函数的方式包裹需要修饰的 React 组件,并返回处理...

  • React 进阶之高阶组件

    高阶组件 HOC 高阶组件(HOC)是react中的高级技术,用来重用组件逻辑。但高阶组件本身并不是React A...

  • 高阶组件

    React 高阶组件HOC (Higher-Order Component) 高阶组件是react中重复使用组件逻...

  • react组件设计和分解

    react组件设计和分解 1.切割render 2.模块化组件 3.高阶组件

  • React高阶组件HOC

    高阶组件本质是函数,参数是 组件1 返回组件2,高阶组件是为了复用通用逻辑高阶组件eg:import React,...

  • React高阶组件(HOC)

    高阶组件(Higher-Order Components) 高阶组件(HOC)是 React 中用于重用组件逻辑的...

  • 高阶组件装饰器演变过程

    高阶组件装饰器 装饰器整个函数的演变过程如下: ** 注意利用函数式组件进行化简!** 新建src/utils.j...

网友评论

    本文标题:React组件化(二)高阶组件、装饰器、复合组件

    本文链接:https://www.haomeiwen.com/subject/mshovctx.html