路由基本使用

  • 安装插件 npm install react-router-dom
  • /src/index.js ```jsx import React from ‘react’; import ReactDOM from ‘react-dom’; import App from ‘./App’; import {HashRouter} from ‘react-router-dom’

/**

  • HashRouter 开启路由 */ ReactDOM.render( , document.getElementById(‘root’) );
  2. - src/components/home.js
  3. ```jsx
  4. import React, { Component } from 'react'
  6. class Home extends Component {
  7.   render() {
  8.     return (
  9.       <div>Home 首页内容</div>
  10.     )
  11.   }
  12. }
  14. export default Home
  • src/components/list.js ```jsx import React, { Component } from ‘react’

class List extends Component { render() { return (

List 列表页内容
) } }

export default List

  2. - src/App.js
  3. ```jsx
  4. import React, {Component} from 'react'
  5. import {Link, Route} from 'react-router-dom'
  6. import Home from './components/home'
  7. import List from './components/list'
  9. /** 
  10.  *  Link: to 属性指定跳转的链接
  11.  *  Router: path component
  12.  */
  14. class App extends Component {
  15.   render() {
  16.     return (
  17.       <div>
  18.         <div>
  19.           <Link to='/home'>首页</Link>----
  20.           <Link to='/list'>列表页</Link>
  21.         </div>
  22.         <hr />
  23.         <div>
  24.           <Route path='/home' component={Home} />
  25.           <Route path='/list' component={List} />
  26.         </div>
  27.       </div>
  28.     )
  29.   }
  30. }
  32. export default App

exact 属性-默认展示内容

  • src/App.js
    1. <div>
    2. <Route path="/" component={Home} exact />
    3. <Route path='/home' component={Home} />
    4. <Route path='/list' component={List} />
    5. </div>

路由匹配规则

  • src/App.js ```jsx import React, {Component} from ‘react’ import {Link, Route, Switch} from ‘react-router-dom’ import Home from ‘./components/home’ import List from ‘./components/list’ import NotFound from ‘./components/notFound’

/**

  • Link: to 属性指定跳转的链接
  • Router: path component */

class App extends Component { render() { return (

首页—— 列表页
) } }

export default App

  2. <a name="kWUVs"></a>
  3. ## 动态路由传参
  5. - 路由参数占位符 src/App.js
  6. ```jsx
  8. import Detail from './components/detail'
  9. class App extends Component {
  10.   render() {
  11.     return (
  12.       <div>
  13.         <div>
  14.           <Link to='/home'>首页</Link>----
  15.           <Link to='/list'>列表页</Link>
  16.         </div>
  17.         <hr />
  18.         <div>
  19.           <Switch>
  20.             <Route path="/" component={Home} exact />
  21.             <Route path='/home' component={Home} />
  22.             <Route path='/list' component={List} exact />
  23.             <Route path="/detail/:id" component={Detail} />
  24.             <Route component={NotFound} />
  25.           </Switch>
  26.         </div>
  27.       </div>
  28.     )
  29.   }
  30. }
  32. export default App
  • 触发操作的时候传递具体的参数 src/components/list.js ```jsx import React, { Component } from ‘react’ import { Link } from ‘react-router-dom’

class List extends Component { render() { return (

测试文章1

测试文章2

) } }

export default List

  2. - 在具体的组件当中使用传递的参数 src/components/detail.js
  3. ```jsx
  4. import React, { Component } from 'react'
  6. class Detail extends Component {
  7.   render(props) {
  8.     console.log(this.props.match.params.id)
  9.     return (
  10.       <div>{this.props.match.params.id}</div>
  11.     )
  12.   }
  13. }
  15. export default Detail

