写给vue转react的同志们（3）
我们都知道vue上手比较容易是因为他的三标签写法以及对指令的封装，他更像一个做好的包子你直接吃。
相比react他的纯js写法，相对来说自由度更高，这也意味着很多东西你需要自己手动封装，所以对新手没那么友好，所以他更像面粉，但可以制作更多花样的食物。
今天的主题
react 计算属性
react ref
react 计算属性
我们知道vue中有提供computed让我们来实现计算属性，只要依赖改变就会发生变化，那么react中是没有提供的，这里我们需要自己手动实现计算属性。简单举例一下：
vue 计算属性
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 (
{ this.react_computed }
)
}
}
可以看到react中我们手动定义了get来让他获取msg的值，从而实现了计算属性，实际上vue中的computed也是基于get和set实现的，get中收集依赖，在set中派发更新。
react ref
vue中的ref使用起来也是非常简单在对应组件上标记即可获取组件的引用，那么react中呢？
react中当然也可以像vue一样使用，但官方并不推荐字符串的形式来使用ref，并且在react16.x后的版本移除了。
看一段大佬描述：
- 它要求 React 跟踪当前呈现的组件（因为它无法猜测this）。这让 React 变慢了一点。
- 它不像大多数人所期望的那样使用“渲染回调”模式（例如
），因为 ref 会因为DataGrid上述原因而被放置。 - 它不是可组合的，即如果一个库在传递的子组件上放置了一个引用，用户不能在它上面放置另一个引用。回调引用是完全可组合的。
举例：
vue ref
react ref
class App extends React.Component {
myRef = React.createRef()
constructor(props) {
super(props)
}
render() {
return (
// 正常使用
// 回调使用（可组合）
this['' + index]} />
// 调用api（react16.x）
)
}
}
vue中的ref我们不必多言，看看react的，官方更推荐第三种用法（react16.x），第二种用法在更新过程中会被执行两次，通过在外部定义箭头函数使用即可，但是大多情况都是无关紧要。第一种用法在react16.x后的版本被废弃了。
总结
都到这篇了，相信你转型react上手业务基本没问题了，后续将慢慢深入两大框架的对比，重点叙述react，vue辅之。
我是饼干，让我们一起成长。最后别忘记点赞关注收藏三连击🌟
作者：饼干_
链接：https://juejin.cn/post/6979061382415122462
