react路由传值、react路由监听、react过渡动画、react虚拟DOM树、react路由切换动画

1.编导式导航跳转路由传值

1.1url路由拼接传值

this.props.history.push(‘/user?title=’+params[0])

url路由拼接传值目标组件使用this. props.location.search取值，取值如下：

路由url拼接传值:{decodeURI(props.location.search)}

1.2 动态路由传值

this.props.history.push(‘/user/’+params[0])

动态路由传值，目标组件使用this.props.match.params取值，需要在/src/router/index.js路由配置文件中配置，如下：

取值如下：

动态路由传值:{props.match.params.title}

1.3 自定义对象传值

this.props.history.push({

​ pathname:‘/user’,

​ data:{

​ title

​ }

})

自定义对象传值，路径用pathname，目标组件使用this.props.location.xxx取值，取值如下：

<h3>对象传值:{props.location.data && props.location.data.title}</h3>

其中&&的原理：如果前边为真，就去后边的呢个值，如果前边为假，取前边的值

三种路由传值方式对比：

• url路径传值 优点：简单 缺点：取值是url编码后的字符串，解析麻烦
• 动态路由传值 优点：取值方便 缺点：配置麻烦
• 自定义对象传值 优点：传值、取值方便简单 缺点：网页刷新数据会丢失
• 所以综合建议使用第二种

2.路由监听

路由监听不能在函数式组件中监听，因为监听不会被取消。监听路由，props.history.listen函数添加路由监听器，类似于事件监听的addEventListener，可以重复监听，导致的结果是，每次跳转到这一页都会添加新的监听，路由跳转过程中，监听函数会越来越多，造成性能浪费甚至bug。

2.1路由监听使用

1，在页面卸载时，取消监听 2，在全局根组件app中监听路由

  var cancel =  props.history.listen((route,type)=>{
        console.log("User路由监听", route.pathname, type)
  })

2.2 取消路由监听

取消路由监听：监听路由时会返回一个函数，调用函数即可取消监听，应该写在componentWillUnmount

2.3 在根组件app中监听路由

2.2.1.1, 在app.js中从路由模块导入withRouter

import { withRouter } from ‘react-router-dom’

2.2.1.2, 导出App时,用withRouter 函数处理后导出, 把路由数据添加到props中

export default withRouter(App);

2.2.1.3, 在app根组件的componentDidMount函数中添加全局路由监听

注: 全局路由监听,根组件App中没有路由信息, 需要使用高阶组件withRouter添加路由信息,然后监听

2.4 局部路由监听

2.4.1在路由跳转的组件中使用props.history.listen() 监听路由, 得到返回值cancle

this.cancle = props.history.listen((route, type)=>{})

2.4.2 在组件的componentWillUnmount中取消路由监听, 调用 cancle函数, 以防止重复监听,浪费性能

this.cancle()

注: 局部监听只能监听此组件离开时的路由, 类似于vue中beforeRouteLeave() 路由守卫

3.react路由过渡动画

3.1在react工程中下载安装过渡动画模板

npm install react-transition-group --save

3.2在需要执行过渡的组件中导入动画模块

import { CSSTransition } from “react-transition-group”

3.3 在需要过渡的标签外层添加CSSTransition组件

<CSSTransition in={bool} timeout={2000}  classNames="myfade">
        <div></div>
 </CSSTransition>

• in：控制子元素显示隐藏的条件，一般是bool值或表达式
• timeout：入场或出场动画的事件，单位默认是毫秒
• classNames：入场或出场class属性名前缀

3.4 在组件的css中通过class设置入场和出场动画

.myfade-enter .myfade-enter-active .myfade-enter-done

.myfade-exit .myfade-exit-active .myfade-exit-done

注意：1，入场和出场的class样式要按顺序写，动画开始和结束顺序不能颠倒

​ 2，需要在index.js中关闭严格模式，删除

​ 3，enter-active和exit-active中要写过渡结束状态才有效

4.路由切换动画

4.1 在react工程中下载安装过渡动画模块

npm install react-transition-group --save

4.2 在路由配置文件/src/router/index.js中导入动画组件

import { TransitionGroup, CSSTransition } from “react-transition-group”

4.3在路由组件模板中,用动画组件包裹路由组件

  <TransitionGroup>
        <CSSTransition timeout={2000} classNames="binge1" unmountOnExit key={props.location.pathname}>
            <Switch location={props.location}>
                <Route exact path="/user" component={User} />
            </Switch>
        </CSSTransition>
    </TransitionGroup >

注意：CSSTransition组件的key属性要保证唯一性,所以用location.pathname Switch 组件要设置location属性为路由信息的props.location, 保证路由跳转组件的key和CSSTransition的key一致

4.4路由组件中没有路由信息location.pathname, 需要使用withRouter导入

import { withRouter } from "react-router-dom"
export default withRouter(MyRouter)

4.5在组件的css文件中写路由切换动画过程

/* 入场动画过程 */
.binge1-enter{
  transform: translateX(200px)
}
.binge1-enter-active{
  transition: 2s;
  transform: translateX(0px)
}
.binge1-enter-done{
  transform: translateX(0px)
}
/* 出场动画过程 */
.binge1-exit{
  transform: translateX(0px)
}
.binge1-exit-active{
  transition: 2s;
  transform: translateX(200px)
}
.binge1-exit-done{
  transform: translateX(200px)
}

.home, .user, .login, .animate{
  position: absolute;
  left: calc(50% - 200px)
}

5.虚拟DOM实现流程

5.1虚拟DOM实现流程一：在组件初始化时，把DOM书标签结构转化为js对象结构

 render() {
        // 模拟实现react底层虚拟DOM把html标签树结构转化为js对象结构
        return React.createElement(
           "div",
           {
                key: "1",
                className: "DOM",
                children: [
                    React.createElement(
                        "h1",
                        {
                            key: "2",
                            className: "title",
                            children: "这是虚拟DOM页"
                        }
                    ),
                    React.createElement(
                        "button",
                        {
                            key: "3",
                            onClick: this.setName,
                            children: this.state.name
                        }
                    )
                ]
           }
        )
    }

5.2 虚拟DOM实现流程二：在setState函数内部，更新state数据后，再次生成新的虚拟DOM

this.state.name = "李四"
// 虚拟DOM实现流程二: 在setState函数内部,更新state数据后,再次生成新的虚拟DOM
this.NewVirtualDOM = this.render() 
// 因为在数据更新后需要重新调用render生成新的虚拟DOM对象, 所以数据更新时,render会执行
console.log(this.oldVirtualDOM, this.NewVirtualDOM)
// 由此可见,当state数据更新时,直接导致的就是虚拟DOM树中的数据发生变化

5.3 虚拟DOM实现流程三：把更新前的老虚拟dom树,和更新后的新虚拟DOM树,都传入底层diff函数中, 通过虚拟dom节点对比,得到新老dom树之间的不同之处, 把所有区别点返回到一个patch对象中

 React.diff = function(){}  // 模拟操作,防止报错
 var patch = React.diff(this.oldVirtualDOM, this.NewVirtualDOM) // 模拟操作
        patch = {   // 模拟操作
            diffrients: [
                {
                    key: "3",
                    type: "button",
                    selector: ".DOM button",
                    children: this.state.name
                }
            ]
        }

5.4虚拟DOM实现流程四: 根据patch对象中找到的不同点,针对想的找到真实DOM中的标签, 更新这些标签, 实现DOM的局部更新

        patch.diffrients.forEach(item=>{
            document.querySelector(item.selector).innerText = item.children
        })