查询参数传参

  • src/components/list ```jsx import React, { Component } from ‘react’ import { Link } from ‘react-router-dom’

class List extends Component { render() { return (

测试文章1

测试文章2

测试文章3

) } }

export default List

  2. - src/components/home.js
  3. ```jsx
  4. import React, { Component } from 'react'
  5. import qs from 'qs'
  6. class Home extends Component {
  7.   render(props) {
  8.     // console.log(this.props.location.search)
  9.     console.log(qs.parse(this.props.location.search, {ignoreQueryPrefix: true}))
  10.     let param = qs.parse(this.props.location.search, {ignoreQueryPrefix: true})
  11.     return (
  12.       <div>Home 首页内容 {param.title}</div>
  13.     )
  14.   }
  15. }
  17. export default Home

嵌套路由

  • src/components/list.js ```jsx import React, { Component } from ‘react’ import { Link, Route} from ‘react-router-dom’ import Outer from ‘../components/outer’ import Inner from ‘../components/inner’

class List extends Component { render(props) { console.log(this.props) return (

测试文章1

测试文章2

测试文章3

国内新闻 国际新闻
) } }

export default List

  1. <a name="jfxqN"></a>
  2. ## 路由跳转及重定向
  4. - src.components/home.js
  5. ```jsx
  7. import { Redirect } from 'react-router-dom'
  9. class Home extends Component {
  10.   render(props) {
  11.     const isLogin = false
  12.     if (!isLogin) {
  13.       return <Redirect to="/list" />
  14.     }
  16.     let param = qs.parse(this.props.location.search, {ignoreQueryPrefix: true})
  17.     return (
  18.       <div>Home 首页内容 {param.title}</div>
  19.     )
  20.   }
  21. }
  23. export default Home

路由守卫

  • src/auth.js ```javascript class Authorized { constructor() { this.authorized = false }

    login() { this.authorized = true }

    logout() { this.authorized = false }

    isAuthorized() { return this.authorized } }

export default new Authorized()

  2. - src/App.js
  3. ```jsx
  5. import auth from './auth'
  6. class App extends Component {
  7.   render() {
  8.     return (
  9.       <div>
  10.         <div>
  11.           <Link to='/home'>首页</Link>----
  12.           <Link to='/list'>列表页</Link>
  13.         </div>
  14.         <hr />
  15.         <div>
  16.           <Switch>
  17.             <Route path="/" component={Home} exact />
  18.             <Route path='/home' component={Home} />
  19.             {/* <Route path='/list' component={List} /> */}
  20.             <Route path='/list' render={props => {
  21.               if (auth.isAuthorized()) {
  22.                 // 进入路由
  23.                 return <List {...props} />
  24.               }else {
  25.                 // 重定向
  26.                 return <Redirect to='/home' />
  27.               }
  28.             }} />
  29.             <Route path="/detail/:id" component={Detail} />
  30.             <Route component={NotFound} />
  31.           </Switch>
  32.         </div>
  33.       </div>
  34.     )
  35.   }
  36. }
  38. export default App

  • src/components/home.js ```jsx import React, { Component } from ‘react’ import qs from ‘qs’ import auth from ‘../auth’ class Home extends Component { login = () => { // 执行登陆 auth.login() alert(‘登陆成功’) } render(props) {

    let param = qs.parse(this.props.location.search, {ignoreQueryPrefix: true}) return (

    1. <div>
    2.   <p>Home 首页内容 {param.title}</p>
    3.   <button onClick={this.login}>登陆</button>
    4. </div>

    ) } }

export default Home

  2. - src/components/list.js
  3. ```jsx
  5. import { createHashHistory } from 'history'
  8. class List extends Component {
  10.   logout = () => {
  11.     auth.logout()
  12.     createHashHistory().push('/home')
  13.   }
  15.   render() {
  16.     console.log(this.props)
  17.     return (
  18.       <div>
  21.         <div>
  22.           <button onClick={this.logout}>退出登录</button>
  23.         </div>
  26.       </div>
  27.     )
  28.   }
  29. }
  31. export default List

