Vite+React

常用hook

useState

const [count, setCount] = useState(0)
setCount(new_val)
setCount((old_val)=>{return old_val+1})

useRef 

import { useRef } from 'react';
function MyComponent() {
  const number = useRef(0)
  const inputRef = useRef(null)
  return (
    <div>
      <input type="text" ref={inputRef} />
    </div>
  );
}

 useReducer 

import React, { useReducer } from 'react';
// 定义reducer函数
const reducer = (state, {type,payload}) => {
  switch(type) {
    case 'increment':
      return { ...state, count: state.count + 1 };
    case 'decrement':
      return { ...state, count: state.count - 1 };
    default:
      throw new Error();
  }
}
// 在组件中使用 useReducer
const Counter = () => {
  const [state, dispatch] = useReducer(reducer, { count: 0 });
  return (
    <div>
      Count: {state.count}
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
    </div>
  );
};

 useTransition 

import React, { useState, useTransition } from 'react';
function Example() {
  const [show, setShow] = useState(false);
  const [isPending, startTransition] = useTransition({ timeoutMs: 1000 });
  const handleClick = () => {
    startTransition(() => {
      setShow(!show);
    });
  }
  return (
    <div>
      <button onClick={handleClick} disabled={isPending}>
        {show ? '隐藏' : '显示'}
      </button>
      {isPending ? '正在加载...' : null}
      {show ? <div>这是要显示的内容</div> : null}
    </div>
  );
}

useDeferredValue  

import { useState, useDeferredValue } from 'react';  
function MyComponent(props) {
  const [data, setData] = useState([]);
  const deferredData = useDeferredValue(data);   
  // ...
  return (<div>内容</div>)
}

 useEffect

useEffect(() => {
    return ()=>{}
}, []);

useContext 

const TestContext = React.createContext();
//父组件
<TestContext.Provider 
	value={{
		username: 'superawesome',
	}}
>
	<div className="test">
		<Navbar />
		<Messages />
	</div>
<TestContext.Provider/>
//-------------------------------------------
//子组件
const Navbar = () => {
	const { username } = useContext(TestContext);
	return (
		<div>
			<p>{username}</p>
		</div>
	)
}

 useMemo和useCallback

//useMemo
import React, { useState, useMemo } from 'react';
function ExpensiveComponent(props) {
  const [count, setCount] = useState(0);
  // 计算结果
  const expensiveResult = useMemo(() => {
    return computeExpensiveValue(props.input);
  }, [props.input]);
  return <div>{expensiveResult}</div>;
}

//useCallback
import React, { useState, useCallback } from 'react';
function ParentComponent() {
  const [count, setCount] = useState(0);
  // 缓存的函数
  const increment = useCallback(() => {
    setCount(prevCount => prevCount + 1);
  }, [count]);
  return (
    <div>
      <button onClick={increment}>Increment</button>
    </div>
  )
}

useImperativeHandle和forwardRef

//父
import { useRef } from "react";
import Child from "./child ";
export default () => {
  const childRef = useRef();
  const childAdd = () => {
    //父组件调用子组件内部 add函数
    childRef.current.add();
  }
  return (
    <div>
      <div>父组件</div>
      <Child  ref={childRef}></C>
      <button onClick={childAdd}>调用子组件里面的add方法</button>
    </div>
  );
};
//----------------------------------
//子
import React, { useImperativeHandle, useState, forwardRef  } from 'react'
//就可以接收到父组件传过来的ref
export default forwardRef((props, ref) => {
  const [num, setNum] = useState(1)
  const add = () => {
    setNum(num + 1)
  }
  useImperativeHandle(ref, () => {
    return {
      add
    }
    //依赖的变量
  }, [num])
  return (
    <div>
      <div>{num}</div>
    </div>
  )
})

状态管理

使用redux

大屏适配(定义缩放比例)

//缩放元素element事先定义为居中
//定义缩放比例
function getScale(w = 1920, h = 1080) {
    const ww = window.innerWidth / w           //document.documentElement.clientWidth
    const wh = window.innerHeight / h          //document.documentElement.clientHeight
    return ww < wh ? wh/ww : ww/wh;                  //return { ww, wh }
}
//transform只写一项的话会覆盖掉原有的transform样式
window.onresize = () => {
    document.body.style.transform = `scale(${getScale()}) translate(-50%,-50%)`
}

参考模板

我的react模板