20230527----重返学习-React复合组件通信方案-TodoList组件拆分-React组件二次封装

已于 2023-05-28 01:59:35 修改
阅读量634 收藏
点赞数
分类专栏： 重返学习 React 文章标签： 学习 react.js javascript
于 2023-05-27 23:59:58 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/seetoyou/article/details/130907817
版权

day-079-seventy-nine-20230527-React复合组件通信方案-TodoList组件拆分-React组件二次封装

React复合组件通信方案

统一一个组件

  • /src/views/VoteStyle.jsx

    import styled from "styled-components";

const VoteStyle = styled.div`
  box-sizing: border-box;
  margin: 20px auto;
  padding: 10px 20px;
  width: 300px;
  border: 1px solid #ddd;

  .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    line-height: 50px;
    font-size: 18px;
    border-bottom: 1px dashed #ddd;

    span {
      color: #ff4d4f;
    }
  }

  .main-box {
    padding: 10px 0;

    p {
      font-size: 14px;
      line-height: 30px;
    }
  }

  .footer-box {
    .ant-btn {
      margin-right: 10px;
    }
  }
`;
export default VoteStyle;

  • /src/views/Vote.jsx

    import { useState } from "react";
import { Button } from "antd";
import VoteStyle from "./VoteStyle";
export default function Vote() {
  let [supNum, setSupNum] = useState(10);
  let [oppNum, setOppNum] = useState(5);
  // 定义普通函数；
  const handle = (type) => {
    if (type === `sup`) {
      setSupNum(supNum + 1)
      return
    }
    setOppNum(oppNum + 1)
  }
  return (
    <VoteStyle>
      <h2 className="title">
        React其实也不难!
        <span>{supNum + oppNum}</span>
      </h2>
      <div className="main-box">
        <p>支持人数：{supNum} 人</p>
        <p>反对人数：{oppNum} 人</p>
      </div>
      <div className="footer-box">
        <Button type="primary" onClick={handle.bind(null, `sup`)}>
          支持
        </Button>
        <Button type="primary" danger onClick={handle.bind(null, `opp`)}>
          反对
        </Button>
      </div>
    </VoteStyle >
  );
}

父子组件通信

  • 核心就是属性。
基于属性props的父子组件通信

  1. 父传子：父组件想把自己的一些信息传递给子组件进行渲染。

    • 可以基于属性和插槽处理。
      1. 不过大多是使用属性，因为属性也可以传递jsx类型。
      2. 基于属性与插槽传递信息是单向数据流：只有父组件可基于属性与插槽把信息传递给子组件，子组件是无法基于属性把信息给父组件的！

      • 在父组件调用子组件的时候，可以把一些数据或者jsx元素，基于属性传递给子组件。

        <Child x={10}></Child>

        <Child x={<div>55</div>}></Child>

      • 插槽的操作在vue中很常用，因为vue有明确的插槽处理机制。但是在React中，所谓的插槽信息，也都是我们基于props.children与React.Children自己处理的，所以插槽机制用的不多！

  2. 子传父：在子组件中，可以把一些自己的信息传递给父亲，或者修改父亲中的一些数据信息。

    • 子传父也被叫做子改父。
    1. 首先，父亲把自己的一个方法(这个方法一般是修改自己内部状态值的)，基于属性传递给子组件；
    2. 子组件内部获取这个属性或这个方法，这样就可以基于这个方法的执行，把父组件中的信息进行修改了！

  • 或者具备相同父亲的兄弟组件通信：

    1. 把需要通信的信息给父亲管理，然后基于父传子、子改父，即可实现通信。

  • 父子通信『或者是具备相同父亲的兄弟组件通信』：

    • 父传子：基于属性或者插槽。
      • 还有一种方法，父组件基于ref拿到子组件实例，通过子组件进行修改。
    • 子改(传)父：父组件基于属性把函数传递子组件，子组件内部执行这个函数。
基于父子组件的prop传参实现的代码

  • /src/views/VoteStyle.jsx

    import styled from "styled-components";

const VoteStyle = styled.div`
  box-sizing: border-box;
  margin: 20px auto;
  padding: 10px 20px;
  width: 300px;
  border: 1px solid #ddd;

  .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    line-height: 50px;
    font-size: 18px;
    border-bottom: 1px dashed #ddd;

    span {
      color: #ff4d4f;
    }
  }

  .main-box {
    padding: 10px 0;

    p {
      font-size: 14px;
      line-height: 30px;
    }
  }

  .footer-box {
    .ant-btn {
      margin-right: 10px;
    }
  }
`;
export default VoteStyle;

  • /src/views/Vote.jsx

    import { useState } from "react";
