React with Vue alignment

1.virtual gift

  • Comparison with Simulation JS DOM structure, DOM change layer on JS done to improve performance redraw
  • DOM expensive operation, JS high operating efficiency, to reduce DOM operations
  • Use: The use snabbdom
  • Core API: h function H ( 'tag name' attribute {}, [subelement]) or H ( 'tag name' attribute {} '')
  • patch(container,vnode) 或者 path(vnode,newvnode)

 

2.MVVM difference in jQuery and Vue

Separating the data view, decoupling (open closed principle)
to view the data driver, the data concerned only, DOM operations are encapsulated

3. understanding of MVVM

  • MVC:model view controller

(Data Model -> View -> Controller -> Data Model)

clipboard.png

Or (Controller -> Data Model -> View)

clipboard.png

MVVM: model view viewmodel (bridge between views and data: event bindings, data binding)

clipboard.png
clipboard.png

4.Vue three elements

  • Responsive: After modifying the data property, Vue immediately monitored
  • Responsive Core: with Object.defineProperty, the attribute data to the agent vm
  • Template engine:

    • Essence: String; logical, v-if, v-for the like, may be embedded variables JS, JS must be implemented in order to convert into html page is rendered, converted into the final template JS function (the render functions: with Method)
  • Render

5.Vue process

  • Resolve to render a template function:

    • with use of the template render function all information is contained
    • Template used in the attribute data, have become JS variable template v-model v-for v-on logic have become JS, the function returns the render vnode
  • Responsive start listening:

    • The data attributes Object.defineProperty agent to the VM, get used to prevent repeated listening to render
  • For the first time rendering, display the page and binding dependencies
  • Attribute change data, triggering render

6.react

  • Component of: component package, reused components
  • Component package: Package View, data change logic (data driver view change)
  • Component reuse: props transmitted, a multiplexing
  • JSX nature: JSX is syntactic sugar, need to be resolved to JS to run, JSX is independent of the standard, can be used by other projects
  • JSX is a template, ultimately rendered as html
  • The reason you need vdom: JSX be rendered as html, data-driven view

7.setState process

setState asynchronous:

(原因):可能一次执行多次setState,无法规定、限制用户如何使用setState,没必要每次setState都重新渲染,考虑性能,即便每次重新渲染,用户看不到中间渲染的效果,所以只要最后的效果就可

8.Vue and react

  • The difference is essential: the difference between templates and components of

    • Vue is essentially MVVM framework, developed by MVC comes;
    • React is a front-end component of the frame, from the development of a back-end component;
  • Vue using a template
  • React use JSX
  • React itself is componentized
  • Vue is on an extended MVVM
  • Common:

    • Support component-based, data-driven view all

Guess you like

Origin www.cnblogs.com/JKHao/p/12033239.html