集成复杂度：业务侧使用该组件的复杂程度
越高越复杂
控制反转（IoC）：代码耦合程度
越高耦合度越低
组件
一个受控组件，外部数据为 “单一真实来源”
class SearchTable extends React.Component {
// 各种交互逻辑...
render() {
const {
dataSource,
loading,
onPaginationChange,
//...一堆原生组件的 props 和当前组件的 props
} = this.props;
return (
<Fragment>
<Form />
<Table dataSource={dataSource} loading={loading} />
</Fragment>
);
}
}
业务侧
state = {
loading,
dataSource,
};
const fetchData = async () => {
state.loading = true;
await fetch();
state.loading = false;
state.dataSource = [];
};
const handleChangePage = () => {
fetchData();
};
const doSotine = () => {
ref.doSomething();
};
return <SearchTable ref={ref} loading dataSource onChangePage={handleChangePage} />;
集成复杂度：中
控制反转：中
组件（Hooks）
一个集成了数据来源逻辑，功能逻辑，已经传好参数的组件的hooks
// 基础组件
const BaseSearchTable = ({ ...props }) => <Table {...props} />
// hooks
const useSearchTable = ({ fetchMethod, tableProps }) => {
const [dataSource, setDataSource] = useState()
const [loading, setLoaidng] = useState()
const fetchData = await () => {
setData()
//... 操作逻辑
}
// onPageChange
// deleteRow
// updateRow
// 一堆集成好的业务逻辑
const SearchTable = ({ props }) => {
<BaseSearchTable
dataSource={dataSource}
loading={loading}
{...tableProps}
{...props}
/>
}
return {
SearchTable,
dataSource,
// ... 返回一些需要的方法、数据
}
}
业务侧
const { SearchTable, deleteRow } = useSearchTable({
fetchMethod: 'xxx',
rowKey: 'xxx',
// 其他配置
});
const handleDoSomething = () => {
deleteRow();
};
return <SearchTable />;
集成复杂度：低
控制反转：低
组件
一个只处理数据、内部逻辑的，返回组件所需 props 的 hooks
一个通过bind ，返回组件方法的 hooks
一个现成的集成好上面 hooks 的组件
// props hooks
const useSearchTableProps = ({ fetchMethod }) => {
const fetchData = () => {}
// 一堆业务操作逻辑、方法
// deleteRow
// updateRow
return {
dataSource,
loaing,
deleteRow,
updateRow,
}
}
// methods hooks
const useSearchTable = () => {
// to bind
}
// 业务组件
const SearchTable = ({ props }) => {
const {
dataSource,
loaing,
} = useSearchTableProps({
...props
})
// bind useSearchTable({
// deleteRow,
// updateRow,
// dataSource,
// })
return (
<BaseSearchTable
dataSource,
loaing
// ...other props
/>
)
}
业务侧
可以直接使用集成好的（也可以单用 hook，自己定义功能）
const searchTable = useSearchTable();
const doSomething = () => {
searchTable.deleteRow();
};
console.log(searchTable.dataSource);
return (
<SearchTable
searchTable={searchTable} // bind hooks
fetchMethod="xxx"
{...otherProps}
/>
);
使用方便。
因为通过 hooks 解耦，你可以只有一个 hooks，然后定制一些你想要的，手动集成基础组件，自定义程度提升。
（只评价集成好的 SearchTable，而非 hooks）
集成复杂度：低+
控制反转：低