Tsunami黄嵩粟 - 博客园

2021年6月23日

摘要： <TransitionGroup> <CSSTransition> <li>aaaa</li> </CSSTransition> </TransitionGroup> 阅读全文

posted @ 2021-06-23 15:07 Tsunami黄嵩粟阅读(61) 评论(0) 推荐(0)

摘要：在项目中可能会有一些动画效果展示或是页面切换效果，css动画的方式，比较局限，涉及到一些js动画的时候没法处理了。react-transition-group是react的第三方模块，借住这个模块可以更方便的实现更加复杂的动画效果安装 npm i -S react-transition-group 阅读全文

posted @ 2021-06-23 14:48 Tsunami黄嵩粟阅读(160) 评论(0) 推荐(0)

react多级路由重定向与404定义

摘要：在有一些功能中，往往请求地址的前缀是相同的，不同的只是后面一部份，此时就可以使用多级路由(路由嵌套)来实现此路由的定义实现。例：路由规则如下 admin/index admin/user 它们路由前缀的admin是相同的,不同的只是后面一部份 # 重定向 from从哪里来 to重定向到何处去 < 阅读全文

posted @ 2021-06-23 14:45 Tsunami黄嵩粟阅读(137) 评论(0) 推荐(0)

react自定义导航组件路由参数

摘要：为何需要自定义导航？因为在项目中往往不是所有的声明式导航都是需要a标签完成，有时候可能需要别的标签，此时如果在需要的地方去写编程式导航就会有代码重复可能性，就在对于公共代码进行提取。思路：定义一个普通组件可以是类组件也可以是函数式组件父组件能向子组件传值 props 不管路由规则是否匹配都要阅读全文

posted @ 2021-06-23 14:44 Tsunami黄嵩粟阅读(163) 评论(0) 推荐(0)

react withRouter高阶组件

摘要：作用：把不是通过路由切换过来的组件中，将react-router 的 history、location、match 三个对象传入props对象上默认情况下必须是经过路由匹配渲染的组件才存在this.props，才拥有路由参数，才能使用编程式导航的写法，执行this.props.history.pu 阅读全文

posted @ 2021-06-23 14:41 Tsunami黄嵩粟阅读(79) 评论(0) 推荐(0)

2021年5月31日

编程式导航

摘要： react-router-dom中通过history对象中的push/replace/go等方法实现编程式导航功能 this.props.history.push(path) 或 this.props.history.push({ pathname:’’, search:’’, state:{} } 阅读全文

posted @ 2021-05-31 12:56 Tsunami黄嵩粟阅读(104) 评论(0) 推荐(0)

react路由渲染

摘要：三种渲染方式 component = (组件对象或函数) <Route path="/home" component={Home} /> 或 <Route path="/home" component={()=><Home />} /> render = (函数) <Route path="/hom 阅读全文

posted @ 2021-05-31 12:55 Tsunami黄嵩粟阅读(145) 评论(0) 推荐(0)

2021年4月30日

REACT路由

摘要：现代的前端应用大多数是SPA（单页应用程序），也就是只有一个HTML页面的应用程序。因为它的用户体验更好、对服务器压力更小，所以更受欢迎。为了有效的使用单个页面来管理多页面的功能，前端路由应运而生。前端路由功能：让用户从一个视图(组件)导航到另一个视图(组件) 前端路由是一套映射规则，在React 阅读全文

posted @ 2021-04-30 11:47 Tsunami黄嵩粟阅读(104) 评论(0) 推荐(0)

redux中间件

摘要： redux默认支持同步操作，异步操作怎么办？Action发出以后，Reducer立即算出 State，这叫做同步；Action 发出以后，过一段时间再执行 Reducer，这就是异步。怎么才能Reducer 在异步操作结束后自动执行呢？这就要用到新的工具：中间件。中间件有很多，这里使用一个 Redu 阅读全文

posted @ 2021-04-30 11:41 Tsunami黄嵩粟阅读(58) 评论(0) 推荐(0)

react-redux

摘要：网址：https://react-redux.js.org/ React-Redux是Redux的官方针对React开发的扩展库，默认没有在React项目中安装，需要手动来安装。react-redux是依赖于redux所以你必须安装redux 你可以理解为react-redux就是redux给我们提阅读全文

posted @ 2021-04-30 11:37 Tsunami黄嵩粟阅读(55) 评论(0) 推荐(0)