import VoteStyle from "./VoteStyle";
import VoteMain from "./VoteMain";
import VoteFooter from "./VoteFooter";

export default function Vote() {
  // 父组件具备状态和修改状态的方法
  let [supNum, setSupNum] = useState(10),
    [oppNum, setOppNum] = useState(5);
  const change = (type) => {
    if (type === "sup") {
      setSupNum(supNum + 1);
      return;
    }
    setOppNum(oppNum + 1);
  };

  return (
    <VoteStyle>
      <h2 className="title">
        React其实也不难!
        <span>{supNum + oppNum}</span>
      </h2>
      {/* 基于属性把支持数/反对数传递给子组件 */}
      <VoteMain supNum={supNum} oppNum={oppNum} />
      {/* 基于属性把修改状态的方法传递给子组件 */}
      <VoteFooter change={change} />
    </VoteStyle>
  );
}

  • /src/views/VoteFooter.jsx

    import { PureComponent } from "react";
import { Button } from "antd";
import PT from "prop-types";

export default class VoteFooter extends PureComponent {
  // 属性规则校验
  static propTypes = {
    change: PT.func.isRequired,
  };

  render() {
    let { change } = this.props;
    return (
      <div className="footer-box">
        <Button type="primary" onClick={change.bind(null, "sup")}>
          支持
        </Button>
        <Button type="primary" danger onClick={change.bind(null, "opp")}>
          反对
        </Button>
      </div>
    );
  }
}

  • /src/views/VoteMain.jsx

    import { memo, useMemo } from "react";
import PT from "prop-types";
const VoteMain = function VoteMain(props) {
  let { supNum, oppNum } = props;
  let ratio = useMemo(() => {
    let result = "- -",
      total = supNum + oppNum;
    if (total > 0) {
      result = ((supNum / total) * 100).toFixed(2) + "%";
    }
    return result;
  }, [supNum, oppNum]);

  return (
    <div className="main-box">
      <p>支持人数：{supNum} 人</p>
      <p>反对人数：{oppNum} 人</p>
      <p>支持比率：{ratio}</p>
    </div>
  );
};
// 属性的规则校验
VoteMain.defaultProps = {
  supNum: 0,
  oppNum: 0,
};
VoteMain.propTypes = {
  supNum: PT.number,
  oppNum: PT.number,
};
export default memo(VoteMain);
基于ref的父子组件通信
  • 父子通信还有一种特殊的方法：
    • 在父组件中，我们可以基于 ref 获取 子组件的实例（或者子组件暴露的信息和方法），从而让父亲很容易的操作儿子和获取儿子中的信息！
    • 但是此方法，执行在父亲中获取儿子的实例，在儿子中是无法获取父亲的实例的！
      • 要拿到的话，很乱。就是在父组件创建的ref对象添加自定义属性，自定义属性的值为父组件想要传给子组件的数据。
        • 基于ref的父子组件通信-复用ref对象可以被修改-结合类似于props的操作。
基于父子组件的ref传参实现的代码

  • /src/views/VoteStyle.jsx

    import styled from "styled-components";

const VoteStyle = styled.div`
  box-sizing: border-box;
  margin: 20px auto;
  padding: 10px 20px;
  width: 300px;
  border: 1px solid #ddd;

  .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    line-height: 50px;
    font-size: 18px;
    border-bottom: 1px dashed #ddd;

    span {
      color: #ff4d4f;
    }
  }

  .main-box {
    padding: 10px 0;

    p {
      font-size: 14px;
      line-height: 30px;
    }
  }

  .footer-box {
    .ant-btn {
      margin-right: 10px;
    }
  }
`;
export default VoteStyle;

  • /src/views/Vote.jsx

    import { useRef, useEffect } from "react";
import VoteStyle from "./VoteStyle";
import VoteMain from "./VoteMain";
import VoteFooter from "./VoteFooter";

