React高阶组件(HOC)入门示例

什么是高阶组件?简称：HOC全称：High Order Component高阶组件其实不是什么高深莫测的东西，它类似于高阶函数，就是一个纯函数，它会接受一个组件作为参数，然后返回一个新的组件。什么时候使用HOC?在React中，组件是代码复用的主要单元。但是业务开发过程中难免会遇到一些个性化的需求，此时如果再去重新开发一个组件，会让后续的维护成本变高。接下来举一个简单的例子说明假设有需求如下v1.0：页面上显示10行’hello, world!‘v2.0：页面上要多加10行‘HELLO,WORLD!‘要实现上述的需求，第一个版本会写一个显示hello,world！的组件，这个没有问题。第二个版本可以选择写一个显示HELLO,WORLD！的组件，或者在第一个组件的基础上包装一下，只给第一个组件返回的数据做一个转成大写的处理。我用HOC的方式写一下示例代码，很快就能明白v1.0的组件示例代码如下：class HelloWorld extends React.Component { render() { return “hello,world!” }}ReactDOM.render(<HelloWorld />, document.querySelector("#root"))v2.0的组件示例代码如下：// HOC函数，实现v2.0版本的需求export const toUpperCaseHoc = function(WrappedComponent) { return class Hoc extends React.Component { render() { const { text } = this.props; const text2Upper = text.toUpperCase(); return <WrappedComponent text={text2Upper} />; } };};// v1.0版本实现的组件export class HelloWorld extends React.Component { render() { return this.props.text; }}// 用HOC包装后生成的新的组件，符合v2.0版本的需求，同时包含了v1.0的其它功能const HelloWorld2Upper = toUpperCaseHoc(HelloWorld);ReactDOM.render(<HelloWorld2Upper text=“hello,world!” />, document.querySelector(’#root’));总结业务开发中可能会有一些功能大部分逻辑相似，部分个性化，这个时候可以考虑一下是不是可以开发一个基础组件，在基础组件的基础上去增加一些个性化的需求。最后，一个HOC最好只做一件事。可以参考：React官方高阶组件相关文档