React学习之2.高阶组件HOC(high order component)

本文主要是介绍React学习之2.高阶组件HOC(high order component)，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

高阶组件是参数为组件，返回值为新组件的函数。
React使用HOC代替mixins，避免mixins的一些缺陷：

1. 不清楚的依赖关系
2. 命名冲突
3. mixins和组件的高耦合

使用

import React from 'react';
import ReactDOM from 'react-dom';function Hoc(Component, someData) {class WrapperComponent extends React.Component {constructor(props) {super(props);this.state = {owner: someData.owner}}componentDidMount() {console.log(Component.displayName)}render() {// 将不相关的 props(other) 传递给被包裹的组件const { owner, ...other } = this.props;return (<Component owner={this.state.owner} {...other}></Component>);}}WrapperComponent.displayName = `HocCpt(${Component.displayName})`; // 标识displayName用于调试return WrapperComponent;
}class Hello extends React.Component {render() {return (<div>hello world<div>owner:{this.props.owner} age:{this.props.age}</div></div>)}
}
Hello.displayName = 'HelloCpt'; // 标识displayName用于调试const App = Hoc(Hello, { owner: '张三' });// 不要在render中使用HOC，会导致频繁渲染
ReactDOM.render(<App age="25" />,document.getElementById('root')
);

注意

1. 不要在 render 方法中使用 HOC
2. 务必复制静态方法
3. Refs 不属于props， 不会被传递。使用 React.forwardRef API 解决

这篇关于React学习之2.高阶组件HOC(high order component)的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---