export default function Vote() {
  let mainIns = useRef(),
    footerIns = useRef(),
    subBox = useRef();

  useEffect(() => {
    let { supNum, oppNum, change } = mainIns.current;
    subBox.current.innerHTML = supNum + oppNum;

    let { supBtn, oppBtn } = footerIns.current;
    supBtn.current.addEventListener("click", change.bind(null, "sup"));
    oppBtn.current.addEventListener("click", change.bind(null, "opp"));
  }, []);

  return (
    <VoteStyle>
      <h2 className="title">
        React其实也不难!
        <span ref={subBox}>0</span>
      </h2>
      <VoteMain ref={mainIns} />
      <VoteFooter ref={footerIns} />
    </VoteStyle>
  );
}

  • /src/views/VoteFooter.jsx

    import { Component, createRef } from "react";
import { Button } from "antd";

export default class VoteFooter extends Component {
  supBtn = createRef();
  oppBtn = createRef();

  render() {
    return (
      <div className="footer-box">
        <Button type="primary" ref={this.supBtn}>
          支持
        </Button>
        <Button type="primary" danger ref={this.oppBtn}>
          反对
        </Button>
      </div>
    );
  }
}

  • /src/views/VoteMain.jsx

    import { useState, useMemo, forwardRef, useImperativeHandle } from "react";

const VoteMain = function VoteMain(props, ref) {
  // 定义状态
  let [supNum, setSupNum] = useState(10),
    [oppNum, setOppNum] = useState(5);

  // 计算支持比率
  let ratio = useMemo(() => {
    let result = "- -",
      total = supNum + oppNum;
    if (total > 0) {
      result = ((supNum / total) * 100).toFixed(2) + "%";
    }
    return result;
  }, [supNum, oppNum]);

  // 修改状态的方法
  const change = (type) => {
    console.log("AAA");
    if (type === "sup") {
      setSupNum(supNum + 1);
      return;
    }
    setOppNum(oppNum + 1);
  };

  // 暴露信息给外面使用
  useImperativeHandle(ref, () => {
    return {
      supNum,
      oppNum,
      change,
    };
  });

  return (
    <div className="main-box">
      <p>支持人数：{supNum} 人</p>
      <p>反对人数：{oppNum} 人</p>
      <p>支持比率：{ratio}</p>
    </div>
  );
};

export default forwardRef(VoteMain);
基于父子组件的ref传参优化-复用ref对象可以被修改-结合类props操作

  • /src/views/VoteStyle.jsx

    import styled from "styled-components";

const VoteStyle = styled.div`
  box-sizing: border-box;
  margin: 20px auto;
  padding: 10px 20px;
  width: 300px;
  border: 1px solid #ddd;

  .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    line-height: 50px;
    font-size: 18px;
    border-bottom: 1px dashed #ddd;

    span {
      color: #ff4d4f;
    }
  }

  .main-box {
    padding: 10px 0;

    p {
      font-size: 14px;
      line-height: 30px;
    }
  }

  .footer-box {
    .ant-btn {
      margin-right: 10px;
    }
  }
`;
export default VoteStyle;

  • /src/views/Vote.jsx

    import { useRef, useEffect, useState } from "react";
import VoteStyle from "./VoteStyle";
import VoteMain from "./VoteMain";
import VoteFooter from "./VoteFooter";

export default function Vote() {
  let mainIns = useRef(), //{current:null}
    footerIns = useRef(),
    subBox = useRef();

  // 基于ref的父子组件通信-复用ref对象可以被修改-结合类props操作
  let [total, setTotal] = useState(0);
  mainIns.changeTotal = setTotal;

  useEffect(() => {
    let { supNum, oppNum, change } = mainIns.current;
    subBox.current.innerHTML = supNum + oppNum;

    let { supBtn, oppBtn } = footerIns.current;
    //supBtn.current.addEventListener("click", change.bind(null, "sup"));//这里会造成内存泄露，只绑定不删除。
    //oppBtn.current.addEventListener("click", change.bind(null, "opp"));
    let callback1 = change.bind(null, "sup");
    supBtn.current.addEventListener("click", callback1);
    let callback2 = change.bind(null, "opp");
    oppBtn.current.addEventListener("click", callback2);
    return () => {
      supBtn.current.removeEventListener("click", callback1);
      oppBtn.current.removeEventListener("click", callback2);
    };
  }, [total]);

  return (
    <VoteStyle>
      <h2 className="title">
        React其实也不难!
        <span ref={subBox}>{total}</span>
      </h2>
      <VoteMain ref={mainIns} />
      <VoteFooter ref={footerIns} />
    </VoteStyle>
  );
}

  • /src/views/VoteFooter.jsx

    import { Component, createRef } from "react";
