首页 > 其他分享 >react的生命周期函数

react的生命周期函数

时间：2024-03-19 20:45:59浏览次数：21  
标签：生命 const 周期函数 element react 组件 import 路由

react的生命周期函数

1. react所有的生命周期函数

https://react.docschina.org/docs/react-component.html

挂载

当组件实例被创建并插入 DOM 中时，其生命周期调用顺序如下：

更新

当组件的 props 或 state 发生变化时会触发更新。组件更新的生命周期调用顺序如下：

卸载

当组件从 DOM 中移除时会调用如下方法：

2. 常用的生命周期方法

创建阶段

constructor

作用： (1) 获取props (2) 初始化state

render

作用：渲染组件到页面中，无法获取页面中的DOM对象

componentDidMount()

（1） 组件已经挂载到页面中 （2） 可以进行DOM操作，比如：获取到组件内部的DOM对象 （3） 可以发送请求获取数据 （4） 可以通过 setState() 修改状态的值 注意：在这里修改状态会重新渲染

运行和交互阶段

componentDidUpdate(prevProps, prevState)

作用：组件已经被更新 参数：旧的属性和状态对象

 

卸载阶段

componentWillUnmount()

组件卸载期间，只有一个函数，这个函数也有一个显著的特点：组件一辈子只能执行一次 使用说明 只要组件不再被渲染到页面中，那么这个方法就会被调用（ 渲染到页面中 -> 不再渲染到页面中 ）

作用：在卸载组件的时候，执行清理工作，比如清除定时器

讲解用案例代码

子组件

// 子组件
class Child extends Component {
  //构造方法
  constructor() {
    console.log('Child-constructor');
    super()
    this.state = {
      parentMsg: '父组件的数据'
    }
  }
  // 组件挂载后
  componentDidMount(){
    console.log('Child-componentDidMount');
  }
  // 是否应该更新组件
  shouldComponentUpdate(){
    console.log('Child-shouldComponentUpdate');
    return true
  }
  // 组件更新后
  componentDidUpdate(){
    console.log('Child-componentDidUpdate');
  }
  // 组件卸载前
  componentWillUnmount(){
    console.log('Child-componentWillUnmount');
  }
  //组件渲染
  render() {
    console.log('Child-render');
    return (
      <div>
        <p>子组件------------------{this.state.parentMsg}</p>
      </div>
    );
  }
}

 

父组件

// 父组件
class App extends Component {
  // 构造方法
  constructor() {
    console.log('App-constructor');
    super()
    this.state = {
      parentMsg: '父组件的数据'
    }
  }
  // 组件挂载后
  componentDidMount(){
    console.log('App-componentDidMount');
  }
  // 是否应该更新组件
  shouldComponentUpdate(){
    console.log('App-shouldComponentUpdate');
    return true
  }
  // 组件更新后
  componentDidUpdate(){
    console.log('App-componentDidUpdate');
  }
  // 组件卸载前
  componentWillUnmount(){
    console.log('App-componentWillUnmount');
  }
​
  change = ()=>{
    this.setState({
      parentMsg: '新的新的'
    })
  }
  //组件渲染
  render() {
    console.log('App-render');
    return (
      <div>
          <p>父组件-------------------{this.state.parentMsg}</p>
          <Child msg={this.state.parentMsg}></Child>
          <p><button onClick={this.change}>改变父组件的数据</button></p>
      </div>
    );
  }
}

 

react 路由v6使用

1. 安装路由依赖包

  
npm i react-router-dom -S

2. 案例代码

import React from 'react
//引入路由中的各种API
import { 
    HashRouter,
    BrowserRouter,
    Routes, 
    Route,
    Navigate,
    Link,
    NavLink,
    Outlet
   } from 'react-router-dom'

// 引入路由相关组件
import Home from './Home'
import Cart from './Cart'
import My from './My'
import NotFound from './NotFound'
import FooterNav from './FooterNav'
import Tv  from './home/Tv'
import Ai  from './home/Ai'
import Login from './Login'

