搭建服务端

yarn add express
yarn add nodemon
在server目录下 npm init -y
// 增加dev脚本"scripts": {"dev": "nodemon ./index.js"},

引入

git

HOC

High Order Component 高阶组件，是组件的抽象
HOC不是React提供的API，高级的设计模式
HOC是一个函数，接收一个组件参数，返回一个新组件
普通组件返回的是UI，HOC返回的是一个新组件
HOC不能修改参数组件，只能传入组件所需要的props（否则可能会导致参数组价内部的逻辑执行失效）
HOC是一个没有副作用的纯函数
HOC除了必须填入被包裹的组件参数以外，其余参数根据需求增加
HOC不关心数据如何使用，包裹组件不关心数据从哪来，只做渲染
HOC和包裹组件直接唯一的契合点是props

代码

完整代码
git

index15.jsx

import { fetchListData } from "./index15/front-end/model"
import { listHoc } from './index15/front-end/components/listHoc'import StudentList from './index15/front-end/components/StudentList'
import TeacherList from './index15/front-end/components/TeacherList'const StudentListHoc = listHoc(StudentList, fetchListData)
const TeacherListHoc = listHoc(TeacherList, fetchListData)class App extends React.Component {render() {return (<><StudentListHoc field='student' /><TeacherListHoc field='teacher' /></>)}
}
ReactDOM.render(<App />,document.getElementById('app')
)

listHoc .jsx

export function listHoc(WrapperComponent, fetchListData) {return class extends React.Component {state = {listData: []}remove = (id) => {this.setState({listData: this.state.listData.filter(item => item.id !== id)})}like = (id) => {this.setState({listData: this.state.listData.map(item => {if (item.id == id) {item.like = Number(item.like) + 1}return item})})}async componentDidMount() {const res = await fetchListData(this.props.field)this.setState({listData: res.data})}render() {return (<>{this.props.field === 'student' ?<WrapperComponentdata={this.state.listData}removeStudent={this.remove}></WrapperComponent>:<WrapperComponentdata={this.state.listData}likeTeacher={this.like}></WrapperComponent>}</>)}}
}

高阶组件横切关注点

横切关注点 → minxins
对参数组件本身的逻辑状态与视图的横向切割
让HOC来完成逻辑和状态的管理
让参数组件来完成视图的渲染
让HOC将数据与逻辑传递到参数组件中，从而完成关注点分离且有机结合的任务

柯里化

index.jsx

const StudentListHoc = listHoc(StudentList)(fetchListData)
const TeacherListHoc = listHoc(TeacherList)(fetchListData)

listHoc .jsx

export function listHoc(WrapperComponent) {return function (fetchListData) {return class extends React.Component {......}}
}

还可以在StudentList子组件内部返回listHoc(StudentList)

注意事项

有value就必须有onChange，否则使用defaultValue

使用剩余参数去排除不需要的属性
对“HOC不能修改参数组件”的理解，例如，如下修改参数组件的生命周期函数
MyInput.jsx

export default class MyInput extends React.Component {componentDidUpdate() {console.log('MyInput更新')}render() {return (<div><h1>{this.props.inputValue}</h1><p>总计：{this.props.b + this.props.c}</p><inputtype="text"placeholder="请填写"value={this.props.inputValue}onChange={this.props.valueInput}/></div>)}
}

InputHoc

export function InputHoc(WrapperComponent) {// 注意 如果在这里修重写生命周期函数componentDidUpdate// WrapperComponent内的componentDidUpdate将不会被触发// WrapperComponent.prototype.componentDidUpdate = () => {//     console.log('InputHoc内重写componentDidUpdate')// }return class InputHocComponent extends React.Component {componentDidUpdate() {console.log('不重写，都触发')}state = {inputValue: ''}valueInput = (e) => {this.setState({inputValue: e.target.value})}render() {// 排除参数组件中不需要的属性// 注意 剩余参数时变量名必须叫propsconst { a, ...props } = this.propsreturn (<WrapperComponentinputValue={this.state.inputValue}valueInput={this.valueInput}{...props}/>)}}
}

index.jsx

import MyInput from './index16/front-end/components/MyInput'
import { InputHoc } from './index16/front-end/components/InputHoc'
const MyInputHoc = InputHoc(MyInput)class App extends React.Component {state = {a: 1,b: 2,c: 3}render() {return (<><MyInputHoc {...this.state} /></>)}
}
ReactDOM.render(<App />,document.getElementById('app')
)

MyInput使用函数组件

export default function MyInput(props) {return (<div><h1>{props.inputValue}</h1><p>总计：{props.b + props.c}</p><inputtype="text"placeholder="请填写"value={props.inputValue}onChange={props.valueInput}/></div>)
}

22 React高阶组件相关推荐

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

22 React高阶组件

搭建服务端

引入

HOC

代码

高阶组件横切关注点

柯里化

注意事项

22 React高阶组件相关推荐

最新文章

热门文章