说起逻辑复用,熟悉 react 小伙伴们一口道出了 HOC [高阶组件] 。没错,高阶组件可以实现逻辑复用,在 hook 之前 react 还有挺多不错的方案。那么,让我们来浅谈 HOC 与 自定义 hook。
HOC逻辑复用
说起HOC,我想到了两个标签:
1.【嵌套】
2.【一直嵌套】
让我们来深入场景,举个例子:
以封装一个 input 双向绑定为例
我们经常会这样去做一个双向绑定
// ...
state = {
value: 1
};
onChange = (e: any) => {
this.setState({
value: e.target.value
});
};
// ...
<input value={this.state.value} onChange={this.onChange} />;
复制代码
假设在一个组件内有多个 input 我们希望可以更好的去复用「双向绑定」的逻辑,于是我们对这块逻辑用 HOC 进行抽象:
HOCInput.tsx
const HOCInput = (WrappedComponent: any) => {
return class extends React.Component<
{},
{
fields: {
[key: string]: {
value: string;
onChange: (e: any) => void;
};
};
}
> {
constructor(props: any) {
super(props);
this.state = {
fields: {}
};
}
setField = (name: string) => {
if (!this.state.fields[name]) {
this.state.fields[name] = {
value: "",
onChange: (event: any) => {
this.state.fields[name].value = event.target.value;
this.forceUpdate();
}
};
}
return {
value: this.state.fields[name].value,
onChange: thi