代码编织梦想

1、高阶组件其实就是函数,它接收组件作为参数,对组件进行增强后返回

const Hoc = Component => EnhancedComponet

2、举例:如果要为每个组件添加相同的className。可以编写一个高阶组件

const withClassName = Component => props => (<Component {...props} className="my-class"/>)

3、举例:为每个组件添加事件监听window的窗口宽度变化,可以编写一个高阶组件,withInnerWidth 函数的入参Component 是需要被增强的原始组件,withInnerWidth 函数的返回值,是增强后的组件,能实时监听window宽度变化,并将宽度以props的形式传给Component

import React from 'react';

export const withInnerWidth = Component => (
    class extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
                innerWidth: window.innerWidth
            }
        }

        componentDidMount() {
            window.addEventListener('resize', this.handleResize)
        }

        handleResize = () => {
            this.setState({
                innerWidth: window.innerWidth
            })
        }

        render() {
            return <Component {...this.props} {...this.state}/>
        }
    }
)

// Button.jsx:待增强组件
import React from 'react';
import PropTypes from 'prop-types';

export default function Button({text, user, innerWidth}){
    return (
        <div>
            <div>{user.name}</div>
            <div>{user.subName}</div>
            <div>{user.age}</div>
            <div>窗口宽度为:{innerWidth}</div>
            <button>{text}</button>
        </div>
    )
}

Button.propTypes = {
    text: PropTypes.string,
    /**
     * 用户对象
     */
    user: PropTypes.shape({
        /**
         * 用户名称
         */
        name: PropTypes.string.isRequired,
        subName: PropTypes.string
    }).isRequired
}


import React from 'react';
import ReactDOM from 'react-dom';
import Button from "./Components/ReactTest/Button";
import {withInnerWidth} from "./Components/ReactTest/EnhancedComponent"

// 获取增强函数
const WithButton = withInnerWidth(Button)
ReactDOM.render(<WithButton text={'提交'} user={{name:'张三', subName:'李四', age:100}}/>, document.getElementById('root'));

4、高阶组件的好处:
(1)首先没有污染任何状态
(2)其次不需要组件来实现任何方法,组件和高阶组件没有耦合,可以在整个应用中复用它们

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 本文链接: https://blog.csdn.net/zhujian82637/article/details/111088520

React-路由2-爱代码爱编程

路由重定向 路由重定向使用的是react-router-dom的Redirect组件 import { BrowserRouter as Router, Link, Route, Redirect } from 'react-router-dom' import React from 'react' // 定义一个登录组件 function Log

试水 element-plus ui 组件库-爱代码爱编程

上次逛知乎发现 element  之前的团队,已经将 element-plus 开发出来了,看来我们可以在 Vue3 接着使用 element 了,在我的心目中 element 这个框架真的好,设计样式是最让我觉得友好,看着很舒服的 ui 组件框架。所以今天我们来写一篇关于 element-plus 的入门教程吧,小伙伴们 element-plus

React-路由-爱代码爱编程

React路由 根据不同的路径显示不同的组件内容,使用react-router-dom库 安装:npm install react-router-dom 下面例子中,通过export暴露App类,返回index.js中使用渲染,下面代码中,需要注意的是,Router的div内容是正常显示的,其中使用的exact为精确匹配 import React f

react 组件传参-爱代码爱编程

父组件 ===> 子组件 props 父组件: render111(){ const cat = { cat_name:'蓝猫', cat_age:30 } return <div> <NoStateComp

react路由-爱代码爱编程

集成 react-router-dom Router 路由容器,如果想要使用路由功能,必须在最外层包裹一个Router、Router 分两种 HashRouter、BrowserRouter Link 声明式导航 Vue: Route 设置路由规则,同时又是占位符, 如果触发之后想替换到某个地方,你就写在哪里 注意: 1、默认情况下我们的react-r

redux原理学习与理解-爱代码爱编程

毫无疑问,redux是react和RN开发中必不可少的重要组成,很多人使用它的时候,都是照搬,代码写完了,问他具体原理,鲜有人能够解释清楚.... 与我而言,这么多年的学习生涯中,学习一项新技能的时候,必定会追根溯源,搞清楚原理和设计初衷,这样不仅更容易理解学习,而且会使用的更加得心应手,出现问题更容易知道从哪里下手解决问题,所以,大周末早上来重新梳理r