And I have not met the base (yet) joonjack published an article like this, address: Nuggets although I do not have as much personal experience as joonjack, but otherwise I will also mention my opinion between the two
Vue and React
As the most popular front end of the two frameworks, there must be differences between the two, or the two sword match well (in fact, I also want to, after all, there are too many things to learn), and the difference is nothing more than reflected in the two frameworks for their own definition.
vue
Vue’s official website has several lines of big words, progressive framework, flexible, easy to use, efficient, so in Vue developers only need to pay attention to your attempt, through getter, setter, do not have to deliberately to optimize can achieve good results, and a set of official maintenance of the ecosystem.
react
React is the same as Facebook’s own son. Although this own son is maintained by the community and its ecology is also maintained by the community, it is difficult to replace his position. React allows you to see everything as a component, and the entire page is made up of components.
As Junking said, VUE recommends developing H5 and small systems, while react is suitable for large projects. In fact, this is not true. In fact, as far as the development framework of a project is concerned, the maintenance difficulty of the project in the later stage is not big, and the problem of the project’s iteration completely depends on whether the developers of the project are willing to write 🐶 to protect their lives. Although React is indeed better than VUE in terms of code granularity, But the underlying principles of both frameworks are pretty much the same. So I chose to have them all. After all, it makes sense to exist 🐶🐶🐶.
Ii. Core Concepts
I’m not going to talk about the core concept but go see the Nuggets of Jama
Component definition
1, the vue
Personal vUE is usually written using JSX, so there is not much difference between the twoCopy the code//jsx
/ / the parent component
const SonComponent = {
name: 'SomComponent'.inject: ['fatherDescription'].props: {
fatherProp: {
type: String.default: ' '}},data() {
return {
description: 'i am son'}},methods: {
buttonClick() {
const {description} = this;
this.$emit('sonClick', description)
}
},
render() {
const {description, buttonClick} = this;
const {fatherProp} = this.$props;
const {default: slots} = this.$slots;
const {default: defaultSlot, mySlotName} = this.$scopedSlots;
console.log(this.fatherDescription);
return (
<div>
{description}
{slots}
{defaultSlot()}
{mySlotName()}
{fatherProp}
<button onClick={buttonClick}>The child component passes information to the parent component</button>
</div>)}};const ParentComponent = {
name: 'ParentComponent'.components: {
SonComponent,
},
data() {
return {
description: 'i am father'}},// Multilevel component nesting can provide/inject grandfather-level information
provide() {
return {
fatherDescription: this.description
}
},
render() {
const {description} = this;
return (
<div>
{description}
<son-component// Default slot and named slotscopedSlots={{
default:() = > {
return (
<div>This is also the default slot</div>
)
},
mySlotName: () => {
return (
<div>This is the named slot</div>) } }} fatherProp={description} onsonClick={(description) => { console.log(description); }} > {/* Default slot */}<div>This is a slot</div>
</son-component>
</div>)}};// Functional components
const SonComponent_1 = () = > {
return(
<div>Functional component</div>)}//template
/ / the parent component
<template>
<div>
{{description}}
<son :fatherDescription="description" @sonClick="sonClick">
<div>I'm the default slot</div>
<div slot="mySlot">I'm named slot</div>
</son>
</div>
</template>
import Son from 'Son.vue';
export default {
name: "Father".components: {
/ / child component
Son,
/ / or
SonComponent: {
name: 'SonComponent'.data() {
return {
description: 'i am son',}},render() {
const {description} = this;
return (
<div>
{description}
</div>)}}},data() {
return {
description: 'i am father',}},methods: {
sonClick(description) {
console.log(description); }}}// Son
<template>
<div>
{{description}}
<button @click="buttonClick">Child component passes to parent component</button>
{{fatherDescription}}
<slot/>
<slot name="mySlot"/>
</div>
</template>
export default {
name: "Son".props: {
fatherDescription: {
type: String.default: ' '}},data() {
return {
description: 'i am son'}},methods: {
buttonClick() {
const {description} = this;
this.$emit('sonClick', description); }}}Copy the codeFor details about vUE functional components, see Functional components
2, the react
// calss
import React from 'react';
import {Button} from 'antd';
class SonComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
description: 'i am son'
};
}
clickButton() {
console.log('Click event');
}
render() {
const {description} = this.state;
const {fatherClick} = this.props;
const {clickButton} = this;
return (
<div>
{description}
<Button onClick={clickButton}>Click on the I</Button>
<Button onClick={()= >FatherClick (' click event ')}> Click me</Button>
</div>)}}class FatherComponent extends React.Component {
constructor() {
super(a);this.state = {
description: 'i am Father'
};
}
fatherClick(string) {
console.log(string);
}
render() {
const {description} = this.state;
const {fatherClick} = this;
return(
<div>
{description}
<SonComponent fatherClick={fatherClick}/>
</div>)}}//FunctionComponent
import React, {useState, createContext, useContext} from 'react';
import {Button} from 'antd';
constParentContext: React.Context<{ fatherClick? :(dispath: React.Dispatch<React.SetStateAction<string>>) = > void;
}> = createContext({})
/ / React. FunctionComponent < props type > = React. FC.
const SonComponent: React.FunctionComponent<{
// The child component accepts the parent component argument
fatherClick: (diapatch: React.Dispatch<React.SetStateAction<string>>) = > void;
children: React.ReactNode
}> = ({
// fatherClick
children
}) = > {
const [description, changeDescription] = useState<string>('i am son');
const {fatherClick} = useContext(ParentContext);
const clickButton = () = > {
// Parent communication via props
// fatherClick(changeDescription);
// Parent level communication through context
fatherClick&&fatherClick(changeDescription);
// changeDescription(' Click event ');
};
return (
<div>
<ParentContext.Consumer>
{
({
fatherClick
}) => (
<>
{description}
<Button onClick={()= >FatherClick &&fatherClick(changeDescription)}> Click event</Button>
<Button onClick={clickButton}>Click on the event</Button>
{children}
</>)}</ParentContext.Consumer>
</div>
)
};
const FatherComponent: React.FC<{}> = () = > {
const [description] = useState<string>('i am father');
const fatherClick = (dispatch: React.Dispatch<React.SetStateAction<string>>) = > {
// Change the description in the child component
dispatch('Click event');
}
return (
<div>
<ParentContext.Provider
value={
{
fatherClick}} >
{description}
<SonComponent fatherClick={fatherClick}>
<div>I am a slot</div>
</SonComponent>
</ParentContext.Provider>
</div>)};Copy the code4. Component communication
vue
1.props/$emit;
2.provide/inject;
3.vuex;
4.localstorage;
5.event bus
react
1.props
2.redux
3.context
4. The event bus (library);
Except vuex, REdux, localstorage and Event Bus, I have basically written all of them once
5. My general feeling
-
Like Junke said, Vue is much more user-friendly, out-of-the-box and flexible in configuring Webpack, unlike React, which requires eject to throw configuration files out of the way and is still irreversible. Although there are some plugins that can refactor WebPack, vue adds a vue.config.js directly to vue.
-
React + TS, react+ TS, emM, vue+ TS, emM, vue+ TS, emM, vue+ TS, emM, vue+ TS, emM, vue+ TS, emM It also introduced a Composition API that will support TS better. I haven’t used 🐶 yet, but I’m looking forward to vue3 (especially 🐂🍺);
6. Resource sharing
Jun rob directly to his nuggets inside the address to find it, I can not find 🐶🐶🐶 anyway.