路由守卫组件

  • src/guard.js ```jsx import React,{ Component } from ‘react’ import { Redirect, Route} from ‘react-router’ import auth from ‘./auth’

class AuthRouteGuard extends Component { render () { const {component: Component, …rest} = this.props return ( { if(auth.isAuthorized()) { return } else { return } }} /> ) } }

export default AuthRouteGuard

  2. - src/App.js
  3. ```jsx
  4. <Switch>
  5.     <Route path="/" component={Home} exact />
  6.     <Route path='/home' component={Home} />
  8.     <AuthRouteGuard path='/list' component={List} />
  10.     <Route path="/detail/:id" component={Detail} />
  11.     <Route component={NotFound} />
  12. </Switch>

路由模块懒加载

  • 安装插件 npm install @loadable/component
  • src/App.js ```jsx import loadComponent from ‘@loadable/component’

const Home = loadComponent(() => import(‘./components/home’)) const List = loadComponent(() => import(‘./components/list’)) const NotFound = loadComponent(() => import(‘./components/notFound’)) const Detail = loadComponent(() => import(‘./components/detail’))

  1. <a name="P4Xk2"></a>
  2. ## 非路由组件传递路由信息
  4. - src/components/test.js
  5. ```jsx
  6. import React, { Component } from 'react'
  7. import { withRouter } from 'react-router-dom'
  9. class Test extends Component {
  10.   render() {
  11.     console.log(this.props)
  12.     return (
  13.       <div>
  14.         Test组件
  15.       </div>
  16.     )
  17.   }
  18. }
  20. export default withRouter(Test)
  • src/components/detail.js ```jsx

import Test from ‘./test’ class Detail extends Component { render(props) { return (

{this.props.match.params.id}

) } }

export default Detail

  1. <a name="VRazC"></a>
  2. ## 
  3. <a name="sK1IB"></a>
  4. ## useState 设置状态
  6. - 什么是 HOOK
  7.    - 它是一个特殊的函数
  8.    - 可以让函数组件也具有类组件的特性
  9. - 为什么需要 HOOK
  10.    - 数据共享
  11.    - 多个业务逻辑代码有可能会存在于同一个生命周期函数中
  12. - useState
  13.    - 一个可以在函数组件中保存状态的 HOOK 函数
  14.    - 参数： 保存状态的初始值
  15.    - 返回值
  16.       - 一个数组
  17.       - 第一个元素就是当前保存的状态
  18.       - 第二个就是修改当前保存状态的方法
  19. - src/App.js
  20. ```jsx
  21. import React, { useState } from 'react'
  24. function App() {
  26.   const arr = useState(0)
  27.   const [state, setState] = arr
  28.   console.log(state, setState)
  29.   return (
  30.     <div>
  31.       数据： {state}
  32.       <button onClick={() => { setState(state + 1) }}>+1</button>
  33.       <button onClick={() => { setState(state - 1) }}>-1</button>
  34.     </div>
  35.   )
  36. }
  37. export default App