export default function App() {
    return (
        <BrowserRouter>
            <Routes>
                <Route path="/home" element={<Home></Home>}>
                    <Route path="tv" element={<Tv></Tv>}></Route>
                    <Route path="ai" element={<Ai></Ai>}></Route>
                </Route>
                <Route path="/cart" element={<Cart></Cart>}></Route>
                <Route path="/login" element={<Login></Login>}></Route>
                <Route path="/my" element={<My></My>}></Route>
                <Route path="/" element={<Navigate to="/home"></Navigate>}></Route>
                <Route path="*" element={<NotFound></NotFound>}></Route>
            </Routes>
            <FooterNav></FooterNav>
        </BrowserRouter>
    )
}

3. 路由API

3.1 BrowserRouter和HashRouter

  • 二者都是路由的包裹元素，设置路由模式

  • BrowserRouter是history模式, 生产版本需要后端进行相应的配置, 路径前没有'#',比较美观

  • HashRouter是hash模式，路由前有'#'

 

3.2 Routes

路由配置的包裹元素，<Route>必须放在<Routes>中，不然报错

3.3 Route

<Route path="/cart" element={<Cart></Cart>}></Route>

3.4 Navigate重定向

<Route path="/" element={<Navigate to="/home"></Navigate>}></Route>

3.5 Link和NavLink

<Link to="/movie" >电影</Link>
<NavLink to="/find" class="active">发现</NavLink>

4. 嵌套路由

4.1 定义嵌套路由

<Route path="/home" element={<Home></Home>}>
<Route path="tv" element={<Tv></Tv>}></Route>
<Route path="ai" element={<Ai></Ai>}></Route>
</Route>

4.2 默认路由

<Route path="/home" element={<Home></Home>}>
<Route index element={<Tv></Tv>}></Route>
<Route path="ai" element={<Ai></Ai>}></Route>
</Route>

4.3 Outlet定义二级路由出口 

import React,{useState,useEffect} from 'react'
import style from './Home.css'
import { Outlet,NavLink,useNavigate} from 'react-router-dom'

export default function Home() {

    return (
        <div>
            <div className="header">
                <p><NavLink to="" >电视</NavLink></p>
                <p><NavLink to="ai" >智能</NavLink></p>
            </div>
            <Outlet></Outlet>
        </div>
    )
}

 

5. 动态路由

5.1 动态路由 

<Route path="/list/:id" element={<List></List>}></Route>

5.2 路由跳转

<p><NavLink to="/list/5">列表</NavLink></p>

5.3 获取动态路由参数

import { useParams } from 'react-router-dom';

...

const params = useParams()
console.log(params.id)  //5

6. React-router 的Hooks

import { useNavigate,useParams,useSearchParams,useLocation } from 'react-router-dom';

6.1 useNavigate

const navigate = useNavigate()

//跳转到/my
navigate("/my")  

//跳转到上一页
navigate(-1)

//跳转到/my,并替换当前历史记录
navigate("/my",{replace: true})

//携带参数
navigate("/my",{replace: true,state:{arr:[1,2,3]}})

6.2 useParams

动态路由

<Route path="/list/:id" element={<List></List>}></Route>
<p><NavLink to="/list/5">列表</NavLink></p>

const params = useParams()
console.log(params.id) //5

6.3 useSearchParams

import { useSearchParams } from 'react-router-dom';

// 当前路径为 /foo?id=12
function Foo(){
    const [searchParams] = useSearchParams();
    console.log(searchParams.get('id')) // 12
    return (
        <div>foo</div>
    )
}

6.4 useLocation

  1. hash: ""

  2. key: "h8dnd0wk"

  3. pathname: "/list/5"

  4. search: ""

  5. state: null

 

6.4 案例代码 

