react hooks - 技术栈

hooks可以在不编写class组件的情况下使用state

1、useState会返回一对值：当前状态和一个更新值的函数

const [state, setState] = useState(initialState)

2、useEffect就是一个effect hooks，给函数组件增加了操作副作用的能力。相当于componentDidMount，componentDidUpdate，componentWillUnmount合成的api

componentWillUnmount： useEffect(() => {}, [])

componentDidUpdate： useEffect(() => {}, [value])

componentWillUnmount： useEffect(() => {return() => {}}, [])

3、useLayoutEffect：函数签名与useEffect相同，但它会在所有的dom变更之后同步调用effect

useEffect不会阻塞浏览器渲染，而useLayoutEffect会阻塞浏览器渲染

useEffect会在浏览器渲染结束后执行，而useLayoutEffect则是在dom更新完成以后，浏览器绘制之前执行

4、使用useMemo和useCallback来减少渲染

复制代码

import React from 'react';
import ReactDOM from 'react-dom';
let Child = ({ onBtnClick, data }) => {
  console.log("Child render");
  return <button onClick={onBtnClick}>{data.number}</button>;
}
Child = React.memo(Child);

function App() {
  const [number, setNumber] = React.useState(0);
  const [name, setName] = React.useState("baobao");
  const addClick = React.useCallback(() => setNumber(number + 1), [number]);
  const data = React.useMemo(() => ({ number }), [number]);
  return (
    <div>
      <input value={name} onChange={(e) => setName(e.target.value)} />
      <Child onBtnClick={addClick} data={data} />
    </div>
  );
}

5、useContext：接收一个context对象并返回该context的当前值

6、useReducer：接收一个形如 (state, action) => newState 的 reducer，并返回当前的 state 以及与其配套的 dispatch 方法

复制代码

import React from 'react';
import ReactDOM from 'react-dom';

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return state+1;
    case 'decrement':
      return state-1;
    default:
      throw new Error();
  }
}
function App(){
    const [state, dispatch] = React.useReducer(reducer, 0);
    return (
        <>
          Count: {state}
          <button onClick={() => dispatch({type: 'increment'})}>+</button>
          <button onClick={() => dispatch({type: 'decrement'})}>-</button>
        </>
    )
}

更多博文：
useReducer

7、useRef：返回一个可变的ref对象，其中.current属性被初始化为传入的参数（initialValue）

返回的ref对象在组件的整个生命周期内保持不变

forwardRef：将ref从父组件中转发的子组件中的dom元素上；子组件接受props和ref作为参数

useImperativeHandle：可以让你在使用ref时自定义暴露给父组件的实例值。大多数情况下，应当避免使用ref这样的命令式代码，useImperativeHandle应当与forwardRef一起使用

复制代码

import React, { useState, useImperativeHandle, forwardRef, useRef } from 'react';
function Child(props,ref){
  const inputRef = useRef();
  useImperativeHandle(ref,()=>(
    {
      focus(){
        inputRef.current.focus();
      }
    }
  ));
  return (
    <input type="text" ref={inputRef}/>
  )
}
Child = forwardRef(Child);
function App(){
  let [number,setNumber] = useState(0); 
  const inputRef = useRef();
  function getFocus(){
    inputRef.current.value = 'focus';
    inputRef.current.focus();
  }
  return (
      <>
        <Child ref={inputRef}/>
        <button onClick={()=>setNumber({number:number+1})}>+</button>
        <button onClick={getFocus}>获得焦点</button>
      </>
  )
}

8、useParams获取路由中的params

useLocation可以查看当前路由

useHistory可以返回上一个网页

useRouteMatch挂钩尝试以与Route相同的方式匹配当前URL；在无需呈现Route的情况下匹配数据最有用