注意点

  • 在函数组件中可以多次使用同一个 HOOK 函数
  • 简单类型 复杂
  • set操作也是异步的，不能直接修改 state 的元素值 ```jsx import React, { useState } from ‘react’

function App() {

const [ageState, setAgeState] = useState(10) const [nameState, setNameState] = useState(‘zz’) const [personState, setPersonState] = useState({“name”: “jj”, “age”: 20})

const [listState, setListState] = useState([ {name: ‘zoe’, age: 18}, {name: ‘zce’, age: 30}, {name: ‘zzz’, age: 25} ])

// 定义修改第一个 age 值的方法 function incrementAge() { // setAgeState(ageState + 10) // setAgeState(ageState + 10) // setAgeState(ageState + 10) setAgeState((pre) => pre + 10) setAgeState((pre) => pre + 10) setAgeState((pre) => pre + 10) } // 定义修改第二个人物状态 name 的操作 function changeName() { // personState.name = ‘拉钩教育’ setPersonState({…personState, name: ‘拉钩教育’}) } return (

数据： {ageState}—- {nameState}
数据：{personState.name}—-{personState.age}
{ listState.map(item => { return (

{item.name}—-{item.age}

) }) }
) } export default App

  1. <a name="AnHjy"></a>
  2. ## useEffect 使用
  3. ```jsx
  4. import React, { useState, useEffect} from 'react'
  7. /**
  8.  * useEffect
  9.  * 挂载 更新 卸载
  10.  */
  11. function Header() {
  13.   const [strState, setStrState] = useState('拉钩教育')
  14.   const [numState, setNumState] = useState(10)
  16.   useEffect(() => {
  17.     console.log('挂载与更新操作完成了')
  18.     return () => {
  19.       console.log('卸载的时候执行')
  20.     }
  21.   }, [strState])
  23.   return (
  24.     <div>
  25.       <p>{strState} <button onClick={() => {setStrState('大前端')}}>修改字符</button></p>
  26.       <p>{numState} <button onClick={() => {setNumState(numState + 1)}}>修改数值</button></p>
  27.     </div>
  28.   )
  29. }
  31. function App() {
  32.   const [isShow, setIsShow] = useState(true)
  33.   return (
  34.     <div>
  35.       {isShow && <Header />}
  36.       <hr />
  37.       <button onClick={() => { setIsShow(!isShow) }}>切换</button>
  38.     </div>
  39.   )
  40. }
  41. export default App

优点

  1. import React, { useState, useEffect} from 'react'
  4. /**
  5.  * useEffect
  6.  * 挂载 更新 卸载
  7.  */
  8. function Header() {
  10.   const [strState, setStrState] = useState('拉钩教育')
  11.   const [numState, setNumState] = useState(10)
  13.   useEffect(() => {
  14.     // 事件监听添加操作
  15.     console.log('事件监听添加操作')
  16.     return () => {
  17.       console.log('事件移除监听')
  18.     }
  19.   })
  21.   useEffect(() => {
  22.     // '发送网络请求获取数据' 
  23.     console.log('发送网络请求获取数据')
  24.   })
  25.   useEffect(() => {
  26.     // 判断是否登录
  27.     console.log('判断是否登录')
  28.   })
  30.   useEffect(() => {
  31.     console.log('挂载与更新操作完成了')
  32.     return () => {
  33.       console.log('卸载的时候执行')
  34.     }
  35.   }, [strState])
  37.   return (
  38.     <div>
  39.       <p>{strState} <button onClick={() => {setStrState('大前端')}}>修改字符</button></p>
  40.       <p>{numState} <button onClick={() => {setNumState(numState + 1)}}>修改数值</button></p>
  41.     </div>
  42.   )
  43. }
  45. function App() {
  46.   const [isShow, setIsShow] = useState(true)
  47.   return (
  48.     <div>
  49.       {isShow && <Header />}
  50.       <hr />
  51.       <button onClick={() => { setIsShow(!isShow) }}>切换</button>
  52.     </div>
  53.   )
  54. }
  55. export default App

useContext

  1. import React, { createContext, useContext } from 'react'
  3. const UserContext = createContext({})
  4. const AreaContext = createContext({})
  6. // 定义 Header 组件
  7. function Header() {
  8.   const userInfo = useContext(UserContext)
  9.   const areaInfo = useContext(AreaContext)
  10.   return (
  11.     <div>
  12.       <p>{userInfo.name}</p>
  13.       <p>{userInfo.age}</p>
  14.       <p>{areaInfo.width}</p>
  15.     </div>
  16.   )
  17. }
  19. function App() {
  20.   return (
  21.     <div>
  22.       <UserContext.Provider value={{ "name": "syy", "age": 18 }}>
  23.         <AreaContext.Provider value={{ "width": 200 }}>
  24.           <Header />
  25.         </AreaContext.Provider>
  26.       </UserContext.Provider>
  27.     </div>
  28.   )
  29. }
  30. export default App