import { useNavigate,useParams,useLocation } from 'react-router-dom';
...
export default function List() {
    //用navigate实现编程式导航
    const navigate = useNavigate()
    //获取动态路由的参数
    const params = useParams()
    //获取url信息
    const location = useLocation()

    const toUrl = ()=>{
        // navigate("/my")
        navigate("/my",{replace: true})
    }
    return (
        <div>
            list
            <hr />
            <button onClick={toUrl}>回到我的</button>
        </div>
    )
}

7. 仿小米App的路由配置

7.1 FooterNav.css

.footerNav {
    display: flex;
    justify-content: space-around;
    position: absolute;
    width: 100%;
    height: 60px;
    left: 0;
    bottom: 0;
    background-color: #aaa;
}
.footerNav .active{
    border: 1px solid #000;
    background-color: #f00;
}

7.2 FooterNav.js

import React from 'react'
import { Link, NavLink } from 'react-router-dom'
import './FooterNav.css'
export default function FooterNav() {
    return (
        <div className="footerNav">
            <p><NavLink to="/home">首页</NavLink></p>
            <p><NavLink to="/cart">购物车</NavLink></p>
            <p><NavLink to="/my">我的</NavLink></p>
            <p><NavLink to="/list/5">列表</NavLink></p>
        </div>
    )
}

7.3 App.js

import React from 'react'
import { HashRouter,BrowserRouter,Routes, Route,Navigate,Link,NavLink,Outlet} from 'react-router-dom'
import Home from './Home'
import Cart from './Cart'
import My from './My'
import NotFound from './NotFound'
import FooterNav from './FooterNav'
import Tv  from './home/Tv'
import Ai  from './home/Ai'
import Login from './Login'
import isLogin from './util/token'
import List from './List'

export default function App() {
    return (
        <BrowserRouter>
            <Routes>
                <Route path="/home" element={<Home></Home>}>
                    <Route path="tv" element={<Tv></Tv>}></Route>
                    <Route path="ai" element={<Ai></Ai>}></Route>
                </Route>
                <Route path="/cart" element={isLogin() ?<Cart></Cart>:<Login></Login>}></Route>
                <Route path="/login" element={<Login></Login>}></Route>
                <Route path="/my" element={<My></My>}></Route>
                <Route path="/my" element={<My></My>}></Route>
                <Route path="/list" element={<List></List>}></Route>
                <Route path="/" element={<Navigate to="/home"></Navigate>}></Route>
                <Route path="*" element={<NotFound></NotFound>}></Route>
            </Routes>
            <FooterNav></FooterNav>
        </BrowserRouter>
    )
}

7.4 Home.css

.header {
    display: flex;
    justify-content: space-around;
}
.header .active {
    border: 1px solid #000;
}
.header .atdh {
    background-color: #f00;
}

7.5 Home.js

import React,{useState,useEffect} from 'react'
import style from './Home.css'
import { Outlet,NavLink,useNavigate} from 'react-router-dom'

export default function Home() {
    const navigate = useNavigate();
    useEffect(()=>{
        navigate('/home/tv')
    },[])// eslint-disable-line

    return (
        <div>
            <div className="header">
                <p><NavLink to="tv" >电视</NavLink></p>
                <p><NavLink to="ai" >智能</NavLink></p>
            </div>
            <Outlet></Outlet>
        </div>
    )
}

8. useRoutes的使用

<Route path="/home" element={<Home></Home>}>
    <Route path="tv" element={<Tv></Tv>}></Route>
    <Route path="ai" element={<Ai></Ai>}></Route>
</Route>

在App.js中通过json数据实现路由配置

import React from 'react'
import { BrowserRouter as Router, Navigate, useRoutes } from 'react-router-dom'

import Home from './pages/Home'
import Category from './pages/Category'
import Phone from './pages/Category/Phone'
import NoteBook from './pages/Category/NoteBook'
import GoodsList from './pages/GoodsList'
import My from './pages/My'
import Detail from './pages/Detail'
import NotFound from './pages/NotFound'