import { Button } from "antd";

export default class VoteFooter extends Component {
  supBtn = createRef();
  oppBtn = createRef();

  render() {
    return (
      <div className="footer-box">
        <Button type="primary" ref={this.supBtn}>
          支持
        </Button>
        <Button type="primary" danger ref={this.oppBtn}>
          反对
        </Button>
      </div>
    );
  }
}

  • /src/views/VoteMain.jsx

    import { useState, useMemo, forwardRef, useImperativeHandle } from "react";

const VoteMain = function VoteMain(props, ref) {
  // 定义状态
  let [supNum, setSupNum] = useState(10),
    [oppNum, setOppNum] = useState(5);

  // 计算支持比率
  let ratio = useMemo(() => {
    let result = "- -",
      total = supNum + oppNum;
    if (total > 0) {
      result = ((supNum / total) * 100).toFixed(2) + "%";
    }
    return result;
  }, [supNum, oppNum]);

  let { changeTotal } = ref;

  // 修改状态的方法
  const change = (type) => {
    console.log("AAA", changeTotal); //如果不在父组件移除旧绑定的事件的话。可以看到这里，会越点打印得越多，也就是内存泄露。
    if (type === "sup") {
      setSupNum(supNum + 1);
      changeTotal(oppNum + supNum + 1);
      return;
    }
    setOppNum(oppNum + 1);
    changeTotal(oppNum + supNum + 1);
  };

  // 暴露信息给外面使用
  useImperativeHandle(ref, () => {
    return {
      supNum,
      oppNum,
      change,
    };
  });

  return (
    <div className="main-box">
      <p>支持人数：{supNum} 人</p>
      <p>反对人数：{oppNum} 人</p>
      <p>支持比率：{ratio}</p>
    </div>
  );
};

export default forwardRef(VoteMain);

祖先和后代组件的通信

  • 祖先和后代组件的通信，或者具备相同祖先的平行组件通信：
    • 如果是基于属性，则需要一层层的传递，太麻烦了！
    • 我们基于context上下文方案处理：
      • 把需要共享的信息，放在祖先的上下文中。
        1. 上下文可以理解为就是一个容器。
        • Provider
      • 后代组件需要什么信息，只需要去上下文中获取即可：
        • 函数组件：useContext
        • 类组件：static contextType
        • …
具体步骤

  1. 把需要共享的信息，放在祖先组件的上下文中。

    1. 创建一个js文件，并且在js文件创建并导出一个React上下文对象。

      // 创建一个上下文对象
import { createContext } from "react";
const ThemeContext = createContext();//名称可以随意起。
export default ThemeContext;

    2. 让祖先元素具备：需要共享的状态及需要共享的修改状态的方法。

      import { useState } from "react";
export default function Vote() {
  let [supNum, setSupNum] = useState(10),
    [oppNum, setOppNum] = useState(5);
  const change = (type) => {
    if (type === "sup") {
      setSupNum(supNum + 1);
      return;
    }
    setOppNum(oppNum + 1);
  };
  console.log(ThemeContext.Provider);
}

    3. 在祖先元素中，把需要共享的数据放在上下文中。

      import ThemeContext from "../ThemeContext";
export default function Vote() {

  return (
    <ThemeContext.Provider
      value={{
        supNum,
        oppNum,
        change,
      }}
    >
      //...
    </ThemeContext.Provider>
  );
}

      import { useState } from "react";
import ThemeContext from "../ThemeContext";
// console.log(ThemeContext);
export default function Vote() {
  let [supNum, setSupNum] = useState(10),
    [oppNum, setOppNum] = useState(5);
  const change = (type) => {
    if (type === "sup") {
      setSupNum(supNum + 1);
      return;
    }
    setOppNum(oppNum + 1);
  };
  console.log(ThemeContext.Provider);

  return (
    <ThemeContext.Provider
      value={{
        supNum,
        oppNum,
        change,
      }}
    >
      //...
    </ThemeContext.Provider>
  );
}

  2. 后代组件需要什么信息，只需要去上下文中获取即可：

    • 单纯基于React上下文对象.Consumer组件获取上下文中存放信息。

      • 适用于所有类型的组件。

      • 弊端：用起来麻烦一些，组件的虚拟DOM层级凭空要多两层。

        import ThemeContext from "../ThemeContext";
