vue和react区别

共同点

数据驱动视图
组件化
都用了虚拟dom

不同点

核心思想
Vue的核心思想是尽可能的降低前端开发的门槛，是一个灵活易用的渐进式双向绑定的MVVM框架。
React的核心思想是声明式渲染和组件化、单向数据流，React既不属于MVC也不属于MVVM架构

虚拟dom

都是用JS对象来模拟真实DOM，然后用虚拟DOM的diff来最小化更新真实DOM。
vue 组件响应式思想 采用代理监听数据，我在某个组件里修改数据，就会明确知道那个组件产生了变化，只用 
diff 这个组件就可以了
react采用自顶向下的全量diff，vue是局部订阅的模式
react 函数式组件思想 当你 setstate 就会遍历 diff 当前组件所有的子节点子组件
react中数据发生变化（调用setstate时），render函数就会执行，重新生成一个新的虚拟dom，这个虚拟dom
和旧的虚拟dom做比较，得出差异然后渲染

react生命周期

组件的挂载：
   constructor   组件初始化数据
   componentWillMount   代表组件已经初始化数据了 但还没有渲染DOM
   render(渲染组件)  组件开始渲染和(更新)触发
   componentDidMount dom节点已经生成 发送异步请求获取数据
   
更新
   componentWillReceiveProps :当父组件更新子组件state时，该方法会被调用。
   shouldComponentUpdate ： 该方法决定组件state或props的改变是否需要重新渲染组件。
   componentWillUpdate  更新之前
   render再次渲染视图  会得到一份虚拟dom，并且和上一次的虚拟dom进行对比
   （dom diff的到最小的差异），只重新渲染有差异的部分
   componentDidUpdate 更新之后
组件的卸载
   componentWillUnmount 卸载之前清除定时器

移除的生命周期

componentWillMount--- componentWillUpdate---- componentWillReceiveProps-----

新生命周期

实例期：
constructor
getDerivedStateFromProps
render
componentDidMount

运行期：
props 更新:
getDerivedStateFromProps
shouldComponentUpdate
render
getSnapshotBeforeUpdate
componentDidUpdate

state 更新:
getDerivedStateFromProps
shouldComponentUpdate
render
getSnapshotBeforeUpdate
componentDidUpdate

useEffect

 模拟 class 组件的 componentDidMount 和 componentDidUpdate
 第一个参数执行函数，第二个参数不传
useEffect(() => {
  console.log('DidMount 和 DidUpdate')
})
 
 模拟 class 组件的 componentDidMount
 第一个参数执行函数，第二个参数传空数组[]
 useEffect(() => {
    console.log('加载完了componentDidMount')
 }, [])  第二个参数是 [] （不依赖于任何 state）
 
  模拟 class 组件的 componentDidUpdate
  第一个参数执行函数，第二个参数传state数组
 useEffect(() => {
     console.log('更新了')
 }, [count, name])  第二个参数就是依赖的 state
 
模拟 class 组件的 componentDidMount 和 componentWillUnmount
useEffect(() => {
    let timerId = window.setInterval(() => {
        console.log(Date.now())
    }, 1000)
     返回一个函数
     模拟 componentWillUnmount 组件销毁的时候 停止计时器
    return () => {
        window.clearInterval(timerId)
    }
}, [])

useEffect和useLayoutEffect的区别

useEffect是异步执行的，而`useLayoutEffect`是同步执行的。
useEffect的执行时机是浏览器完成渲染之后，
而 `useLayoutEffect` 的执行时机是浏览器把内容真正渲染到界面之前，
和 `componentDidMount` 等价。

useMEmo和useCallback

在依赖数据发生变化的时候，才会调用传进去的回调函数去重新计算结果，起到一个缓存的作用
useMemo  缓存的结果是回调函数中return回来的值，主要用于缓存计算结果的值，
应用场景如需要计算的状态
useCallback  缓存的结果是函数，主要用于缓存函数，
应用场景如需要缓存的函数，因为函数式组件每次任何一个state发生变化，
会触发整个组件更新，一些函数是没有必要更新的，此时就应该缓存起来，
提高性能，减少对资源的浪费

redux执行流程

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

redux组成部分

State：Redux中的数据
Reducer：这是Redux的核心，内部处理接受到action后到返回新的state的逻辑；
reducer可以进行嵌套，一个store只有一个根reducer
Action：一般会写成actionCreator函数的形式，这个函数返回的就是action对象，
这个对象至少会一个type属性，用于标识当前的动作
Store: 以上三部分组成的就是一个Store，一般来说一个应用仅存在一个Store，
它可以进行读取应用的state，监听state的变化，发起一个action等操作

store:用来存储数据的
reducer:管理数据的（事件处理函数）
actionCreators:创建action,是action的创建者，交由reducer来处理
view:用来使用数据，在这里，一般用reducer组件来充当