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