React（7）

hooks

封装自定义hook通用思路
//1.声明一个以use打头的函数
// 2.在函数体内封装可复用的逻辑(只要是可复用的逻辑)
// 3.把组件中用到的状态或者回调return出去(以对象或者数组)
// 4.在哪个组件中要用到这个逻辑，就执行这个函数，解构出来状态和回调进行使用

import {  useState } from "react";
function Son() {
  return <div>son组件</div>;
}
// 自定义hooks 
// 注意函数的写法为匿名函数还是声明函数
function useTaggle() {
  const [Show, setShow] = useState(true);
  function taggle (){setShow(!Show)} 
  return {
    Show,
    taggle,
  };
}
function App() {
  // 在组件中使用需要进行结构
  const { Show, taggle } = useTaggle();
  // const [Show, setShow] = useState(true);
  // const taggle=setShow(!Show)
  return (
    <div className="App">
      {Show && <Son></Son>}
      <button onClick={taggle}>卸载组件</button>
    </div>
  );
}

export default App;

使用规则

只能在组件中或者其他自定义HOOK函数中使用

只能在组件的顶层调用  不能在if for 其他函数中使用

事例

import { useEffect, useState } from "react";
import "./index.css";
import _ from "lodash";
import classNames from "classnames";
import axios from "axios";
const list = [
  { id: 1, username: "aaName", content: "一条评论", ctime: "10-17 05:15", number: 4 },
  { id: 2, username: "bbName", content: "2条评论", ctime: "10-14 05:15", number: 56 },
  { id: 3, username: "ccName", content: "3条评论", ctime: "11-17 05:15", number: 433 },
  { id: 4, username: "ddName", content: "5条评论", ctime: "12-12 05:15", number: 3333 },
];
const user = { id: 2, username: "master" };
const HOT = [
  { type: "hot", name: "最热" },
  { type: "new", name: "最新" },
];
// 创建use开头的hooks函数  因为getlist函数直接调用了并且使用了useState的set方法  所以只要一个原数组和修改数组方法就行
function useList() {
  const [commitList, setCommitList] = useState([]);
  useEffect(() => {
    async function getList() {
      const res = await axios.get("http://localhost:3004/list");
      console.log(res);
      setCommitList(_.orderBy(res.data, "number", "desc"));
    }
    getList();
  }, []);
  return {
    commitList,
    setCommitList,
  };
}
function App() {
  //   const [commitList, setCommitList] = useState([]);
  // useEffect(()=>{
  //  async function getList(){
  //     const res= await axios.get('http://localhost:3004/list')
  //     console.log(res);
  //     setCommitList(_.orderBy(res.data,'number','desc'))
  //   }
  //   getList()
  // },[])
  const { commitList, setCommitList } = useList();

  const [type, setType] = useState("hot");
  // 删除按钮
  function handleClick(id) {
    console.log(id);
    setCommitList(commitList.filter((item) => item.id !== id));
  }
  function changeType(type) {
    setType(type);
    if (type == "hot") {
      setCommitList(_.orderBy(commitList, "number", "desc"));
    } else {
      setCommitList(_.orderBy(commitList, "ctime", "desc"));
    }
  }
  return (
    <div className="App">
      <div>
        {HOT.map((item) => (
          <span
            key={item.type}
            onClick={() => changeType(item.type)}
            className={classNames({ active: type === item.type }, "box")}
          >
            {/* className={`${type === item.type && "active"}`} */}
            {item.name}
          </span>
        ))}
      </div>
      <input></input>
      <button>发送</button>
      {commitList.map((item) => (
        <div key={item.id} style={{ borderBottom: " solid 1px", width: "400px" }}>
          <p> 用户：{item.username}</p>
          <p> 评论:{item.content}</p>
          <p> 点赞数：{item.number}</p>
          <p> 时间：{item.ctime}</p>
          {/* 只有满足时候才会显示删除按钮 */}
          {user.id === item.id && <button onClick={() => handleClick(item.id)}>删除按钮</button>}
        </div>
      ))}
    </div>
  );
}

export default App;