react路由_牛客博客

react-router:实现了路由的核心功能
react-router-dom:基于react-router，加入了在浏览器运行环境下的一些功能(Link、BrowserRouter、HashRouter组件)
react-router-native: 基于react-router，类似react-router-dom，加入了react-native运行环境下的一些功能。
v4 没有路由Hooks
v5 新增了路由Hooks
v6 变化很大

使用@loadable/component（React.lazy、Suspense）实现“代码分割”

例子：const Cnode = loadable(()=>import('@/views/Hooks/Cnode'),{fallback:})

HashRouter 、BrowserRouter：history模式和哈希地址模式
Route ：表示一个路由规则
Switch : 加快路由匹配的速度 switch 必须是route 和 Redirect 的直接父组件
Redirect ：重定向（）
Link: 表示一个路由的连接

只有那些被Route直接包裹过的React页面组件可以通过props访问到路由api ，没有怎么办？？

可以通过属性继承{...props}语法，把页面组件的props（路由API）手动向后代组件传递。
使用withRouter这个高阶组件包裹需要的props的组件，向组件中注入路由API。（非Hooks编程中用得比较多）
使用react-router-dom（v5）提供的hooks api直接使用路由API。 const history = useHistory() const location = useLocation()

一些hooks

// useContext
import ThemeContext from '@/utils/theme'
const theme = useContext(ThemeContext)

return(
    <div style={theme}>
    	...
    </div>
)

import Theme from '@/components/Theme'
<Provider value={theme}>
     <div>
     	...
		<Context/>
     </div>
</Provider>

```
useTitle(num)
```

const boxRef = useRef(null)

useEffect(()=>{
        console.log(boxRef);
        boxRef.current.style.backgroundColor = `rgb(${Math.random()*265},${Math.random()*265},${Math.random()*265})`
},[num])

<div ref={boxRef} id='box'>颜色变化</div>

useInterval(()=>{
   setNum(num+1)
},1000)

// useCallback 把函数声明变量缓存起来，避免重新声明

// 该回调函数仅在某个依赖项改变时才会更新
const search = useCallback((ev) => {
	if (ev.keyCode === 13) console.log('调接口', text)
},[])

<input   
    value={text}
    onChange={ev=>setText(ev.target.value)}
    onKeyUp={search}
/>

// 它仅会在某个依赖项改变时才重新计算被缓存的值

// const total = price * amount

const total = useMemo(()=>{
    console.log('我重新计算了')
    return price*amount
}, [price, amount])

<div>
    价格：
    <input
    type="number"
    value={price}
    onChange={ev=>setPrice(ev.target.value)}
    /><br/>
    数量：
    <input
    type="number"
    value={amount}
    onChange={ev=>setAmount(ev.target.value)}
    /><br/>
    总价：<h4>{ total }</h4>
</div>