业务组件设计个人实践

Mar 15, 2021

前言

初衷

抽离通用逻辑，避免重复搬砖

组件分类

基础组件：提供基本功能，适用通用场景
业务组件：在基础组件的基础上，加入特定功能，适用特定场景

组件评价标准

集成复杂度：业务侧使用该组件的复杂程度

越高越复杂
控制反转（IoC）：代码耦合程度

越高耦合度越低

业务组件开发的心路历程

Stage 1： Hooks 时代之前

组件

一个受控组件，外部数据为 “单一真实来源”

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} />;

// 基础组件
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
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
    />
  )
}

const searchTable = useSearchTable();

const doSomething = () => {
  searchTable.deleteRow();
};

console.log(searchTable.dataSource);

return (
  <SearchTable
    searchTable={searchTable} // bind hooks
    fetchMethod="xxx"
    {...otherProps}
  />
);

On this page

业务组件设计个人实践

前言

初衷

组件分类

组件评价标准

业务组件开发的心路历程

Stage 1： Hooks 时代之前

优点

缺点

评价

Stage2: Hooks 初期时代

优点

缺点

评价

Stage 3：现在

优点

缺点

评价

总结