React 高阶组件示例

react中组件经常会重复使用，所以我们可以封装组件进行多功能的复用，常用的组件复用模式有：render props模式和高阶组件模式

高阶组件使用步骤：

创建一个以with开头函数（目前我们约定with开头的组件为高阶组件）
指定一个函数参数，首字母大写，作为渲染组件的组件名
函数内部创建一个类组件，用来提供用于复用的逻辑代码并返回
在高阶组件内渲染参数组件，将状态通过props传递给参数组件
调用高阶组件，传入想要增强的组件，通过返回值拿到新组建，并渲染到页面中

注意：react组件默认用组件名称为组件名，高阶组件渲染出的组件都是用高阶组件名作为组件名，多个渲染出来的组件名称是一样的，所以我们需要给高阶组件修改名称

import React from 'react'
function withMove(WrappedComponent) {class App extends React.Component {state = {x: 0,y:0}handleMouseMove=(e)=> {this.setState({x: e.clientX,y: e.clientY,})}componentDidMount() {window.addEventListener('mousemove',this.handleMouseMove)}componentWillUnmount() {window.removeEventListener('mousemove',this.handleMouseMove)}render() {return (<WrappedComponent {...this.state} />)}}App.displayName=`withMove${getDisplayName(WrappedComponent)}`return App
}function getDisplayName(WrappedComponent) {return WrappedComponent.displayName || WrappedComponent.name || 'Component'
}export default withMove

import withMove from './pages/comC'const Position = props => (<p>鼠标位置：<br />x:{props.x} <br />y:{props.y}</p>
)const WithPosition = withMove(Position)function App() {return (<WithPosition />);}

React 高阶组件示例相关推荐

react实现汉堡_利用 React 高阶组件实现一个面包屑导航
什么是 React 高阶组件 React 高阶组件就是以高阶函数的方式包裹需要修饰的 React 组件,并返回处理完成后的 React 组件.React 高阶组件在 React 生态中使用的非常频繁, ...
React高阶组件探究
React高阶组件探究在使用React构建项目的过程中,经常会碰到在不同的组件中需要用到相同功能的情况.不过我们知道,去这些组件中到处编写同样的代码并不优雅. 在以往,为了解决以上的情况,我们会用到 ...
react 高阶组件
react 高阶组件概述目的:实现状态逻辑复用采用包装(装饰)模式,比如说:手机壳手机:获取保护功能手机壳:提供保护功能高阶组件就相当于手机壳,通过包装组件,增强组件功能思路分析高阶 ...
react高阶组件和hooks
1. react高阶组件 1.1 高阶组件的概念高阶组件(Higher Order Component,简称:HOC ): 是 React 中用于重用组件逻辑的高级技术, 它本身不是react中的组 ...
React高阶组件实践
前言 React高阶组件,即 Higher-Order Component,其官方解释是: A higher-order component is a function that takes a co ...
[react] 高阶组件(HOC)有哪些优点和缺点？
[react] 高阶组件(HOC)有哪些优点和缺点? HOC 优点通过传递props去影响内层组件的状态,不直接改变内层组件的状态,降低了耦合度缺点组件多层嵌套, 增加复杂度与理解成本 ref隔 ...
「react进阶」一文吃透React高阶组件(HOC)
一前言 React高阶组件(HOC),对于很多react开发者来说并不陌生,它是灵活使用react组件的一种技巧,高阶组件本身不是组件,它是一个参数为组件,返回值也是一个组件的函数.高阶作用用于强化 ...
react组件类型及深入理解react高阶组件
React中常见的组件类型及分类: 1.展示组件(Presentational component) 与容器组件(Container component) 2.类组件(Class component ...
React高阶组件_阶段1
react高阶组件_阶段1 作用: 个人总结的高阶组件设计的作用主要有两点, 这里直接使用装饰器方式非装饰器使用请结合我的博文"react基础梳理_阶段1"中的"自定义 ...

React 高阶组件示例

React 高阶组件示例相关推荐

最新文章

热门文章