useReducer

  1. import React, { useReducer } from 'react'
  3. function reducer(state, action) {
  4.   switch (action.type) {
  5.     case 'add':
  6.       return { ...state, num: state.num + 1 }
  7.     case 'sub':
  8.       return { ...state, num: state.num - 1 }
  9.     default:
  10.       return { ...state }
  11.   }
  12. }
  14. // Home 
  15. function Home() {
  16.   const [state, dispatch] = useReducer(reducer, { num: 0 })
  18.   return (
  19.     <div>
  20.       <p>数据： {state.num}</p>
  21.       <button onClick={() => { dispatch({ type: "add" }) }}>+ 1</button>
  22.       <button onClick={() => { dispatch({ type: "sub" }) }}> - 1</button>
  23.     </div>
  24.   )
  25. }
  27. // About 
  28. function About() {
  29.   const [state, dispatch] = useReducer(reducer, { num: 10 })
  31.   return (
  32.     <div>
  33.       <p>数据： {state.num}</p>
  34.       <button onClick={() => { dispatch({ type: "add" }) }}>+ 1</button>
  35.       <button onClick={() => { dispatch({ type: "sub" }) }}> - 1</button>
  36.     </div>
  37.   )
  39. }
  42. function App() {
  43.   return (
  44.     <div>
  45.       <Home />
  46.       <About />
  47.     </div>
  48.   )
  49. }
  50. export default App

useCallback

  1. import React, { useState, memo, useCallback} from 'react'
  3. // Home 
  4. function Home(props) {
  5.   console.log('Home组件被渲染了')
  6.   return (
  7.     <div>
  8.       <p>Home组件</p>
  9.       <button onClick={() => { props.handler() }}>减小</button>
  10.     </div>
  11.   )
  12. }
  14. // About
  15. function About(props) {
  16.   console.log('About组件被渲染了')
  17.   return (
  18.     <div>
  19.       <p>About组件</p>
  20.       <button onClick={() => { props.handler() }}>增加</button>
  21.     </div>
  22.   )
  23. }
  25. const MemoHome = memo(Home)
  26. const MemoAbout = memo(About)
  28. function App() {
  29.   console.log('App组件被渲染了')
  30.   const [numState, setNumState] = useState(10)
  31.   const [ageState, setAgeState] = useState(20)
  33.   function increment() {
  34.     setNumState(numState + 2)
  35.   }
  37.   // function decrement() {
  38.   //   setAgeState(ageState - 4)
  39.   // }
  41.   // 
  42.   const decrement = useCallback(() => {
  43.     setAgeState(ageState - 4)
  44.   }, [ageState])
  46.   return (
  47.     <div>
  48.       <p>num数据： {numState}</p>
  49.       <p>age数据： {ageState}</p>
  51.       <hr />
  52.       <MemoHome handler={decrement} />
  54.       <hr />
  55.       <MemoAbout handler={increment} />
  56.     </div>
  57.   )
  58. }
  59. export default App

useMemo

  1. import React, { useState, useMemo } from 'react'
  3. function getData() {
  4.   console.log('getData被调用了')
  5.   let data = 0
  6.   for (let i = 0; i < 999; i++) {
  7.     data += i
  8.   }
  10.   return data
  11. }
  13. function App() {
  14.   console.log('App组件被渲染了')
  15.   const [numState, setNumState] = useState(10)
  16.   const [ageState, setAgeState] = useState(20)
  18.   const num = useMemo(() => {
  19.     return getData()
  20.   }, [])
  22.   function increment() {
  23.     setNumState(numState + 10)
  24.   }
  26.   return (
  27.     <div>
  28.       <p>num数据： {numState}</p>
  29.       <p>age数据： {ageState}</p>
  30.       <button onClick={() => { increment() }}>修改</button>
  31.       <p>{num}</p>
  32.     </div>
  33.   )
  34. }
  35. export default App

