Leanote's Blog
I love Leanote!
Toggle navigation
Leanote's Blog
Home
Chrome
Git
Linux
Windows
Others
工具大全
VsCode
Expo
Html
JavaScript
Npm
Node
Mock
React-Native
React
TypeScript
小程序
插件
正则
Dva
Ant-Design-React
Umi
Vue
Vux
Ant-Design-Vue
Http
Java
flutter
开发小工具
About Me
Archives
Tags
React 高阶组件（Higher Order Component，简称：HOC）
2019-11-14 07:46:24
9
0
0
admin
## **什么是高阶组件？** 高阶组件只是一个包裹了另一个组件的 React 组件。 注1：确切的说高阶组件是一种 React 组件模式，它是一个 JavaScript 函数，将组件作为参数并返回一个新组件。 ## **分为两类** 1. Props Proxy(属性代理) 2. Inheritance Inversion(反向继承) ## **HOC有什么用?** 1. 代码重用，逻辑和引导抽象 2. 渲染劫持（Render Highjacking） 3. state(状态)抽象和操作 4. props(道具)操作 ## **代码如下:** ``` import React from "react" /** * HOC * 属性代理 * @param {*} WrappedComponent */ export function propsHoc(WrappedComponent) { return class PropsHOC extends React.Component { constructor(props) { super(props) this.state = { name: "jack", } } componentDidMount() { console.log(new Date().format("yyyy-MM-dd HH:mm:ss")); console.log(this.props); console.log(this.state); } render() { return ( <div> <WrappedComponent {...this.props} {...{ name: this.state.name }} /> </div> ) } } } /** * HOC * 反向继承 * @param {*} WrappedComponent */ export function inversionHoc(WrappedComponent) { return class InversionHoc extends WrappedComponent { componentDidMount() { this.setState({ name: "rose" }, () => console.log(this.state)) } render() { console.log(this.state) return super.render() } } } /** * 使用方法 1.注解 2.propsHoc(Index), inversionHoc(Index) */ @inversionHoc @propsHoc class Index extends React.Component { } ```
Pre:
react ref(父组件访问子组件, 除了props)
Next:
react常用npm插件
0
likes
9
Weibo
Wechat
Tencent Weibo
QQ Zone
RenRen
Submit
Sign in
to leave a comment.
No Leanote account?
Sign up now.
0
comments
More...
Table of content
admin
No Leanote account? Sign up now.