写给vue转react的同志们（3）

饼干_

发布于 2022-09-19 15:11:35

4230

发布于 2022-09-19 15:11:35

文章被收录于专栏：饼干的前端专栏

本系列文章将由浅慢慢深入，一步步带你领略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后的版本被废弃了。