export default function VoteMain() {
  return (
    <ThemeContext.Consumer>
      {(value) => {
        // value：存储的是所有上下文中的信息
        console.log(value, `value：存储的是所有上下文中的信息`);
        let { supNum, oppNum } = value;
        return (
          <div className="main-box">
            <p>支持人数：{supNum} 人</p>
            <p>反对人数：{oppNum} 人</p>
          </div>
        );
      }}
    </ThemeContext.Consumer>
  );
}

        import { Component } from "react";
import { Button } from "antd";
import ThemeContext from "../ThemeContext";
export default class VoteFooter extends Component {
  render() {
    return (
      <ThemeContext.Consumer>
        {(value) => {
          // value：存储的是所有上下文中的信息
          console.log(value, `value：存储的是所有上下文中的信息`);
          let { change } = value;
          return (
            <div className="footer-box">
              <Button type="primary" onClick={change.bind(null, "sup")}>
                支持
              </Button>
              <Button type="primary" danger onClick={change.bind(null, "opp")}>
                反对
              </Button>
            </div>
          );
        }}
      </ThemeContext.Consumer>
    );
  }
}

    • 函数组件：基于React上下文对象.Consumer组件与useContext()获取上下文中存放信息。

      import ThemeContext from "../ThemeContext";
import { useContext } from "react";
export default function VoteMain() {
  let context = useContext(ThemeContext); //获取所有上下文信息
  console.log(context, `context：存储的是所有上下文中的信息`);
  let { supNum, oppNum } = context;
  return (
    <div className="main-box">
      <p>支持人数：{supNum} 人</p>
      <p>反对人数：{oppNum} 人</p>
    </div>
  );
}

    • 类组件：基于React上下文对象.Consumer组件与类的contextType静态属性获取上下文中存放信息。

      import { Component } from "react";
import { Button } from "antd";
import ThemeContext from "../ThemeContext";
export default class VoteFooter extends Component {
  // 获取上下文中的信息
  static contextType = ThemeContext;
  render() {
    console.log(`this.context存储获取的上下文信息`, this.context);
    let { change } = this.context; // this.context存储获取的上下文信息;

    return (
      <div className="footer-box">
        <Button type="primary" onClick={change.bind(null, "sup")}>
          支持
        </Button>
        <Button type="primary" danger onClick={change.bind(null, "opp")}>
          反对
        </Button>
      </div>
    );
  }
}
基于祖先和后代组件的通信实现的代码

  • /src/ThemeContext.js

    // 创建一个上下文对象
import { createContext } from "react";
const ThemeContext = createContext();
export default ThemeContext;

  • /src/views/VoteStyle.jsx

    import styled from "styled-components";
const VoteStyle = styled.div`
  box-sizing: border-box;
  margin: 20px auto;
  padding: 10px 20px;
  width: 300px;
  border: 1px solid #ddd;

  .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    line-height: 50px;
    font-size: 18px;
    border-bottom: 1px dashed #ddd;

    span {
      color: #ff4d4f;
    }
  }

  .main-box {
    padding: 10px 0;

    p {
      font-size: 14px;
      line-height: 30px;
    }
  }

  .footer-box {
    .ant-btn {
      margin-right: 10px;
    }
  }
`;
export default VoteStyle;

  • /src/views/Vote.jsx

    import { useState } from "react";
import VoteStyle from "./VoteStyle";
import VoteMain from "./VoteMain";
import VoteFooter from "./VoteFooter";
import ThemeContext from "../ThemeContext";
// console.log(ThemeContext);
export default function Vote() {
  let [supNum, setSupNum] = useState(10),
    [oppNum, setOppNum] = useState(5);
  const change = (type) => {
    if (type === "sup") {
      setSupNum(supNum + 1);
      return;
    }
    setOppNum(oppNum + 1);
  };
  console.log(ThemeContext.Provider);

  return (
    <ThemeContext.Provider
      value={{
        supNum,
        oppNum,
        change,
      }}
    >
      <VoteStyle>
        <h2 className="title">
          React其实也不难!
          <span>{supNum + oppNum}</span>
        </h2>
        <VoteMain />
        <VoteFooter />
      </VoteStyle>
    </ThemeContext.Provider>
  );
}

  • /src/views/VoteFooter.jsx

    import { Component } from "react";
import { Button } from "antd";
import ThemeContext from "../ThemeContext";

export default class VoteFooter extends Component {
  // 获取上下文中的信息
  static contextType = ThemeContext;