const GetAllRoutes = () => {
    const routes = useRoutes([
        {
            path: '/',
            element: <Navigate to="/Home" />
        },
        {
            path: '/Home',
            element: <Home />
        },
        {
            path: '/Category',
            element: <Category />,
            children: [
                {
                      //默认路由
                    index: true,
                    element: <Phone />
                },
                {
                    path: 'NoteBook',
                    element: <NoteBook />
                }
            ]
        },
        {
            path: '/GoodsList',
            element: <GoodsList />
        },
        {
            path: '/My',
            element: <My />
        },
        {
            path: '/Detail/:id',
            element: <Detail />
        },
        {
            path: '/404',
            element: <NotFound />
        },
        {
            path: '*',
            element: <NotFound />
        }
    ])
    return routes;
}


export default function App() {
    return (
        <Router>
            <GetAllRoutes />
        </Router>
    )
}

9. 路由懒加载和鉴权

lazy()路由懒加载

import {lazy} from 'react'
const Later = lazy(() => import('./Later'));

Suspense组件

import  {  lazy, Suspense } from 'react';
const Later = lazy(() => import('./Later'));

export default function  App {
   return (
     <div> 
       <Suspense fallback={<div>loading...</div>}>
         <Later />  
       </Suspense>
     </div>
   );
}

案例涉及文件列表

src/routes/index.js

src/routes/config.js

src/routes/privateRoute.js

案例代码

src/routes/privateRoute.js

/**
 *  PrivateRoute使用方式
 *  <PrivateRoute element={<Cart>} tag="权限"> </PrivateRoute>
 *  props: {element:, tag: }
 */
import { Navigate } from "react-router-dom";
const PrivateRoute = props => {
  const isLogin = localStorage.getItem("token")
  return isLogin ? (
    (props.element)
  ) : (
    <Navigate to="/login"></Navigate>
  );
};

export default PrivateRoute;

src/routes/config.js

import PrivateRoute from './privateRoute';
import { Suspense } from 'react';
const WrapperRouteComponent = ({ titleId, auth, ...props }) => {
    if (titleId) {
        document.title = titleId
    }
    return (
        <Suspense fallback={<div>loading...</div>}>
            {auth ? <PrivateRoute {...props} /> : (props.element)}
        </Suspense>
    )
};
export default WrapperRouteComponent;

src/routes/index.js

import { lazy } from 'react';
import Home from '../Home';
import WrapperRouteComponent from './config';
import { useRoutes, Navigate } from 'react-router-dom';

const NotFound = lazy(() => import(/* webpackChunkName: "404'"*/ '../NotFound'));
const Ai = lazy(() => import(/* webpackChunkName: "ai'"*/ '../home/Ai'));
const Tv = lazy(() => import(/* webpackChunkName: "tv'"*/ '../home/Tv'));
const Cart = lazy(() => import(/* webpackChunkName: "Cart'"*/ '../Cart'));
const My = lazy(() => import(/* webpackChunkName: "My'"*/ '../My'));
const List = lazy(() => import(/* webpackChunkName: "List'"*/ '../List'));
const Detail = lazy(() => import(/* webpackChunkName: "Detail'"*/ '../Detail'));
const Login = lazy(() => import(/* webpackChunkName: "Login'"*/ '../Login'));

const routeList = [
    {
        path: '/',
        element: <Navigate to="/home" />
    },
    {
        path: '/home',
        // element: <Home />,
        element: <WrapperRouteComponent element={<Home />} titleId="首页" />,
        children: [
            {
                path: 'ai',
                element: <WrapperRouteComponent element={<Ai />} titleId="ai" />,
            },
            {
                path: 'tv',
                element: <WrapperRouteComponent element={<Tv />} titleId="tv" />,
            }
        ]
    },
    {
        path: '/cart',
        element: <WrapperRouteComponent element={<Cart />} titleId="Cart" auth={true}/>,

    },
    {
        path: '/my',
        element: <WrapperRouteComponent element={<My />} titleId="My" />
    },
    {
        path: '/list',
        element: <WrapperRouteComponent element={<List />} titleId="List" />
    },
    {
        path: '/detail/:id/:type',
        element: <WrapperRouteComponent element={<Detail />} titleId="Detail" />
    },
    {
        path: '/login',
        element: <WrapperRouteComponent element={<Login />} titleId="Login" />
    },
    {
        path: '/404',
        element: <NotFound />
    },
    {
        path: '*',
        element: <NotFound />
    }
]
const RenderRouter = () => {
    const element = useRoutes(routeList);
    return element;
};

