Shulou(Shulou.com)06/02 Report--

This article mainly explains "what are the basic knowledge points from vue to react". The content in the article is simple and clear, and it is easy to learn and understand. below, please follow the editor's train of thought to study and learn what are the basic knowledge points from vue to react.

Because the new company uses react technology stack, including Umi, Dva, Ant-design and so on a series of solutions. After a little familiarity, I learned that although there are some differences, they are still quite different. Here's a brief comparison of two hot frameworks, react16&vue2 (in active Learning vue3), in terms of design, writing style, API, life cycle, and popular ecology:

Design

Reactvue description locates the js library progressive framework for building the user interface react focuses on library,vue focuses on framework rendering setState updates the value of state to achieve re-render view responsive data rendering, modified views corresponding to responsive data also render react need to consider when setState, when render;vue only need to consider modifying the data writing method jsxtemplatereact is functional, all in js Vue distinguishes tempalte, script and style, provides syntactic sugar, and communicates with vue-loader compiler components.

React: strict unidirectional data flow

Downward props

Up props func

Multilevel transitive context

Follow everything to props,onChange/setState ()

Vue: unidirectional data flow

Downward props down

Events up up (subscribe to a publication)

Multilevel pass $attrs, $listeners

There are also various kinds of get component instances (VueComponent), such as: $refs, $parent, $children; to obtain superior or subordinate components through recursion, such as findComponentUpward, findComponentsUpward; high-level components: provide/reject,dispatch/broadcast

Reactvue states that the sub-component data transfer propsprops is a declarative component state machine statedata to manage the state of the component, react uses setState to change, vue directly assigns values, and the new attribute uses $set;vue to use the function closure feature to ensure the independence of the component data. React is the function life cycle.

Reactvue describes the initialization constructorcreated of the data

The componentDidMountmounteddom node has been mounted to generate an updated componentDidUpdateupdatedreact: after the component has been updated, the react will only enter the componentDidmount after the first successful initialization, and then enter this life cycle after each re-rendering. Here, you can get prevProps and prevState, that is, props and state before the update. Vue: after the virtual DOM is re-rendered and updated due to data changes, it is called to uninstall the componentWillUnmountdestroyed destruction event processing.

React

React events are named in small hump (camelCase) rather than pure lowercase

When using JSX syntax, you need to pass in a function as an event handler instead of a string

You cannot block the default behavior by returning false. You must explicitly use preventDefault

Cannot uninstall non-Element tags, otherwise it will be passed on as props

Function Form () {function handleSubmit (e) {e.preventDefault (); console.log ('You clicked submit.');} return (Submit);}

Vue

When used on ordinary elements, you can only listen for native DOM events. When used on custom element components, you can also listen for custom events triggered by subcomponents

/ / Native event / / Custom event

Vue event modifier:

.stop-call event.stopPropagation ().

.client-call event.preventDefault ().

.capture-capture mode is used when adding event listeners.

.self-the callback is triggered only if the event is triggered from the listener-bound element itself.

.native-listens for native events of the component root element.

.once-only one callback is triggered.

.left-(2.2.0) triggers only when the left mouse button is clicked.

.right-(2.2.0) triggered only when the right mouse button is clicked.

.middle-(2.2.0) triggers only when the middle mouse button is clicked.

.passive-(2.3.0) add listeners in {passive: true} mode

Class and style

Class

React

Render () {let className = 'menu'; if (this.props.isActive) {className + =' menu-active';} return Menu}

Vue

Style

React

Vue

For component styles, you can declare a scoped on the style tag to isolate annotations as component styles, such as. Finally, when packing, the styles all add a unique value of hash to avoid css pollution between components.

Conditional rendering

React:jsx expression, & & or ternary expression; return false means no rendering

Vue: the expression returns true to be rendered, and can be nested with more than one VMESEMIFMAE VMAE else.

List rendering

React: with .map, the key of an element is preferably a unique string that the element has in the list.

{props.posts.map ((post) = > {post.title})}

Vue: to give Vue a hint so that it can track the identity of each node, thereby reusing and reordering existing elements, you need to provide a unique key attribute for each item

{{item.message}} component nesting

React

Default slot

{props.children}

Named slot

{props.left} {props.right}

Vue

Default slot

Named slot

Get DOM

React: manage focus, text selection or media playback. Triggers a forced animation. Integrate third-party DOM libraries

Class MyComponent extends React.Component {constructor (props) {super (props); this.myRef = React.createRef ();} render () {return;}}

