React with your left hand and Vue with your right.

Premises to consider:

Vue react (1)

Vue react (2)

We all know that Vue is easier to get started with because of its three-label writing and encapsulation of commands, and it’s more like a ready-made bun you eat straight away.

React has more freedom than react’s pure JS method, which means you have to manually encapsulate a lot of things yourself, so it’s less friendly to beginners, so it’s more like flour, but can make more fancy food.

Today’s topic

• React Evaluate properties
• react ref

React Evaluate properties

We know that VUE provides computed properties that change depending on changes, but react doesn’t provide that, so we need to manually implement computed properties. Here’s a quick example:

Vue evaluates attributes

<template>
    <div>{{ vue_computed }}</div>
</template>

<script>
export default {
    data() {
        msg: 'hello vue'
    },
    computed: {
        vue_computed() {
            return this.msg
        }
    },
    mounted() {
        setTimeout(() = > {
            this.msg = 'hello vue change'
        }, 2000)}}</script>
Copy the code

React evaluate properties

class App extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            msg: 'hello react'}}get react_computed() {
        return this.state.msg
    }
    componentDidMount() {
        setTimeout(() = > {
            this.setState({
                msg: 'hello react change'})},2000)}render() {
        return (
            <div>
                { this.react_computed }
            </div>)}}Copy the code

It can be seen that in React, we manually defined get to obtain the value of MSG, thus achieving the calculated attributes. In fact, computed in VUE is also implemented based on GET and SET. Dependencies are collected in GET and updates are distributed in SET.

react ref

Ref in Vue is also very easy to use to tag a component to get a reference to it. React? React can of course be used like vue, but using ref as a string is not officially recommended and was removed in later versions of React16.x.

Look at the description of the boss:

• It requires React to keep track of the currently rendered component (because it can’t guess this). This slows React down a bit.
• It doesn’t use the “render callback” mode that most people expect (e.g<DataGrid renderRow={this.renderRow} />), because ref will be placed for DataGrid reasons above.
• It is not composable, meaning that if a library places a reference on a passed child component, the user cannot place another reference on it. Callback references are fully composable.

For example:

vue ref

<template>
    <div>
        <el-input v-model='value' ref='input'/>
    </div>
</template>

<script>
export default {
    data() {
        value: ' '
    },
    mounted() {
        console.log(this.$refs.input)
    }
}
</script>
Copy the code

react ref

class App extends React.Component {
    myRef = React.createRef()
    constructor(props) {
        super(props)
    }
    render() {
        return (
            <div>// Normal use<Input ref='input' />// Callback usage (combinable)<Input ref={input= >This ['input-' + index]} /> // Call API (react16.x)<Input ref={myRef}/>
            </div>)}}Copy the code

React16.x). The second use is executed twice during the update process. This is done by defining the arrow function externally, but in most cases it doesn’t matter. The first usage has been deprecated in versions after React16.x.

conclusion

By now, I believe that you have basically no problem with the react business. In the follow-up, I will slowly go into the comparison between the two frameworks, focusing on React and VUE.

I am cookie, let’s grow together. Finally, don’t forget to click on the triple click of concern collection 🌟