useRef

  1. import React, { useState, useRef } from 'react'
  3. /**
  4.  * 01 useRef 可以用于获取元素 
  5.  * 02 useRef 还可以保存数据 
  6.  * 03 useRef 保存的数据除非我们手动修改，否则的话它是不会改变的
  7.  */
  9. function App() {
  10.   const [numState, setNumState] = useState(100)
  11.   const obj = useRef(numState)
  13.   return (
  14.     <div>
  15.       <p>obj当中的 current: {obj.current}</p>
  16.       <p>{numState}</p>
  17.       <button onClick={() => { setNumState(numState + 1) }}>操作</button>
  18.     </div>
  19.   )
  20. }
  21. export default App

useImperativeHandle

  1. import React, {useRef, forwardRef, useImperativeHandle } from 'react'
  3. function Home(props, oHome) {
  4.   const oInput = useRef()
  6.   useImperativeHandle(oHome, () => {
  7.     return {
  8.       setValue: () => {
  9.         oInput.current.value = "Home自己实现的setValue方法"
  10.       }
  11.     }
  12.   })
  13.   return (
  14.     <div>
  15.       <h2>Home组件</h2>
  16.       <input ref={oInput}></input>
  17.     </div>
  18.   )
  19. }
  21. const ForwardHome = forwardRef(Home)
  23. function App() {
  24.   const oHome = useRef()
  26.   function btnClick() {
  27.     console.log(oHome)
  28.     oHome.current.setValue()
  29.   }
  30.   return (
  31.     <div>
  32.       <ForwardHome ref={oHome} />
  33.       <button onClick={() => { btnClick() }}>操作input</button>
  34.     </div>
  35.   )
  36. }
  37. export default App

useLayoutEffect

  1. import React, { useState, useRef, useEffect, useLayoutEffect } from 'react'
  2. import './App.css'
  4. function Home() {
  6.   const oP = useRef()
  8.   // useEffect(() => {
  9.   //   oP.current.style.left = '0px'
  10.   //   oP.current.style.left = '600px'
  11.   //   console.log('挂载|更新, useEffect')
  12.   //   return () => {
  13.   //     console.log('卸载, useEffect')
  14.   //   }
  15.   // })
  17.   //     先于 useEffect 发生
  18.   useLayoutEffect(() => {
  19.     oP.current.style.left = '0px'
  20.     oP.current.style.left = '600px'
  21.     console.log('挂载|更新, , useLayoutEffect')
  22.     return () => {
  23.       console.log('卸载, useLayoutEffect')
  24.     }
  25.   })
  26.   return (
  27.     <div>
  28.       home组件
  29.       <p ref={oP}>Home组件中的 P元素</p>
  30.     </div>
  31.   )
  32. }
  34. function App() {
  35.   const [isShow, setIsShow] = useState(true)
  36.   return (
  37.     <div>
  38.       {isShow && <Home />}
  39.       <button onClick={() => { setIsShow(!isShow) }}> 切换</button>
  40.     </div>
  41.   )
  42. }
  43. export default App

自定义 Hooks

  1. import React, { useState, useEffect } from 'react'
  3. // 以 use 开头
  4. function useAddEventListener(cName) {
  5.   useEffect(() => {
  6.     console.log(cName, '组件挂载|更新添加事件监听')
  7.     return () => {
  8.       console.log(cName, '卸载时取消事件监听')
  9.     }
  10.   })
  11. }
  13. function Home() {
  14.   useAddEventListener('Home---')
  15.   return (
  16.     <div>
  17.       Home组件
  18.     </div>
  19.   )
  20. }
  22. function About() {
  23.   useAddEventListener('About---')
  24.   return (
  25.     <div>
  26.       About组件
  27.     </div>
  28.   )
  29. }
  31. function App() {
  32.   const [isShow, setIsShow] = useState(true)
  33.   return (
  34.     <div>
  35.       {isShow && <Home />}
  36.       {isShow && <About />}
  37.       <button onClick={() => { setIsShow(!isShow) }}>切换</button>
  38.     </div>
  39.   )
  40. }
  41. export default App