React_外部hooks及框架

React 数据请求

reactquery 这是一个适用于react hooks的请求库。 这个库将帮助你获取、同步、更新和缓存你的远程数据

useQuery（查）

知乎链接

封装

import { useQuery } from 'react-query';
import { useClient } from 'contexts';

function useAllJobsQuery() {
  const client = useClient();
  return useQuery('allJobs', async () => {
    const result = await client('getAllJobs', {
      method: 'POST',
    });
    if (result.code === 0) {
      return result.data.res;
    } else {
      return Promise.reject(result.message);
    }
  });
}
export default useAllJobsQuery;
export { useAllJobsQuery };

useMutation（增、改、删）操作

笔记链接

React 防抖

useDebounce地址
防抖：触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间（用于滚动条，输入框onchange搜索事件等等）

import React, { useState } from 'react';
import { useDebounce } from 'use-debounce';

export default function Input() {
  const [text, setText] = useState('Hello');
  const [value] = useDebounce(text, 1000);

  return (
    <div>
      <input
        defaultValue={'Hello'}
        onChange={(e) => {
          setText(e.target.value);
        }}
      />
      <p>Actual value: {text}</p>
      <p>Debounce value: {value}</p>
    </div>
  );
}

React 表单验证

useform表单验证
表单验证多个值提交

mport React from "react";
import { useForm } from "react-hook-form";

export default function App() {
  const { register, handleSubmit, watch, errors } = useForm();
  const onSubmit = data => console.log(data);

  console.log(watch("example")); // watch input value by passing the name of it

  return (
    {/* "handleSubmit" will validate your inputs before invoking "onSubmit" */}
    <form onSubmit={handleSubmit(onSubmit)}>
    {/* register your input into the hook by invoking the "register" function */}
      <input name="example" defaultValue="test" ref={register} />
      
      {/* include validation with required or other standard HTML validation rules */}
      <input name="exampleRequired" ref={register({ required: true })} />
      {/* errors will return when field validation fails  */}
      {errors.exampleRequired && <span>This field is required</span>}
      
      <input type="submit" />
    </form>
  );
}

React 图标库

react icons
各类UI图标

import { FaBeer } from 'react-icons/fa';
class Question extends React.Component {
  render() {
    return <h3> Lets go for a <FaBeer />? </h3>
  }
}

React 格式化CSS

地址

// this comment tells babel to convert jsx to calls to a function called jsx instead of React.createElement
/** @jsx jsx */
import { css, jsx } from '@emotion/react'

const color = 'white'

render(
  <div
    css={css`
      padding: 32px;
      background-color: hotpink;
      font-size: 24px;
      border-radius: 4px;
      &:hover {
        color: ${color};
      }
    `}
  >
    Hover to change color.
  </div>
)

React Virtual虚拟加载

后台数据过多时前台加载的时间会变慢 React Virtual 可以只加载定义条目数，超过条目数改变dom不会添加组件树dom

//展示数据信息(1000条)
import { useVirtual } from 'react-virtual';

const longList = Array.from({ length: 1000 }, (_, index) => index + 1);

  const parentRef = React.useRef();

  let rowVirtualizer = useVirtual({
    size: displayedJobs.length,//大小
    parentRef,  //必须，显示滚动条的标签
    estimateSize: React.useCallback(() => 18, []),//必须使用React.useCallback  120为盒子内每一项高度
    overscan: 20,//初始展示条目数，超过则改变当前已经渲染dom信息
  });
  
  
  
  <div
        style={{
          border: 'solid 1px #999',
          width: 100,
          height: 300,
          overflowY: 'auto',
        }}
        ref={parentRef} //父组件带滚动条
      >
        <ul
          css={{
            listStyle: 'none',
            height: `${rowVirtualizer.totalSize}px`,  //所有条目数高度 18*1000 = 18000px
            width: '100%',
            position: 'relative',
          }}
        >
          {rowVirtualizer.virtualItems.map((virtualRow) => (
            <li
              key={virtualRow.index}
              style={{//样式必须 position height transform top left
                textAlign: 'center',  
                position: 'absolute',
                top: 0,
                left: 0,
                width: '100%',
                height: `${virtualRow.size}px`,
                transform: `translateY(${virtualRow.start}px)`,
              }}
            >
             {longList[virtualRow.index]}  //virtualRow.index必须 通过索引遍历要显示的数组
            </li>
          ))}
        </ul>
      </div>