阅读 1253

写给vue转react的同志们(3)

本系列文章将由浅慢慢深入,一步步带你领略react和vue的同工异曲之处,让你左手react,右手vue无忧。

前提要顾:

写给vue转react的同志们(1)

写给vue转react的同志们(2)

我们都知道vue上手比较容易是因为他的三标签写法以及对指令的封装,他更像一个做好的包子你直接吃。

相比react他的纯js写法,相对来说自由度更高,这也意味着很多东西你需要自己手动封装,所以对新手没那么友好,所以他更像面粉,但可以制作更多花样的食物。

今天的主题

  • react 计算属性
  • react ref

react 计算属性

我们知道vue中有提供computed让我们来实现计算属性,只要依赖改变就会发生变化,那么react中是没有提供的,这里我们需要自己手动实现计算属性。简单举例一下:

vue 计算属性

<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>
复制代码

react 计算属性(类写法)

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>
        )
    }
    
}
复制代码

可以看到react中我们手动定义了get来让他获取msg的值,从而实现了计算属性,实际上vue中的computed也是基于get和set实现的,get中收集依赖,在set中派发更新。

react ref

vue中的ref使用起来也是非常简单在对应组件上标记即可获取组件的引用,那么react中呢? react中当然也可以像vue一样使用,但官方并不推荐字符串的形式来使用ref,并且在react16.x后的版本移除了。

看一段大佬描述:

  • 它要求 React 跟踪当前呈现的组件(因为它无法猜测this)。这让 React 变慢了一点。
  • 它不像大多数人所期望的那样使用“渲染回调”模式(例如<DataGrid renderRow={this.renderRow} />),因为 ref 会因为DataGrid上述原因而被放置。
  • 它不是可组合的,即如果一个库在传递的子组件上放置了一个引用,用户不能在它上面放置另一个引用。回调引用是完全可组合的。

举例:

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>
复制代码

react ref

class App extends React.Component {
    myRef = React.createRef()
    constructor(props) {
        super(props)
    }
    render() {
        return (
            <div>
                // 正常使用
                <Input ref='input' />
                // 回调使用(可组合)
                <Input ref={input => this['input-' + index]} />
                // 调用api(react16.x)
                <Input ref={myRef}/>
            </div>
        )
    }
    
}
复制代码

vue中的ref我们不必多言,看看react的,官方更推荐第三种用法(react16.x),第二种用法在更新过程中会被执行两次,通过在外部定义箭头函数使用即可,但是大多情况都是无关紧要。第一种用法在react16.x后的版本被废弃了。

总结

都到这篇了,相信你转型react上手业务基本没问题了,后续将慢慢深入两大框架的对比,重点叙述react,vue辅之。

我是饼干,让我们一起成长。最后别忘记点赞关注收藏三连击🌟

文章分类
前端
文章标签