阅读 1762

Redux,React-Router接入Hooks

Redux,React-Router接入Hooks

随着react hooks发布之后,react生态也更新相关对的函数式组件hooksAPIs

React-Redux

👉React-Redux7.1 提供了 useSelectoruseActionsuseDispatchuseStore,可代替connect()高阶组件

useSelector
const result: any = useSelector(selector: Function, equalityFn?: Function)
复制代码

允许您使用选择器功能从Redux存储状态提取数据

选择器函数应该是纯函数,因为它可能在任意时间点多次执行

从概念上讲,selector 函数与 connectmapStateToProps的参数是差不多一样的。selector 函数被调用时,将会被传入Redux store的整个state,作为唯一的参数。每次函数组件渲染时, selector 函数都会被调用。useSelector()同样会订阅 Reduxsotre,并且在你每 分发(dispatch) 一个 action 时,都会被执行一次

注意点:当 分发(dispatch) 了一个action时,useSelector()会将上一次调用 selector函数结果与当前调用的结果进行引用(===)比较,如果不一样,组件会被强制重新渲染。如果一样,就不会被重新渲染

优化:进行浅比较

import { useSelector, shallowEqual } from 'react-redux'

export function useShallowEqualSelector(selector) {
  return useSelector(selector, shallowEqual)
}
复制代码
useActions

废弃,不推荐使用(actionCreater)

useDispatch
const dispatch = useDispatch()
复制代码
useStore
const store = useStore()
复制代码

dva中使用

dva2.6.0-beta.6中已支持以上几个hooksAPI,可直接使用

import { useSelector, useDispatch } from 'dva';
复制代码

React-Router

👉React-Router 提供了useHistoryuseNavigateuseLocationuseParamsuseRoutes

useNavigate
// v5
import { useHistory } from 'react-router-dom';

function MyButton({
  let history = useHistory();
  function handleClick({
    history.push('/home');
  };
  return <button onClick={handleClick}>Submit</button>;
};
复制代码
// v6
import { useNavigate } from 'react-router-dom';

function MyButton({
  let navigate = useNavigate();
  function handleClick({
    navigate('/home');
  };
  return <button onClick={handleClick}>Submit</button>;
};
复制代码
useLocation
let location = useLocation();
复制代码
useParams
const { flag } = useParams();
复制代码
useRoutes
// v6
function App() {
  let element = useRoutes([
    { path: '/', element: <Home /> },
    { path: 'dashboard', element: <Dashboard /> },
    { path: 'invoices',
      element: <Invoices />,
      children: [
        { path: ':id', element: <Invoice /> },
        { path: 'sent', element: <SentInvoices /> }
      ]
    },
    // 重定向
    { path: 'home', redirectTo: '/' },
    // 404找不到
    { path: '*', element: <NotFound /> }
  ]);
  return element;
}
复制代码
文章分类
前端
文章标签