React17/18
文章平均质量分 76
react17/18
richest_qi
这个作者很懒,什么都没留下…
展开
-
其他hook(React Router6)
如果组件在或的上下文中,则返回,否则返回。返回导航类型,描述了用户是如何导航至当前页面。其返回值有3种:useOutlet(),用来呈现当前组件中渲染的嵌套路由。如果嵌套路由没有挂载,则返回;如果嵌套路由已经挂载,则返回路由对象,用于解析路径,解析url中的path、search、hash值。...原创 2022-06-07 17:22:55 · 301 阅读 · 0 评论 -
编程式路由导航(useNavigate)(React Router6)
,创建react项目:router_app。默认使用当前react的最新版本:react@18、react-dom@18。,默认下载安装最新版本r:react-router-dom@6。涉及的文件包括:入口文件index.jsroutes/index.jsHeader/index.jsx(Header组件)入口组件App.jspages/Home/index.jsx(Home组件)pages/About/index.jsx(About组件)pages/News/index.jsx原创 2022-06-07 16:56:09 · 822 阅读 · 0 评论 -
路由传递state参数(useLocation)(React Router6)
,创建react项目:router_app。默认使用当前react的最新版本:react@18、react-dom@18。,默认下载安装最新版本r:react-router-dom@6。涉及的文件包括:入口文件index.jsroutes/index.js入口组件App.jspages/Home/index.jsx(Home组件)pages/About/index.jsx(About组件)pages/News/index.jsx(News组件)pages/Message/inde原创 2022-06-07 14:18:51 · 1948 阅读 · 0 评论 -
路由传递search参数(useSearchParams和useLocation)(React Router6)
,创建react项目:router_app。默认使用当前react的最新版本:react@18、react-dom@18。,默认下载安装最新版本r:react-router-dom@6。涉及的文件包括:入口文件index.jsroutes/index.js入口组件App.jspages/Home/index.jsx(Home组件)pages/About/index.jsx(About组件)pages/News/index.jsx(News组件)pages/Message/inde原创 2022-06-07 14:06:21 · 4214 阅读 · 0 评论 -
路由传递params参数(useParams和useMatch)(React Router6)
,创建react项目:router_app。默认使用当前react的最新版本:react@18、react-dom@18。,默认下载安装最新版本r:react-router-dom@6。涉及的文件包括:入口文件index.jsroutes/index.js入口组件App.jspages/Home/index.jsx(Home组件)pages/About/index.jsx(About组件)pages/News/index.jsx(News组件)pages/Message/inde原创 2022-06-07 13:43:36 · 7541 阅读 · 1 评论 -
嵌套路由的实现(React Router6)
,创建react项目:router_app。默认使用当前react的最新版本:react@18、react-dom@18。,默认下载安装最新版本r:react-router-dom@6。涉及的文件包括:入口文件index.jsroutes/index.js入口组件App.jspages/Home/index.jsx(Home组件)pages/About/index.jsx(About组件)实现嵌套路由路由结构如下:在pages文件夹下新建文件夹:,News下新建文件:,即News组原创 2022-06-07 09:28:01 · 736 阅读 · 1 评论 -
使用useRoutes注册路由(React Router6)
,创建react项目:router_app。默认使用当前react的最新版本:react@18、react-dom@18。,默认下载安装最新版本r:react-router-dom@6。涉及的文件包括:入口文件index.js注意点:。注意点:pages/About/index.jsx(About组件)使用useRoutes注册路由表第一次改进代码更改涉及的文件:App.js。注意点:,useRoutes根据路由表生成对应的路由规则。src文件夹下新建子文件夹:routes,route原创 2022-06-06 21:58:24 · 2687 阅读 · 1 评论 -
NavLink的高亮(React Router6)
,创建react项目:router_app。默认使用当前react的最新版本:react@18、react-dom@18。,默认下载安装最新版本r:react-router-dom@6。涉及的文件包括:入口文件index.js注意点:。注意点:pages/About/index.jsx(About组件)NavLink的高亮activeClassName不奏效且React报错项目根路径下新建css文件:App.css。App.js中引入App.css,并给NavLink组件设置activ原创 2022-06-06 21:31:38 · 910 阅读 · 0 评论 -
Navigate组件的使用(React Router6)
,创建react项目:router_app。默认使用当前react的最新版本:react@18、react-dom@18。,默认下载安装最新版本r:react-router-dom@6。涉及的文件包括:入口文件index.js注意点:。注意点:pages/About/index.jsx(About组件)Navigate组件的使用时,展示Home组件;时,展示About组件。时,既不展示Home组件,也不展示About组件。现在,我们使用Redirect Navigate组件,实现:原创 2022-06-06 20:59:45 · 4206 阅读 · 1 评论 -
路由的基本使用(React Router6)
相比与React Router5.x,React Router6 有如下变化:,创建react项目:router_app。默认使用当前react的最新版本:react@18、react-dom@18。,默认下载安装最新版本r:react-router-dom@6。涉及的文件包括:入口文件index.js注意点:。注意点:.........原创 2022-06-06 20:41:13 · 265 阅读 · 0 评论 -
两个生命周期函数:getDerivedStateFromError()和componentDidCatch()
新建react项目,主要包含以下文件:入口文件index.js入口组件App.jsDemo组件Demo/index.cssDemo/index.jsx使用生命周期函数:getDerivedStateFromError 必须用 修饰,它是类上的方法。且必须返回 或者状态对象(State Obect)。当前组件的子组件发生错误时,会触发getDerivedStateFromError的调用。代码变更涉及的文件:components/Demo/index.jsx。假设B组件(子组件)原创 2022-06-06 16:42:37 · 726 阅读 · 0 评论 -
两个特殊的props:children和render
新建react项目,主要包含以下文件:入口文件index.js入口组件App.jsDemo组件Demo/index.cssDemo/index.jsx使用props:children代码变更涉及的文件:components/Demo/index.jsx。注意两点:注意两点:如果B组件(父组件)需要向C组件(子组件)传递数据,如下:注意两点:......原创 2022-06-06 15:43:19 · 187 阅读 · 0 评论 -
PureComponent和shouldComponentUpdate
新建react项目,主要包含以下文件:入口文件index.js入口组件App.jsDemo组件Demo/index.cssDemo/index.jsx存在的问题只要调用setState(),就会执行render(),即使state没有发生变化。只要当前组件render,子组件会自动重新render,即使子组件的state或props都没有发生变化。针对以上问题,下面将采取措施进行优化。涉及变更的文件有:component/Demo/index.jsx。 是开关,只有当其返回值原创 2022-06-06 15:02:07 · 252 阅读 · 0 评论 -
使用context实现组件通信
context是一种组件通信方式,常用于祖组件与后代组件间通信。新建react项目,主要包含以下文件:入口文件index.js入口组件App.jsDemo组件Demo/index.cssDemo/index.jsx使用context传递数据创建context对象:。用context对象的Provider组件包裹祖组件,通过value属性传递数据给后代组件:后代组件获得数据。有以下两种方式,第一种,使用context对象的Consumer组件:。第二种,仅适用于类组件:首先原创 2022-06-06 12:22:08 · 335 阅读 · 0 评论 -
使用Fragment
Fragment原创 2022-06-02 13:43:39 · 71 阅读 · 0 评论 -
ReactHook之useRef
本案例涉及的代码文件,包括:入口文件index.js入口组件App.jsDemo/index.jsx(Demo组件)函数式组件实现DemoReact Hook使得函数式组件可以使用state及其他React特性。React Hook常见有:本例演示Ref Hook,即useRef的使用。代码更改涉及的文件有:component/Demo/index.jsx。 的使用和 的使用很类似。原创 2022-06-02 11:26:43 · 167 阅读 · 0 评论 -
ReactHook之useEffect
计数器案例涉及的代码文件,包括:入口文件index.js入口组件App.jsCounter/index.jsx(Counter组件)函数式组件实现CounterReact Hook使得函数式组件可以使用state及其他React特性。React Hook常见有:本例演示Effect Hook,即useEffect的使用。代码更改涉及的文件有:component/Counter/index.jsx。使用 ,可以在函数式组件中如下副作用操作: 的作用相当于以下3个生命周期函数的组合:,可以接收原创 2022-06-02 11:06:49 · 235 阅读 · 0 评论 -
ReactHook之useState
计数器案例涉及的代码文件,包括:入口文件index.js入口组件App.jsCounter/index.jsx(Counter组件)函数式组件实现CounterReact Hook使得函数式组件可以使用state及其他React特性。React Hook常见有:本例演示State Hook,即useState的使用。代码更改涉及的文件有:component/Counter/index.jsx。,返回一个数组。数组的第一个元素是状态,第二个元素是操作状态的方法。本例中返回值的第一个元素是状态原创 2022-06-01 16:37:19 · 141 阅读 · 0 评论 -
懒加载在路由项目中的使用
文章目录路由项目注意点项目源码模板文件index.html入口文件index.js入口组件App.jsHome/index.jsx(Home组件)About/index.jsx(About组件)使用懒加载第一种写法:App.js第二种写法:App.js + Loading组件相关链接路由项目注意点npm install --save react@17 react-dom@17npm install --save react-router-dom@5项目源码代码涉及的主要文件有,模板文件原创 2022-05-31 16:40:49 · 216 阅读 · 0 评论 -
setState的写法
文章目录计数器案例模板文件index.html入口文件index.js入口组件App.jsCounter/index.jsx(Counter组件)对象式写法setState({})setState({},callback)函数式写法setState((state,props) => {})setState((state,props) => {},callback)setState()有以下两种写法,对象式写法。如:setState({})或者setState({},callback)。函原创 2022-05-31 15:18:51 · 2016 阅读 · 0 评论 -
求和案例(最终版本)(组件共享数据)
文章目录求和案例入口文件index.js入口组件App.jsredux/constant.jsredux/actions/counter.jsredux/actions/person.jsredux/reducers/counter.jsredux/reducers/person.jsredux/reducers/index.jsredux/store.jscontainers/Counter/index.jsx(Counter组件)containers/Person/index.jsx(Person组件)原创 2022-05-31 09:50:39 · 132 阅读 · 0 评论 -
求和案例(react+react-redux版本)(整合容器组件和UI组件)
文章目录求和案例入口文件index.js入口组件App.jsredux/constant.jsredux/action.jsredux/reducer.jsredux/store.jsCounter/index.jsx(Counter组件)相关链接求和案例整合容器组件和UI组件,就是把UI组件、容器组件写在同一个js文件里。求和案例涉及的主要文件如下:入口文件index.js入口组件App.jsredux/constant.js,定义了action类型redux/action.js,定义了原创 2022-05-27 14:53:11 · 128 阅读 · 0 评论 -
求和案例(react+react-redux版本)(Provider组件实现store共享)
文章目录求和案例入口文件index.js入口组件App.js相关链接求和案例本篇使用Provider组件实现所有组件共享store。代码变更涉及的文件有:入口文件index.js入口组件App.js入口文件index.jsimport React from 'react';import ReactDOM from 'react-dom';import { Provider } from 'react-redux';import App from './App';import sto原创 2022-05-27 14:18:27 · 336 阅读 · 0 评论 -
求和案例(react+react-redux版本)
文章目录求和案例入口文件index.js入口组件App.jsredux/constant.jsredux/action.jsredux/reducer.jsredux/store.jsCounterContainer/index.jsx(容器组件)Counter/index.jsx(UI组件)react-redux相关链接求和案例首先,得安装react-redux(npm install --save react-redux)。本篇将涉及的文件有:入口文件index.js入口组件App.jsr原创 2022-05-27 14:16:43 · 253 阅读 · 0 评论 -
求和案例(redux完整版)(异步action)
文章目录redux/constant.jsredux/reducer.jsredux/action.jsredux/store.jsCounter/index.jsx(Counter组件)相关链接action是一个普通js对象,包含type和data两个属性。其中,type属性,必选;data属性,可选。action本身并无“同步”或“异步”之说,“同步action”、“异步action”更多的只是区分:action creator的返回值是一个普通的js对象,即所谓的“同步action”。act原创 2022-05-26 16:21:52 · 149 阅读 · 0 评论 -
求和案例(redux完整版)
文章目录redux/store.jsredux/reducer.jsredux/action.jsredux/constant.jsCounter/index.jsx(Counter组件)相关链接涉及的文件有:redux/store.js,无变更redux/reducer.js,有变更redux/action.js,有变更redux/constant.js,新增components/Counter/index.jsx,有变更redux/store.jsimport { createSto原创 2022-05-26 09:51:14 · 144 阅读 · 0 评论 -
求和案例(redux精简版)
文章目录redux简介求和案例(redux精简版v1)redux/store.jsredux/reducer.jsCounter/index.jsx(Counter组件)求和案例(redux精简版v2)redux/store.jsredux/reducer.jsCounter/index.jsx(Counter组件)入口文件index.jsredux简介redux是一个专门用作状态管理的js库,不是react的插件库。它可用于react、angular、vue等项目,但基本与react配合使用。red原创 2022-05-25 17:04:30 · 241 阅读 · 1 评论 -
求和案例(纯react版本)
文章目录新建react项目实现求和案例入口文件index.jsApp.js(入口组件)Counter/index.jsx(Counter组件)新建react项目create-react-app,新建react项目。当前,create-react-app创建的react项目默认使用的是react@18。本项目要使用react17,因此手动降版本,npm install --save react@17 react-dom@17。实现求和案例实现求和案例,代码变更涉及的文件有:入口文件index.原创 2022-05-25 15:07:11 · 148 阅读 · 0 评论 -
使用UI组件库antd
npm install --save antd,安装antd。App.js中引入antd的样式文件,引入antd的Button组件。import React, { Component } from 'react'import { Button } from 'antd';// import 'antd/dist/antd.css';import 'antd/dist/antd.min.css'export default class App extends Component { r.原创 2022-05-24 17:28:11 · 436 阅读 · 0 评论 -
使用withRouter
文章目录嵌套路由的实现模板文件index.html入口文件index.jsApp.js(App组件)Header/index.jsx(Header组件)About/index.jsx(About组件)Home/index.jsx(Home组件)News/index.jsx(News组件)Message/index.jsx(Message组件)路由组件的props使用withRouter一般组件Header的propswithRouter(Header)的props嵌套路由的实现嵌套路由的路由结构如下:原创 2022-05-24 15:03:59 · 390 阅读 · 0 评论 -
声明式导航与编程式导航、push模式与replace模式
文章目录嵌套路由的实现模板文件index.html入口文件index.jsApp.js(App组件)Header/index.jsx(Header组件)About/index.jsx(About组件)Home/index.jsx(Home组件)News/index.jsx(News组件)Message/index.jsx(Message组件)push模式和replace模式路由组件的props参数传递方式params参数传递Message/index.jsxDetail/index.jsxsearch参数传原创 2022-05-23 11:29:24 · 380 阅读 · 0 评论 -
路由传递state参数(react)
文章目录嵌套路由的实现模板文件index.html入口文件index.jsApp.js(App组件)Header/index.jsx(Header组件)About/index.jsx(About组件)Home/index.jsx(Home组件)News/index.jsx(News组件)Message/index.jsx(Message组件)路由传递state参数Detail/index.jsx(Detail组件)Message/index.jsx(Message组件)嵌套路由的实现嵌套路由的路由结构原创 2022-05-20 17:15:18 · 1890 阅读 · 0 评论 -
路由传递search参数(react)
文章目录嵌套路由的实现模板文件index.html入口文件index.jsApp.js(App组件)Header/index.jsx(Header组件)About/index.jsx(About组件)Home/index.jsx(Home组件)News/index.jsx(News组件)Message/index.jsx(Message组件)路由传递search参数Detail/index.jsx(Detail组件)Message/index.jsx(Message组件)嵌套路由的实现嵌套路由的路由结原创 2022-05-20 16:34:00 · 739 阅读 · 0 评论 -
路由传递params参数(react)
文章目录嵌套路由的实现模板文件index.html入口文件index.jsApp.js(App组件)Header/index.jsx(Header组件)About/index.jsx(About组件)Home/index.jsx(Home组件)News/index.jsx(News组件)Message/index.jsx(Message组件)路由传递params参数万事俱备Detail/index.jsx(Detail组件)Message/index.jsx(Message组件)东风来了Detail/ind原创 2022-05-20 15:21:00 · 1525 阅读 · 0 评论 -
封装NavLink
文章目录基本路由的使用模板文件index.html入口文件index.js入口组件App.jspages/Home/index.jsx(Home组件)pages/About/index.jsx(About组件)一般组件和路由组件Header/index.jsx(Header组件)App.js(App组件)新增导航与路由Business/index.jsx(Business组件)Employees/index.jsx(Employees组件)Investors/index.jsx(Investors组件)Me原创 2022-05-19 17:41:41 · 259 阅读 · 0 评论 -
模糊匹配与严格匹配
文章目录基本路由的使用模板文件index.html入口文件index.js入口组件App.jspages/Home/index.jsx(Home组件)pages/About/index.jsx(About组件)模糊匹配与严格匹配模糊匹配严格匹配基本路由的使用本篇的vue项目,代码涉及的主要文件有:模板文件index.html入口文件index.js入口组件App.js路由组件Home:pages/Home/index.jsx路由组件About:pages/About/index.jsx原创 2022-05-19 15:04:18 · 653 阅读 · 0 评论 -
Redirect组件的使用
文章目录基本路由的使用模板文件index.html入口文件index.js入口组件App.jspages/Home/index.jsx(Home组件)pages/About/index.jsx(About组件)Redirect组件的使用基本路由的使用本篇的vue项目,代码涉及的主要文件有:模板文件index.html入口文件index.js入口组件App.js路由组件Home:pages/Home/index.jsx路由组件About:pages/About/index.jsx模板文件原创 2022-05-19 13:13:57 · 731 阅读 · 0 评论 -
Switch组件的使用
文章目录基本路由的使用模板文件index.html入口文件index.js入口组件App.jspages/Home/index.jsx(Home组件)pages/About/index.jsx(About组件)Switch组件的使用问题描述使用Switch组件基本路由的使用本篇的vue项目,代码涉及的主要文件有:模板文件index.html入口文件index.js入口组件App.js路由组件Home:pages/Home/index.jsx路由组件About:pages/About/ind原创 2022-05-19 11:18:23 · 1242 阅读 · 0 评论 -
嵌套路由的实现(react)
文章目录基本路由的使用模板文件index.html入口文件index.js入口组件App.jspages/Home/index.jsx(Home组件)pages/About/index.jsx(About组件)嵌套路由的实现基本路由的使用本篇的vue项目,代码涉及的主要文件有:模板文件index.html入口文件index.js入口组件App.js路由组件Home:pages/Home/index.jsx路由组件About:pages/About/index.jsx模板文件index.h原创 2022-05-19 10:00:17 · 568 阅读 · 0 评论 -
路由的基本使用(react)
文章目录创建react应用初步搭建页面public/index.htmlindex.jsApp.js安装react路由插件:react-router-dom定义路由组件pages/Home/index.jsxpages/About/index.jsx编写路由链接,注册路由index.jsApp.js路由链接改用NavLinkApp.js启动应用,测试效果创建react应用create-react-app react_demo,创建react应用。其中,默认react@18,react-dom@18。n原创 2022-05-17 21:54:14 · 273 阅读 · 0 评论