  render() {
    console.log(`this.context存储获取的上下文信息`, this.context);
    let { change } = this.context; // this.context存储获取的上下文信息
    return (
      <div className="footer-box">
        <Button type="primary" onClick={change.bind(null, "sup")}>
          支持
        </Button>
        <Button type="primary" danger onClick={change.bind(null, "opp")}>
          反对
        </Button>
      </div>
    );
  }
}

/* export default class VoteFooter extends Component {
  render() {
    return (
      <ThemeContext.Consumer>
        {(value) => {
          // value：存储的是所有上下文中的信息
          console.log(value, `value：存储的是所有上下文中的信息`);
          let { change } = value;
          return <div className="footer-box">
            <Button type="primary" onClick={change.bind(null, "sup")}>
              支持
            </Button>
            <Button type="primary" danger onClick={change.bind(null, "opp")}>
              反对
            </Button>
          </div>;
        }}
      </ThemeContext.Consumer>
    );
  }
} */

  • /src/views/VoteMain.jsx

    import ThemeContext from "../ThemeContext";
import { useContext } from "react";

export default function VoteMain() {
  let context = useContext(ThemeContext); //获取所有上下文信息
  console.log(context, `context：存储的是所有上下文中的信息`);
  let { supNum, oppNum } = context;
  return (
    <div className="main-box">
      <p>支持人数：{supNum} 人</p>
      <p>反对人数：{oppNum} 人</p>
    </div>
  );
}

/* export default function VoteMain() {
  return (
    <ThemeContext.Consumer>
      {(value) => {
        // value：存储的是所有上下文中的信息
        console.log(value,`value：存储的是所有上下文中的信息`);
        let { supNum, oppNum } = value;
        return (
          <div className="main-box">
            <p>支持人数：{supNum} 人</p>
            <p>反对人数：{oppNum} 人</p>
          </div>
        );
      }}
    </ThemeContext.Consumer>
  );
} */

组件数据传递总结

  • 父子通信：属性「偶尔获取子组件实例/暴露方法」。

    • 备注：调用UI组件库中的组件，都是父子通信。
      • 所以虽然感觉父子组件间限制很多，但在业务中的应用场景反而是最多最常用的。

  • 小型项目中，非父子（或者也不是同一个父组件的），可以基于 祖先和后代「主要是上下文方案」进行处理！

    • 因为根组件必定可以是一个项目中所用到的所有业务组件的共同祖先元素。所以这种方式，理论上也可以当成是能通用的方式。

    • 但是一旦项目比较大，需要共享的信息多了，都放在祖先中也不方便维护和管理！

    • 所以除父子外，其余组件通信方式，我们一般采用的 “公共状态管理”

      • redux、react-redux、redux中间件。
      • @reduxjs/toolkit。
      • mobx。
      • Zustand。
      • …

TodoList组件拆分

TodoList组件拆分思路

  • TodoList组件拆分思路：
    • 一个父组件，内部存当前新增任务内容及子组件列表数据。
    • 一个子组件，根据父组件传的数据，渲染出一组数据。内部存子组件是否修改数据及子组件上预期要改的值。

TodoList组件拆分-代码实例

  • React阶段/day0527/src/views/TodoList.jsx

    import { useState, useEffect } from "react";
import { Button, Input, message } from "antd";
import styled from "styled-components";
import TodoItem from "./TodoItem";
// 具备有效期的LocalStorage存储
const storage = {
  set(key, value) {
    localStorage.setItem(
      key,
      JSON.stringify({
        time: +new Date(),
        value,
      })
    );
  },
  get(key, cycle = 2592000000) {
    cycle = +cycle;
    if (isNaN(cycle)) cycle = 2592000000;
    let data = localStorage.getItem(key);
    if (!data) return null;
    let { time, value } = JSON.parse(data);
    if (+new Date() - time > cycle) {
      storage.remove(key);
      return null;
    }
    return value;
  },
  remove(key) {
    localStorage.removeItem(key);
  },
};

// 组件样式
const TodoListStyle = styled.div`
  box-sizing: border-box;
  margin: 0 auto;
  width: 400px;
  .header {
    display: flex;
    align-items: center;
    padding-bottom: 20px;
    padding-top: 20px;
    border-bottom: 1px dashed #aaa;
    .ant-btn {
      margin-left: 10px;
    }
  }
  .main {
    padding-top: 20px;
    .item {
      margin-bottom: 20px;
      font-size: 14px;
      .ant-btn {
        margin-right: 10px;
      }
      .ant-input {
        width: 60%;
      }
      .text {
        padding-bottom: 10px;
      }
    }
  }
`;