export default RenderRouter;

App.js

import React from 'react'
import "./App.css"
//引入路由中的各种API
import {
  BrowserRouter as Router,
} from 'react-router-dom'

import RenderRouter  from './routes'
import TabBar from './TabBar'


export default function App() {
  return (
    <div className="app">
      <Router>
         <RenderRouter></RenderRouter>
         <TabBar></TabBar>
      </Router>
    </div>
  )
}

 

 

标签：生命,const,周期函数,element,react,组件,import,路由
From： https://www.cnblogs.com/liu521125/p/18083899

相关文章

  • react class
    1.（简单了解）类（class）组件的缺点importReact,{Component}from"react";exportdefaultclassButtonextendsComponent{constructor(){super();this.state={buttonText:"Clickme,please"};this.handleClick=this.handleCli......
  • react的基础使用
    1.认识ReactReact是一个用于构建用户界面的JAVASCRIPT库。React起源于Facebook的内部项目，用来架设Instagram的网站，并于2013年5月开源。React拥有较高的性能，代码逻辑非常简单，越来越多的人关注和使用它; 用vite搭建react     npmcreatev......
  • react使用map循环渲染dom时，增加或删减数组，但想保持其余的dom与数据不发生改变
     核心思路：dom渲染与key值有关系，如果想实现上述需求，则需要关注改变前后的循环项的key值是否发生改变currentCabinet?.map((item,index)=><BaseInfokey={`currentCabinet${item?.ciId}`}sceneKey={sceneKey}currentCabinet={item}/>)如以上示例，以ciId为key值，可以保证即......
  • 深入React Flow Renderer（三）：创建和定制节点（附代码）
    在ReactFlowRenderer中，节点是构建工作流界面的基本组成部分之一。本文将介绍如何创建和定制不同类型的节点，以满足您的工作流需求。我已将当前系列的Demo上传至GitHub，其中包含一个简单的画布、侧边栏、内容编辑以及其他功能。这个Demo旨在供大家参考和学习。地址：Evanzew......
  • Spring Bean的生命周期
    目录实例化设置属性Bean后置处理器（BeanPostProcessor）初始化Aware回调......
  • 微信小程序(组件生命周期)
         ......
  • Vue2（五）：收集表单数据、过滤器、自定义指令、Vue的生命周期
    一、收集表单数据爱好：学习<inputtype="checkbox"value="study"v-model="hobby">打游戏<inputtype="checkbox"value="games"v-model="hobby">吃饭<inputtype="checkbo......
  • 【9.0】Django框架之生命周期流程图
    【5.0】Django框架之请求生命周期流程图解释图：浏览器>>发送请求(Http请求)>>web服务网关接口(django默认的wsgiref模块不能承受高并发，最大只有1000左右)>>中间件>>缓存数据库(返回给中间件已经缓存过的数据)>>urls.py(路由层)>>views.py(视图层)>>templates(模板......
  • Django生命周期
    Django请求的生命周期是指：当用户在浏览器上输入url到用户看到网页的这个时间段内,Django后台所发生的事情。一、生命周期流程图首先，用户在浏览器中输入url，发送一个GET/POST方法的request请求。Django中封装了socket的WSGi服务器，监听端口接受这个request请求再进行初步......
  • 分享一个之前开发的react键盘事件的快捷键实现，组合键，支持防抖和节流，通过自定义hooks实
    npm包地址:linkgithub地址:linkreact-khooksGettingStarted......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99