Preface
Vue and React is currently the most popular and one of the best front-end framework ecology. Framework itself is not good or bad, only applicable in others, chosen for their business scenario, team-based technologies is our main purpose.
1. Background
VUE
Google engineers, especially before the rain the river created this framework in 2014. Vue is a progressive frame for constructing user interfaces. The other frame difference is large, Vue is designed to be applied from the bottom up layer by layer. Vue core library focus only on the view layer, is not only easy to use but also easy to integrate third-party libraries or existing project.
react
Unlike Vue, react library created by Facebook. It was originally intended to create a Facebook ad traffic management. At that time Facebook has encountered a problem and coding aspects of maintenance. It is the ability to create dynamic and interactive UI is famous.
2. The core idea
vue react with component-based development concept are respected, but there are great differences in ideological core design.
VUE
VUE whole idea still embrace the classic html (structure) + css (performance) + js (behavior) of the form, vue encourage developers to use the template template, and provides instructions for developers to use (v-if, v-show , v-for, etc.), so when there will be a development vue applications written in classic web application (structure, performance, conduct separate) feeling. On the other hand, on the component data for, vue2.0 by Object.defineProperty to do more detailed data monitoring, precision components to achieve the level of updates.
react
is a whole react functional thinking component uses jsx syntax, all in js, css and html will integrate all javaScript, jsx grammar is relatively more flexible, I started to turn just not very adapt, feel feel to write applications react like writing javaScript. When the component calls setState or props change, internal components will render re-rendered, sub-assemblies will also re-rendering, you can avoid unnecessary re-rendering by shouldComponentUpdate or PureComponent (personal feeling on this point is better vue do good) .
3. The module form
VUE
VUE xx.vue component definition file used to represent, VUE component html, css, js combined together, using the data portion of the template using {{}}.
REACT
REACT recommended jsx js file represented or component, react supports two forms class components and function component, react with {variable} package.
Note: The component name must begin with a capital letter. React to the components will begin with lowercase letters as native DOM label. For example, <div /> Representative HTML div tag, and <Welcome /> represents a component, and the need to use Welcome in scope.
4. Data Management
component typically contains data management portion 2, the data from the parent props component data itself.
vue react with the props is a unidirectional data stream, will update the parent prop flows down to the subassembly, but not vice versa. prop can be an array or an object, for receiving data from the parent component.
The life cycle of
the life cycle of components generally include: initialize, mount, update, uninstall four big stages, respectively, followed by a look vue and reac life cycle.
VUE
VUE life cycle include:
beforeCreate
instance of the component that you just created, DOM elements and data are not initialized, temporarily unable to carry out any operation inside this cycle.
created
data initialization data has been completed, the method may also have been called, but not DOM rendering. Call interface to obtain background data can be done at this stage.
beforeMount
DOM loading is not completed, the data initialization is complete, but the two-way binding or display data {} {} virtual DOM structure has been generated.
mounted
data and complete DOM are mounted on a period of the placeholder data values to the rendering into. This method of performing the initialization period required for the operation of a DOM.
beforeUpdate
page data changed will trigger, trigger before the update, this time before the data or the data is not updated, there is no data change is not performed.
updated
page data will trigger change, triggered after the update is completed, then the data is updated data.
beforeDestroy
performed before the destruction of the components, you can still access the data and method in this cycle, it can be done at this stage need to publish information communication between multiple components.
destroyed
trigger the destruction of the component when the component corresponding to the left page, is mainly used to cancel some side effects (canceled an event listener, cancel the timer, eliminating unnecessary requests, etc.)
REACT
life cycle function removes after 16.0 REACT
componentWillMount
componentWillReceiveProps
componentWillUpdate
but for backwards compatibility, react not delete these three life-cycle, three new functions UNSAFE_componentWillMount to UNSAFE_ prefix alias (), UNSAFE_componentWillReceiveProps (), UNSAFE_componentWillUpdate ().
The new life-cycle function:
static getDerivedStateFromProps (nextProps, PrevState)
getSnapshotBeforeUpdate (prevProps, PrevState)
Summary:
(1) initialization phase remains unchanged
(2) mount the stage:
getDerivedStateFromProps => the render => componentDidMount
(3) update phase
getDerivedStateFromProps => shoudeComponentUpdate => the render => getSnapshotBeforeUpdate => componentDidUpdate
(4) unloading phase remains unchanged
summary of
these individuals are simple to understand and react to vue, and other content in the latter part of the gradual update.