export default function TodoList() {
  // 定义状态
  let [text, setText] = useState(""),
    [list, setList] = useState(() => {
      // 只有组件第一次渲染才会执行
      let data = storage.get("CACHE_TASKLIST");
      return data || [];
    });

  // 监听任务列表的变化，存储到本地
  useEffect(() => {
    console.log(`storage版本`);
    storage.set("CACHE_TASKLIST", list);
  }, [list]);

  // 新增任务
  const submit = () => {
    if (text.length === 0) {
      message.warning("任务描述不能为空!");
      return;
    }
    list.push({
      id: +new Date(),
      text,
    });
    setList([...list]);
    setText("");
  };

  // 修改/删除任务
  const handle = (type, id, updateText) => {
    if (type === "update") {
      // 修改任务
      list = list.map((item) => {
        if (+item.id === +id) {
          item.text = updateText;
        }
        return item;
      });
      setList(list);
      return;
    }
    // 删除任务
    list = list.filter((item) => +item.id !== +id);
    setList(list);
  };

  return (
    <TodoListStyle>
      <div className="header">
        <Input
          placeholder="请输入任务描述"
          value={text}
          onChange={(ev) => {
            setText(ev.target.value.trim());
          }}
        />
        <Button type="primary" onClick={submit}>
          新增任务
        </Button>
      </div>
      <ul className="main">
        {list.map((item) => {
          return <TodoItem key={item.id} info={item} handle={handle} />;
        })}
      </ul>
    </TodoListStyle>
  );
}

  • React阶段/day0527/src/views/TodoItem.jsx

    import { useState } from "react";
import { Button, Input, Popconfirm, message } from "antd";
import PT from "prop-types";

const TodoItem = function TodoItem(props) {
  // 接收属性 & 定义状态
  let { info, handle } = props;
  let [isUpdate, setIsUpdate] = useState(false),
    [updateText, setUpdateText] = useState("");

  // 触发修改状态
  const triggerUpdate = () => {
    setIsUpdate(true);
    setUpdateText(info.text);
  };

  // 取消修改
  const cancelUpdate = () => {
    setIsUpdate(false);
    setUpdateText("");
  };

  // 保存任务
  const saveInfo = () => {
    if (updateText.length === 0) {
      message.warning("修改的任务描述不能为空");
      return;
    }
    handle("update", info.id, updateText);
    cancelUpdate();
  };

  // 删除任务
  const removeInfo = () => {
    handle("delete", info.id);
  };

  return (
    <li className="item">
      <p className="text">
        {isUpdate ? (
          <Input
            size="small"
            value={updateText}
            onChange={(ev) => {
              setUpdateText(ev.target.value.trim());
            }}
          />
        ) : (
          <span>{info.text}</span>
        )}
      </p>
      <p className="handle">
        <Popconfirm title="您确定要删除此任务吗？" onConfirm={removeInfo}>
          <Button type="primary" size="small" danger>
            删除
          </Button>
        </Popconfirm>
        {isUpdate ? (
          <>
            <Button type="primary" size="small" onClick={saveInfo}>
              保存
            </Button>
            <Button size="small" onClick={cancelUpdate}>
              取消
            </Button>
          </>
        ) : (
          <Button type="primary" size="small" onClick={triggerUpdate}>
            修改
          </Button>
        )}
      </p>
    </li>
  );
};
/* 属性规则校验 */
TodoItem.defaultProps = {};
TodoItem.propTypes = {
  info: PT.object.isRequired,
  handle: PT.func.isRequired,
};

export default TodoItem;

React组件二次封装

封装一个antd按钮，在执行点击事件后，会进行loading。

未封装之前

  • /src/views/Demo.jsx

    import { Button } from "antd";
import { useState } from "react";
const delay = function delay(interval = 1000) {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve();
    }, interval);
  });
};
const Demo = function Demo() {
  let [loading, setLoading] = useState(false);

  const handle = async () => {
    setLoading(true);
    try {
      await delay(2000);
      // ...
    } catch (_) {}
    setLoading(false);
  };

  return (
    <div className="demo-box" style={{ margin: "20px auto", width: "64px" }}>
      <Button type="primary" danger loading={loading} onClick={handle}>
        删除
      </Button>
    </div>
  );
};
export default Demo;

