![](https://img-blog.csdnimg.cn/20201014180756923.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
react
react学习笔记
Eternalzh
这个作者很懒,什么都没留下…
展开
-
纯函数是什么
1.一类特别的函数:只要是同样的输入(实参),必定得到同样的输出(返回)2.必须遵守一些约束:1)不得改写参数数据2)不会产生任何副作用,例如网络请求,输入和输出设备3)不能调用Data.now()或者Math.random()等不纯的方法3.redux的reducer函数必须是一个纯函数...原创 2022-04-08 15:37:49 · 134 阅读 · 0 评论 -
useParams()、useSearchParams()、 useLocation()、 useMatch()
useParams()1. 作用:回当前匹配路由的`params`参数,类似于5.x中的`match.params`。useSearchParams()1. 作用:用于读取和修改当前位置的 URL 中的查询字符串。2. 返回一个包含两个值的数组,内容分别为:当前的seaech参数、更新search的函数。useLocation()1. 作用:获取当前 location 信息,对标5.x中的路由组件的`location`属性。useMatch()..原创 2022-03-24 11:06:50 · 12842 阅读 · 0 评论 -
<Navigate>与useNavigate()
Navigate1. 作用:只要`<Navigate>`组件被渲染,就会修改路径,切换视图。2. `replace`属性用于控制跳转模式(push 或 replace,默认是push)。useNavigate()1. 作用:返回一个函数用来实现编程式导航。...原创 2022-03-24 10:58:01 · 3479 阅读 · 0 评论 -
<Routes/> 与 <Route/>
1. v6版本中移出了先前的`<Switch>`,引入了新的替代者:`<Routes>`。2. `<Routes>` 和 `<Route>`要配合使用,且必须要用`<Routes>`包裹`<Route>`。3. `<Route>` 相当于一个 if 语句,如果其路径与当前 URL 匹配,则呈现其对应的组件。4. `<Route caseSensitive>` 属性用于指定:匹配时是否区分大小写(默认为原创 2022-03-24 10:53:16 · 444 阅读 · 0 评论 -
Link与NavLink(router6)
<Link>1. 作用: 修改URL,且不发送网络请求(路由链接)。2. 注意: 外侧需要用`<BrowserRouter>`或`<HashRouter>`包裹。<NavLink>1. 作用: 与`<Link>`组件类似,且可实现导航的“高亮”效果。...原创 2022-03-24 10:47:18 · 544 阅读 · 0 评论 -
BrowserRouter与HashRouter的区别
1.底层原理不一样:BrowserRouter使用的是H5的history API,不兼容IE9及以下版本。HashRouter使用的是URL的哈希值。2.path表现形式不一样BrowserRouter的路径中没有#,例如:localhost:3000/demo/testHashRouter的路径包含#,例如:localhost:3000/#/demo/test3.刷新后对路由s...原创 2022-03-16 10:50:43 · 2686 阅读 · 0 评论 -
向路由组件传递参数
1.params参数2.search参数3.state参数总结:1.params参数 路由链接(携带参数):<Link to='/demo/test/tom/18'}>详情</Link> 注册路由(声明接收):<Route path="/demo/test/:name/:age" component={Test}/> 接收参数:this.props.match.params2.sear...转载 2022-03-16 09:34:57 · 63 阅读 · 0 评论 -
路由组件与一般组件
1.写法不同: 一般组件:<Demo/> 路由组件:<Route path="/demo" component={Demo}/> 2.存放位置不同: 一般组件:components 路由组件:pages...原创 2022-03-14 11:19:30 · 403 阅读 · 0 评论 -
react路由
SPA的理解:1)单页web应用2)整个应用只有一个完整的页面3)点击页面中的链接不会刷新页面,只会做页面的局部更新 4)数据都需要通过ajax请求获取,并在前端异步实现1.一个路由就是一个映射关系(key:value)key(path),value(function,component)2.后端路由(value是function),用来处理客户端提交的请...原创 2022-03-04 16:25:32 · 402 阅读 · 0 评论 -
组件的生命周期
1.组件从创建到死亡它会经历一些特定的阶段2.react组件中包含一系列钩子函数(生命周期回调函数),会在特定的时刻调用3.我们在定义组件时,会在特定的生命周期回调函数中,做特定的工作...原创 2022-02-23 14:33:34 · 300 阅读 · 0 评论 -
react面向组件
1.函数式组件2.类式组件原创 2022-01-12 16:31:27 · 143 阅读 · 0 评论 -
组件实例的三大核心属性之二-refs
1.字符串形式的ref(能避免使用尽量避免)2.回调函数形式内联的回调函数和class的绑定函数(一般使用内联)3.createRef创建容器(每次使用都要创建)原创 2022-01-19 09:52:15 · 145 阅读 · 0 评论 -
组件实例的三大核心属性之二-props
props属性:可以使用类和函数两种原创 2022-01-18 14:38:24 · 213 阅读 · 0 评论 -
组件实例的三大核心属性之一-state
1.state是组件对象最重要的属性,值是对象(可以包含多个key-value的组合)2.组件被称为状态机,通过更新组件的state来更新对应的页面显示(重新渲染组件)注意:1.组件中render方法中this为组件实例对象2.组件自定义的方法中this为undefined,如何解决?a.强制绑定this:通过函数对象的bindb.箭头函数3.状态数据不能直接修改或更新,要通过setState...原创 2022-01-18 09:43:24 · 382 阅读 · 0 评论 -
react事件处理
不要过度使用ref原创 2022-01-19 10:10:17 · 463 阅读 · 0 评论 -
react模块与组件
1.模块,就是一个js文件,盒子布局只拆html,复用js2.模块化,当应用的js都以模块来编写,这个应用就是一个模块化的应用。3.组件,代码+资源的集合(html、css、js、image)复用编码4.组件化,把一个复杂的功能拆分成一个个小组件,这个应用就是一个组件化的应用...原创 2022-01-12 11:11:36 · 108 阅读 · 0 评论 -
高阶函数-函数柯里化
(1) 高阶函数:如果一个函数符合下面两个规范中的任何一个,那该函数就是高阶函数 1.若A函数,接收的参数是一个函数,那么A就可以称之为高阶函数 2.若A函数,调用的返回值依然是一个函数,那么A就可以称之为高阶函数 常见的高阶函数: 1.Promise //new Promise(()=>{})内置的构造函数 2.se...原创 2022-02-14 14:07:29 · 428 阅读 · 1 评论