1. React装饰器
React装饰器是一种对组件进行功能增强的方式，它可以将一个纯函数组件进行一些包装，从而使组件拥有更多的能力。下面我们来看一个使用React装饰器增加Loading效果的例子：
import React, { Component } from 'react';
function withLoading(Component) {
return function WithLoadingComponent({ isLoading, ...props }) {
if (!isLoading) return
return Loading...;
};
}
function MyComponent({ data }) {
return (
{data.map((item, index) => (
{item}
))}
);
}
const MyComponentWithLoading = withLoading(MyComponent);
class App extends Component {
state = {
isLoading: true,
data: []
};
componentDidMount() {
setTimeout(() => {
this.setState({ isLoading: false, data: ['item1', 'item2', 'item3'] });
}, 2000);
}
render() {
const { isLoading, data } = this.state;
return
}
}
export default App;
在这个例子中，我们定义了一个高阶函数withLoading，它会接受一个纯函数组件作为参数，并返回一个新的组件，这个新组件会根据isLoading的值，决定当前是显示原本的组件还是显示Loading的提示。然后通过export将这个增强后的组件导出，供其他组件使用。
2. React高阶组件
React高阶组件(HOC)是一种函数式的组件复用技巧，它可以将多个组件之间通用的逻辑抽象出来，封装成一个独立的组件，从而方便对多个组件进行复用。下面我们来看一个使用React高阶组件提供Modal组件的例子：
import React, { Component } from 'react';
function withModal(Component) {
return class WithModal extends Component {
state = {
visible: false
};
showModal = () => {
this.setState({
visible: true
});
};
closeModal = () => {
this.setState({
visible: false
});
};
render() {
const { visible } = this.state;
return (
<>
);
}
};
}
function Modal({ visible, closeModal }) {
return visible ? (
Modal Title
Modal Content
) : null;
}
const ModalWithDialog = withModal(Modal);
class App extends Component {
render() {
return (
);
}
}
export default App;
在这个例子中，我们定义了一个高阶函数withModal，它会接受一个组件作为参数，并返回一个新的组件WithModal，这个新组件提供了控制Modal显示/隐藏的逻辑，然后将这个逻辑作为props传递给原本的组件Modal，从而实现了一个通用的Modal组件。最后将增强后的Modal组件导出，供其他组件使用。
3. 装饰器和高阶组件的应用场景
3.1. 装饰器的应用场景
React装饰器可以应用于以下场景：
将组件添加loading或error状态，从而保证组件的稳定性和用户体验。
将组件中的回调函数按需转换成Promise形式，方便异步代码编写。
使用类似Redux connect的方式，将组件中所需的状态和操作从props中解耦，并提供类似mapStateToProps、mapDispatchToProps等方法进行配置。
将一些通用的逻辑，如组件渲染失败时的提示、通用的表单校验等抽象出来，从而进行更好的复用。
3.2. 高阶组件的应用场景
React高阶组件可以应用于以下场景：
对多个组件进行功能增强时，可以使用高阶组件将通用的逻辑进行抽象，提高代码复用率。
将组件更好地进行拆分和组合，从而更好地进行功能划分和代码复用。
在编写混合类或组件库时，可以使用高阶组件来进行公共属性和方法的封装和抽象。
在实现多层嵌套的路由或权限控制时，可以使用高阶组件来进行通用的处理。
4. 结语
React装饰器和高阶组件都是非常有用的React编程技巧，在进行组件代码复用时非常方便。希望这篇文章能够为大家提供一些如何使用这两种技巧的思路。