今天聊一下四个真秀React用法，你值得拥有

import React, { useState, useEffect } from "react";

const Test = () => {
  const [page, setPage] = useState(1);
  const [filterParams, setFilterParams] = useState({});
  const [data, setData] = useState([]);
  const form = useRef();

  useEffect(() => {
    // 当page 或 搜索条件发生变化的时候，重新请求表格数据
    fetch("/loadData", {
      method: "get",
      params: {
        page: page,
        ...filterParams,
      },
    }).then((data) => {
      setData(data);
    });
  }, [page, filterParams]);

  function handleSearch() {
    // 通过 validateFields 异步获取表单的值
    form.current.validateFields().then((formData) => {
      // 设置搜索条件
      setFilterParams(formData);
      // 将页码置为1
      setPage(1);
    });
  }

  return (
    <>
      <Form ref={form}>
        <span>表单元素</span>
        <Button onClick={handleSearch}>搜索</Button>
      </Form>
      <Table data={data} pagination={{ page: page }}></Table>
    </>
  );
};

复制

  function handleSearch() {
    // 通过 validateFields 异步获取表单的值
    form.current.validateFields().then((formData) => {
      unstable_batchedUpdates(() => {
        // 设置搜索条件
        setFilterParams(formData);
        // 将页码置为1
        setPage(1);
      })
    });
  }

复制

  const useLayoutResize = () => {
  const [size, setSize] = useState({
    width: 0,
    height: 0,
  });

  useEffect(() => {
    function handleResize() {
      const layout = document.querySelector(".layout");
      const bound = layout.getBoundingClientRect();
      setSize({
        width: bound.width,
        height: bound.height,
      });
    }
    window.addEventListener("resize", handleResize);
    return () => {
      window.removeEventListener("resize", handleResize);
    };
  }, []);

  return [size];
};

export default useLayoutResize;

复制

  const [size] = useLayoutResize();
  useEffect(() => {
    console.log("宽度发生了变化", size.width);
  }, [size.width]);

复制

const subscribes = new Map();
let subId = -1;
let size = {};
let layout = undefined;

const layoutResponsiveObserve = {
  // 触发订阅事件
  dispatch(currentSize) {
    size = currentSize;
    subscribes.forEach((func) => func(size));
    return subscribes.size > 0;
  },
  // 订阅事件
  subscribe(func) {
    // 如果监听事件还没有注册，则注册监听事件
    if (!subscribes.size) {
      this.register();
    }
    subId += 1;
    subscribes.set(subId, func);
    func(size);
    return subId;
  },
  unSubscribe(id) {
    subscribes.delete(id);
    if (!subscribes.size) {
      this.unRegister();
    }
  },
  register() {
    if (!layout) {
      // 初始化layout
      layout = document.querySelector(".layout");
      // addEventListener会导致 handleListener的this指向有问题，所以在这里bind一下
      this.handleListener = this.handleListener.bind(this);
    }
    window.addEventListener("resize", this.handleListener);
    this.handleListener();
  },
  unRegister() {
    window.removeEventListener("resize", this.handleListener);
    subscribes.clear();
  },
  handleListener() {
    const bound = layout.getBoundingClientRect();
    const size = {
      width: bound.width,
      height: bound.height,
    };
    this.dispatch(size);
  },
};

export default layoutResponsiveObserve;

复制

import React, { useEffect, useMemo, useState } from "react";
import layoutResponsiveObserve from "./layoutResponsiveObserve";
const useLayoutResize = () => {
  const [size, setSize] = useState({
    width: 0,
    height: 0,
  });
  useEffect(() => {
    // 监听
    const token = layoutResponsiveObserve.subscribe((size) => {
      setSize(size);
    });
    // 组件销毁时取消监听
    return () => {
      layoutResponsiveObserve.unSubscribe(token);
    };
  }, []);

  return [size];
};

export default useLayoutResize;

复制

const Test = () => {
  useEffect(() => {
    const array = "";
    // 这里明显是错的
    array.push(3);
  }, []);

  return <div>这是一个🌰</div>;
};

export default Test;

复制

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      hasError: false,
    };
  }

  static getDerivedStateFromError(error) {
    return {
      hasError: true,
    };
  }

  componentDidCatch(error, errorInfo) {
    // 可以在这里上报错误日志
  }

  render() {
    if (this.state.hasError) {
      return (
        <Result
          status="error"
          title="哇哦，出现了错误"
          subTitle="请联系管理员"
        ></Result>
      );
    }
    return this.props.children;
  }
}

export default ErrorBoundary;

复制

// 定义一个组件
const Child = () => {
  return <div>子组件</div>
}

// 在父页面使用异常边界组件
const Parent = () => {

  return <>
    <ErrorBoundary><Child/></ErrorBoundary>
    <ErrorBoundary><Child2/></ErrorBoundary>
    <ErrorBoundary><Child3/></ErrorBoundary>
  </>
} 

复制

<input type="radio" name="colors" id="red">红色<br>
<input type="radio" name="colors" id="blue">蓝色<br>
<input type="radio" name="colors" id="yellow">黄色<br>

复制

  <Radio.Group>
    <Radio value="red">红色</Radio>
    <Radio value="blue">蓝色</Radio>
    <Radio value="yellow">黄色</Radio>
  </Radio.Group>

复制

import React from "react";

export interface IProps {
  name?: string;
  value: any;
}

const Radio: React.FunctionComponent<React.PropsWithChildren<IProps>> = ({
  name,
  value,
  children,
}) => {
  // 示例代码，未定义样式
  return (
    <label>
      <span>
        <input type="radio" name={name} value={value}></input>
      </span>
      <span>{children}</span>
    </label>
  );
};

export default Radio;

复制

import React from "react";

export interface IProps {
  name?: string;
}

const Group: React.FunctionComponent<React.PropsWithChildren<IProps>> = ({
  name,
  children,
}) => {
  return <div>{children}</div>;
};

export default Group;

复制

import InnerRadio, { IProps as RadioProps } from "./Radio";
import Group from "./Group";
import React from "react";

export interface CompoundedComponent
  extends React.FunctionComponent<RadioProps> {
  Group: typeof Group;
}

const Radio = InnerRadio as CompoundedComponent;
Radio.Group = Group;
export default Radio;

复制

 <Radio.Group>
    <Radio name="a" value="red">
      红色
    </Radio>
    <Radio name="a" value="blue">
      蓝色
    </Radio>
  </Radio.Group>

复制

export interface IProps {
  name: string;
  children: React.ReactNode;
}

const Group: React.FC<IProps> = ({ name, children }) => {
  return (
    <div>
      {React.Children.map(children, (child) => {
        if (React.isValidElement(child)) {
          return React.cloneElement(child, {
            name: name,
          });
        }
        throw new Error("子组件必须是React.ReactElement类型");
      })}
    </div>
  );
};

复制

  <List>
    <List.Item key="1">1</Listm.Item>
    <List.Item key="2">2</Listm.Item>
    <List.Item key="3">3</Listm.Item>
    <List.Item key="4">4</Listm.Item>
    <List.Item key="5">5</Listm.Item>
    <List.Item key="6">6</Listm.Item>
  </List>

复制

const List: React.FC<IProps> = ({ children }) => {
  const length = useMemo(() => {
    return React.Children.count(children);
  }, [children]);

  // .....
};

复制

  const list = useMemo(() => {
    return React.Children.toArray(children).slice(0,10)
  },[children])

复制