React 其他笔记

// HOC.tsx
//todo 封装一个高阶组件

//! 高阶组件是一个函数

//! 高阶组件名称中开头以 with
import React, { ReactNode } from "react";
export const withForwardRef = (Comp: any) => {
  //todo 接收组件作为参数
  //todo 返回值是一个新组件
  return class _ extends React.Component {
    //todo 多个组件复用的逻辑就可以写这里

    fn = () => {
      //todo 复用逻辑
      console.log("一万行复用逻辑");
    };

    render() {
      // 将复用的逻辑绑定在传入的组件身上
      return <Comp fn={this.fn} />;
    }
  };
};

// App.tsx
import React from "react";
import Tab from "./components/Tab";
import Content from "./components/Content";
import { withForwardRef } from "./hoc";

const HocTab = withForwardRef(Tab);
const HocContent = withForwardRef(Content);

export default function App() {
  return (
    <div>
      <h3> 高阶组件 </h3>
      <HocTab />
      <HocContent />
    </div>
  );
}

import React from "react";
import Hello from "./Hello";

export default function App() {
  return (
    <div>
      <ul>
        <Hello />
      </ul>
    </div>
  );
}

import React, { Fragment } from "react"; // 引入Fragment

export default function Hello() {
  return (
    <Fragment>
      {/* 替代div */}
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </Fragment>
  );
}

import React, { Profiler } from "react";

export default function App() {
  const callback = (
    id: any, // 发生提交的 Profiler 树的 “id”
    phase: any, // "mount" （如果组件树刚加载） 或者 "update" （如果它重渲染了）之一
    actualDuration: any, // 本次更新 committed 花费的渲染时间
    baseDuration: any, // 估计不使用 memoization 的情况下渲染整颗子树需要的时间
    startTime: any, // 本次更新中 React 开始渲染的时间
    commitTime: any, // 本次更新中 React committed 的时间
    interactions: any // 属于本次更新的 interactions 的集合
  ) => {
    console.log("id", id);
    console.log("phase", phase);
    console.log("actualDuration", actualDuration);
    console.log("baseDuration", baseDuration);
    console.log("startTime", startTime);
    console.log("commitTime", commitTime);
    console.log("interactions", interactions);
  };

  return (
    <div>
      <Profiler id="hello" onRender={callback}>
        <ul>
          <li>1</li>
          <li>2</li>
          <li>3</li>
        </ul>
      </Profiler>
    </div>
  );
}

import React from "react";
import ReactDOM from "react-dom";
import ToolTip from "./ToolTip";

export default function App() {
  const app: any = document.querySelector("#app");
  return ReactDOM.createPortal(<ToolTip />, app);
}