封装步骤

  1. 把传递的属性拷贝一份，这样就可以直接操作props了。

  2. 把特殊的几个属性值移除掉并且做特殊处理。

    • 一些事件相关的属性值。

      • 如：onClick:点击时候要干的事{传递的handle函数}

    • 一些要进行二次封装的属性值。

      • 如：loading:我们可以把传递的loading作为我们自己管理的loading的初始值。

    • 插槽-children属性。

      • 如：children:插槽信息。

    • 特殊处理要配合状态或bind改指向之类的。

        let [submitLoading, setSubmitLoading] = useState(!!loading);
  const submit = async (ev) => {
    setSubmitLoading(true);
    try {
      if (typeof onClick === "function") {
        await onClick(ev);
      }
    } catch (_) {}
    setSubmitLoading(false);
  };

  3. 把处理过后的属性及插槽设置在原组件上。

    <Button {...props} loading={submitLoading} onClick={submit}>
  {children}
</Button>

/* 对Antd中Button组件的二次封装：自动加Loading防抖处理 */
import { Button } from "antd";
import { useState } from "react";

const ButtonAgain = function ButtonAgain(props) {
  // 把传递的属性拷贝一份，这样就可以直接操作props了
  props = { ...props };
  // onClick:点击时候要干的事{传递的handle函数}
  // children:插槽信息
  // loading:我们可以把传递的loading作为我们自己管理的loading的初始值
  let { onClick, children, loading } = props;
  // 把特殊的几个属性值移除掉
  if (props.onClick) delete props.onClick;
  if (props.loading) delete props.loading;
  if (props.children) delete props.children;

  // 自己要做的特殊处理
  let [submitLoading, setSubmitLoading] = useState(!!loading);
  const submit = async (ev) => {
    setSubmitLoading(true);
    try {
      if (typeof onClick === "function") {
        await onClick(ev);
      }
    } catch (_) {}
    setSubmitLoading(false);
  };

  // 剩下的属性，原封不动的给Antd中的Button即可
  return (
    <Button {...props} loading={submitLoading} onClick={submit}>
      {children}
    </Button>
  );
};
export default ButtonAgain;

封装之后

  • /src/components/ButtonAgain.jsx

    /* 对Antd中Button组件的二次封装：自动加Loading防抖处理 */
import { Button } from "antd";
import { useState } from "react";

const ButtonAgain = function ButtonAgain(props) {
  // 把传递的属性拷贝一份，这样就可以直接操作props了
  props = { ...props };
  // onClick:点击时候要干的事{传递的handle函数}
  // children:插槽信息
  // loading:我们可以把传递的loading作为我们自己管理的loading的初始值
  let { onClick, children, loading } = props;
  // 把特殊的几个属性值移除掉
  if (props.onClick) delete props.onClick;
  if (props.loading) delete props.loading;
  if (props.children) delete props.children;

  // 自己要做的特殊处理
  let [submitLoading, setSubmitLoading] = useState(!!loading);
  const submit = async (ev) => {
    setSubmitLoading(true);
    try {
      if (typeof onClick === "function") {
        await onClick(ev);
      }
    } catch (_) {}
    setSubmitLoading(false);
  };

  // 剩下的属性，原封不动的给Antd中的Button即可
  return (
    <Button {...props} loading={submitLoading} onClick={submit}>
      {children}
    </Button>
  );
};
export default ButtonAgain;

  • /src/views/Demo.jsx

    import ButtonAgain from "../components/ButtonAgain";

const delay = function delay(interval = 1000) {
  console.log(1111);
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve();
    }, interval);
  });
};
const Demo = function Demo() {
  const handle = async (ev) => {
    try {
      await delay(2000);
      // ...
    } catch (_) {}
  };

  return (
    <div className="demo-box" style={{ margin: "20px auto", width: "200px" }}>
      <ButtonAgain type="primary" danger onClick={handle}>
        删除
      </ButtonAgain>

      <ButtonAgain type="primary" onClick={handle}>
        完成
      </ButtonAgain>

      <ButtonAgain
        onClick={(ev) => {
          console.log(ev);
        }}
      >
        哈哈哈
      </ButtonAgain>
    </div>
  );
};
export default Demo;

进阶参考

方朝端
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值