Vue: used to register reference information with elements or subcomponents

Hellothis.$refs.p.offsetHeight document structure

Umi

├── config # umi configuration, including routing, build, etc. │ ├── config.ts # project configuration .umirc.ts higher priority To use this method, you need to delete .umirc.ts │ ├── routes.ts # routing configuration │ ├── defaultSettings.ts # system configuration │ └── proxy.ts # proxy configuration ├── mock # all js and ts files in this directory will be resolved to mock files ├── public # All files in this directory will be copy to the output path ├── src │ ├── assets # Local static Resources │ ├── components # Business Common components │ ├── e2e # Integration Test case │ ├── layouts # Global layout file │ ├── models for scheduled routing # Global dva model │ ├── pages # all routing components are stored here │ │ └── document.ejs # convention if this file exists Will be used as the default template │ ├── services # background interface service │ ├── utils # toollibrary │ ├── locales # internationalization resource │ ├── global.less # global style │ ├── global.ts # global JS │ └── app.ts # Runtime profile For example, ├── README.md └── package.json, such as route modification, render method modification, etc.

Vue_cli

├── mock # Project mock Simulation data ├── public # static Resources │ └── index.html # html template ├── src # Source Code │ ├── api # all requests │ ├── assets # static resources such as topic fonts │ ├── components # global common component │ ├── directive # global directive │ ├── filters # global filter │ ├── layout # global layout │ ├── router # routing │ ├── Store # Global store Management │ ├── utils # Global Common method │ ├── views # views all pages │ ├── App.vue # Portal Page │ └── main.js # Portal File load component initialization and other ├ ── tests # Test ├── vue.config.js # vue-cli configuration such as proxy Compressed picture └── package.json # package.json routing

Dynamic routing & routing parameters

React-router

History.push (/ list?id=$ {id})

History.push ({pathname:'/ list', query: {id}})

History.push (/ list/id=$ {id})

History.push ({pathname:'/ list', params: {id}})

Get props.match.query / props.match.params

Vue-router

This.$router.push ({path:'/ list', query: {id}})

This.$router.push ({path:'/ list', params: {id}})

Get this.$router.query / this.$router.params

Nested routing

-react

{path:'/', component:'@ / layouts/index', routes: [{path:'/ list', component: 'list'}, {path:' / admin', component: 'admin'},],} {props.children}

Render child routes using props.children

Vue-router

{path:'/ user/:id', component: User, children: [{path: 'profile', component: UserProfile}, {path:' posts', component: UserPosts}]}

Render child routes using vue native components / components

Route hopping

Umi

Profilehistory.push (`/ list?id=$ {id}`)

Vue

Aboutthis.$router.push ({path:'/ list', query: {id}}) routing gatekeeper (login authentication, special routing handling)

Umi

Vue-router

Global routing guard

Global Front Guard: router.beforeEach

Const router = new VueRouter ({...}) router.beforeEach ((to, from, next) = > {/ /...})

Global guard: router.beforeEach

Router.afterEach ((to, from) = > {/ /...}) status management

Multiple views depend on the same state or behaviors from different views need to change the same state; a state management machine is required.

Dvavuex specification module namespacemodules solves all the states of the application will be concentrated into a relatively large object, store objects may become quite bloated single state tree statestate unique data source submission state machine reducermutations for synchronous operations, the only place where state can be modified to handle asynchronous operations effectsaction calls to submit state machines to change state tree use

Dva: model connect UI

/ / new model:models/products.jsexport default {namespace: 'products', state: [], reducers: {' delete' (state, {payload: id}) {return state.filter (item = > item.id! = = id);},},}; / / connect modelexport default connect (({products}) = > ({products,}) (Products); / / dispatch model reducedispatch model reduce ({type: 'products/delete', payload: id,})

If there is an asynchronous operation, such as ajax request, dispath model effects, and then effects calls model reduce

Vuex

/ / new moduleconst store = new Vuex.Store ({state: {count: 1}, mutations: {increment (state) {state.count++}}, actions: {increment (context) {context.commit ('increment')}) / / bind UI//commit module mutation store.commit (' increment')

If there is an asynchronous operation, such as ajax request, dispath module actions, and then actions calls module mutations

Store.dispatch ({type: 'incrementAsync', amount: 10}) Thank you for your reading, these are the contents of "what are the entry knowledge points from vue to react". After the study of this article, I believe you have a deeper understanding of what the entry knowledge points from vue to react have, and the specific use still needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.