前端框架用vue还是react？清晰对比两者差异( 五 ) _前端框架

（2）getInitialState：为实例挂载初始状态，且每次实例化都会执行，也就是说，每一个组件实例都拥有自己独立的状态。
（3）componentWillMount：执行componentWillMount，相当于Vue里的created+beforeMount，这里是在渲染之前最后一次更改数据的机会，在这里更改的话是不会触发render的重新执行。
（4）render：渲染dom
render()方法必须是一个纯函数，他不应该改变
state，也不能直接和浏览器进行交互，应该将事件放在其他生命周期函数中。如果
shouldComponentUpdate()返回
false，
render()不会被调用。
（5）componentDidMount：相当于Vue里的mounted,多用于操作真实dom
【运行中阶段（5个）】
当组件mount到页面中之后，就进入了运行中阶段，在这里有5个钩子函数，但是这5个函数只有在数据（属性、状态）发送改变的时候才会执行
（1）componentWillReceiveProps(nextProps,nextState)
当父组件给子组件传入的属性改变的时候，子组件的这个函数才会执行。初始化props时候不会主动执行
当执行的时候，函数接收的参数是子组件接收到的新参数，这个时候，新参数还没有同步到this.props上,多用于判断新属性和原有属性的变化后更改组件的状态。
（2）接下来就会执行shouldComponentUpdate(nextProps,nextState),这个函数的作用：当属性或状态发生改变后控制组件是否要更新，提高性能,返回true就更新，否则不更新，默认返回true 。
接收nextProp、nextState，根据根据新属性状态和原属性状态作出对比、判断后控制是否更新
如果
shouldComponentUpdate()返回
false，
componentWillUpdate,
render和
componentDidUpdate不会被调用。
（3）componentWillUpdate,在这里，组件马上就要重新render了，多做一些准备工作，千万千万，不要在这里修改状态，否则会死循环相当于Vue中的beforeUpdate
（4）render，重新渲染dom
（5）componentDidUpdate，在这里，新的dom结构已经诞生了,相当于Vue里的updated
【销毁阶段】
当组件被销毁之前的一刹那，会触发componentWillUnmount，临死前的挣扎
相当于Vue里的beforeDestroy，所以说一般会做一些善后的事情，例如使定时器无效，取消网络请求或清理在
componentDidMount中创建的任何监听。

文章插图

销毁组件vuevue在调用$destroy方法的时候就会执行beforeDestroy生命周期函数，然后组件被销毁，这个时候组件的dom结构还存在于页面结构中，也就说如果想要对残留的dom结构进行处理必须在destroyed生命周期函数中处理。
reactreact执行完componentWillUnmount之后把事件、数据、dom都全部处理掉了，也就是说当父组件从渲染这个子组件变成不渲染这个子组件的时候，子组件相当于被销毁，所以根本不需要其他的钩子函数了。react销毁组件的时候，会将组件的dom结构也移除，vue则不然，在调用destory方法销毁组件的时候，组件的dom结构还是存在于页面中的，this.$destory组件结构还是存在的，只是移除了事件监听，所以这就是为什么vue中有destroyed，而react却没有componentDidUnmount 。
状态集管理工具vuevuex是一个专门为vue构建的状态集管理工具，vue和react都是基于组件化开发的，项目中包含很多的组件，组件都会有组件嵌套，想让组件中的数据被其他组件也可以访问到就需要使用到Vuex 。
vuex的流程

将需要共享的状态挂载到state上：this.$store.state来调用

创建store，将状态挂载到state上，在根实例里面配置store，之后我们在组件中就可以通过this.$store.state来使用state中管理的数据，但是这样使用时，当state的数据更改的时候，vue组件并不会重新渲染，所以我们要通过计算属性computed来使用，但是当我们使用多个数据的时候这种写法比较麻烦，vuex提供了mapState辅助函数，帮助我们在组件中获取并使用vuex的store中保存的状态。

我们通过getters来创建状态：通过this.$store.getters来调用

可以根据某一个状态派生出一个新状态，vuex也提供了mapGetters辅助函数来帮助我们在组件中使用getters里的状态。

使用mutations来更改state：通过this.$store.commit来调用

我们不能直接在组件中更改state，而是需要使用mutations来更改，mutations也是一个纯对象，里面包含很多更改state的方法，这些方法的形参接收到state，在函数体里更改，这时，组件用到的数据也会更改，实现响应式。vuex提供了mapMutations方法来帮助我们在组件中调用mutations 的方法。