react是什么

是一个用于构建用户界面的js库

redux是一个专门用于状态管理的js库

作用 集中式管理react应用中多个组件共享的状态

什么情况下用到redux

1.一些组件的状态,需要让其他组件随时可以拿到（共享）
2.一个组件需要改变其他组件的状态（通信）
3.能不用就不用,不用比较吃力才考虑用

优点缺点

-   优点

    -   Redux轻量，生态丰富，可以结合流行的`redux-thunk`、`redux-saga`等进行使用
    -   Redux的写法比较固定，团队应用中风格比较稳定，提高协作中的可维护性
    -   因为Redux中的reducer更新时，每次return的都是不可变对象，所以时间旅行操作相对容易

-   缺点

    -   每一次的dispatch都会从根reducer到子reducer嵌套递归的执行，所以效率相对较低；
    -   Redux核心是不可变对象，在Reducer中的操作都要比较小心，注意不能修改到state的属性
    -   Redux中写法固定，模板代码较多

redux执行流程

1.store通过reducer创建初始状态
2.view通过store.getState()获取公共状态
3.view改变状态，需要调用action里面的方法，action里面被调用的方法会通过
store.dispatch()方法传递行为标识给reducer
4.reducer接收到action并根据传递过来来的行为标识来改变状态
5.store中改变的状态会被view重新获取

lazyLoad

const login=lazy(()=>{import()})

//2.通过<Suspense>指定在加载得到路由打包文件前显示一个自定义1oading界面<Suspense 
fa77back=f<h1>loading. . ...</hl>}>
<Switch>
<Route path=""/××x"" component= {X×××]/>一Redirect to=" /login""/>
</Switch>
</ Suspense>

render()和template

流程上下级关系

vue渲染过程

1.template=>
2.render()  通过render创建真实元素
3.生成虚拟dom(本质是js对象)
4.生成真实dom   

vue使用render

在别的组件引用方式和平常的组件一样
<script>
export default{
    h=>createElement()=>创建元素
  render(h){
      class:{
          btn:true,
          'btn-success':this.type==='success'
      }
      ,
      on:{
          绑定事件
      }
  }
}
</script>
<style>
...
</style>