UI组件和容器组件

案例一(推荐)

逻辑组件

import React, { Component, Fragment } from "react";
import "antd/dist/antd.css";
import store from "./store";
import {
  getInputChangeAction,
  getAddItemAction,
  getDeleteItemAction,
} from "./store/actionCreators";
import TodoListUI from "./TodoListUI";

class Todolist extends Component {
  constructor(props) {
    super(props);
    this.state = store.getState();
    this.handleStoreChange = this.handleStoreChange.bind(this);
    this.handleInputChange = this.handleInputChange.bind(this);
    this.handleBtnClick = this.handleBtnClick.bind(this);
    this.handleBtnDelete = this.handleBtnDelete.bind(this);
    store.subscribe(this.handleStoreChange);
  }
  render() {
    return (
      <TodoListUI
        inputValue={this.state.inputValue}
        list={this.state.list}
        handleInputChange={this.handleInputChange}
        handleBtnClick={this.handleBtnClick}
        handleBtnDelete={this.handleBtnDelete}
      />
    );
  }
  handleInputChange(e) {
    const action = getInputChangeAction(e.target.value);
    store.dispatch(action);
  }
  handleStoreChange() {
    this.setState(store.getState());
  }
  handleBtnClick() {
    const action = getAddItemAction();
    store.dispatch(action);
  }
  handleBtnDelete() {
    const action = getDeleteItemAction(this.props.index);
    store.dispatch(action);
  }
}
export default Todolist;

UI 组件

import React, { Component, Fragment } from "react";
import { Input, Button, List } from "antd";

class TodoListUI extends Component {
  render() {
    return (
      <Fragment>
        <div style={{ marginTop: "10px", marginLeft: "10px" }}>
          <Input
            value={this.props.inputValue}
            placeholder="to do"
            style={{ width: "300px", marginRight: "10px" }}
            onChange={this.props.handleInputChange}
          />
          <Button type="primary" onClick={this.props.handleBtnClick}>
            提交
          </Button>
          <List
            bordered
            dataSource={this.props.list}
            renderItem={(item, index) => (
              <List.Item key={index} onClick={this.props.handleBtnDelete}>
                {item}
              </List.Item>
            )}
            style={{ marginTop: "10px", width: "300px" }}
          />
        </div>
      </Fragment>
    );
  }
}
export default TodoListUI;

案例二

UI 组件

// UI容器 转发数据
import React, { useState, useEffect, useRef } from "react";
import styles from "./index.css";
import errorBoundary from "@ifeng/errorBoundary";
// 逻辑组件
import { useTags } from "./hooks/useTags";
const Tabs = () => {
  const { nodes, tagClick } = useTags();

  // 数据源
  const [title, setTitle] = useState(["全部", "审核中", "通过", "未通过"]);
  // 当前目标
  const [currentLeft, setCurrentLfet] = useState(25);
  //
  const linkRef = useRef();

  useEffect(() => {
    // console.log(linkRef);
  }, []);

  // 状态类型（默认''/1采用/0不采用/-1待处理）
  const handleClick = (e) => {
    const currentItem = e.target.innerHTML;

    // console.log(currentItem);
    switch (currentItem) {
      case "全部":
        setCurrentLfet(25);
        tagClick("");
        break;
      case "审核中":
        setCurrentLfet(95);
        tagClick("-1");
        break;
      case "通过":
        setCurrentLfet(160);
        tagClick("1");
        break;
      case "未通过":
        setCurrentLfet(225);
        tagClick("0");
        break;
      default:
        break;
    }
  };

  return (
    <div className={styles.wrap}>
      <div className={styles.title}>我的爆料</div>
      <div className={styles.tabs}>
        {title.map((item, index) => {
          return (
            <div className={styles.tab} key={index} ref={linkRef}>
              <div className={styles.itemTitle} onClick={(e) => handleClick(e)}>
                {item}
              </div>
            </div>
          );
        })}
        <div className={styles.link} style={{ left: currentLeft }} />
      </div>
    </div>
  );
};

export default errorBoundary(Tabs);

逻辑组件（useHooks）

import { useState } from "react";
import { getMySpillList } from "../../service";
import { Store } from "../../store/index";

const useTags = () => {
  // 获取全局状态
  const store = Store.useContainer();
  const { states, changeStates } = store;
  const { status, nodes, size, total, isLoading } = states;

  // 请求菜单数据
  const fetchTabList = async (e) => {
    try {
      // 开始为加载中
      changeStates({ isLoading: true });

      const initPage = 1;
      const res = await getMySpillList({ page: initPage, size: 20, status: e });

      // 判断加载成功
      if (res) {
        changeStates({ isLoading: false });
      }

      const { nodes } = res;

      // 设置状态总列表
      changeStates({
        // 目标数据
        parties: nodes, // 目标列表
        // 页数信息
        page: initPage + 1, // 自动变为下一页
        size,
        total,
      });
    } catch (e) {
      console.log(e);
    }
  };

  // tag切换
  const tagClick = (e) => {
    console.log(e);
    // 状态类型（默认all/1采用/0不采用/-1待处理）
    if (status === e) {
      console.log("不跳转");

      return;
    }
    changeStates({
      // 目标数据
      parties: [], // 每次清除数据，使用数据重新加载（避免从当前位置加载）
      status: e, // 目标类型
    });
    // 请求对应菜单数据
    fetchTabList(e);
  };

  return { nodes, tagClick };
};

export { useTags };

案例一(推荐)​

案例二​

参考​

案例一(推荐)

案例二

参考