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

8,146

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

前提要顾:

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

今天的主题:

  • react中想实现类似vue中的插槽
  • 单向数据流与双向绑定
  • css污染处理

react中想实现类似vue中的插槽

首先,我个人感觉jsx的写法比模板写法要灵活些,虽然没有像vue那样有指令,这就是为啥vue会上手简单点,因为他就像教科书一样教你怎么使用,而react纯靠你手写表达式来实现。

如果你想实现类似插槽的功能,其实大部分UI框架也可以是你自己定义的组件,例如ant desgin的组件,他的某些属性是可以传jsx来实现类似插槽的功能的,比如:

import React from 'react'
import { Popover } from 'antd'

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      content: (
        <div>
          <p>你好,这里是react插槽</p>
        </div>
      )
    }
  }
  render() {
      const { content } = this.state
      return (
          <Popover content={content}>
            <div>
              悬浮
            </div>
          </Popover>
      )
  }
}

上面这样就可以实现类似插槽的功能,这点上确实是比vue灵活些,不需要在结构里在加入特定的插槽占位。 如果是vue的话就可能是这样:

<template>
    <Popover>
        <div slot='content'>
            你好,这里是vue插槽
        </div>
        <div>悬浮</div>
    </Popover>
</template>

大家可以自己写写demo去体会一下。

单向数据流与双向绑定

我们知道vue中通过发布订阅模式实现了响应式,把inputchange封装成v-model实现双向绑定,react则没有,需要你自己通过this.setState去实现,这点上我还是比较喜欢v-model能省不少事。

虽说单向数据流更清晰,但实际大部分人在开发中出现bug依旧要逐个去寻找某个属性值在哪些地方使用过,尤其是当表单项很多且校验多的时候,代码会比vue多不少,所以大家自行衡量,挑取合适自己或团队的技术栈才是最关键的,不要盲目追求所谓的新技术。

举个例子(简写):

react

import React from 'react'
import { Form, Input, Button } from 'antd'

const FormItem = Form.Item

class App extends React.Component { 
  constructor(props) {
    super(props)
  }
  
  onChange(key, e) {
      this.setState({
          [key] : e
      })
  }
  
  onClick = () => {
      console.log('拿到了:',this.state.username)
  }
   
  render() {
      return (
        <Form>
            <FormItem label="username" name="username">
                   <Input onChange={this.onChange.bind(this, 'username')}/>
            </FormItem>
            <Button onClick={this.onClick}/>
        </Form>
      )
  }
}


vue(简写)

<template>
    <div>
        <Form>
            <Form-item label="username" name="username">
                <Input v-model='username'/>
            </Form-item>
        </Form>
        <Button @click='click'/>
    </div>
</template>
<script>
export default {
    data() {
        return {
            username: ''
        }
    }
    methods: {
        click() {
          console.log('拿到了:',this.username)
        }
    }
}
</script>

其实乍一看也差不了多少,vue这种options的写法其实会比较清晰一点,react则需要你自己去划分功能区域。

css污染

vue中可以使用scoped来防止样式污染,react没有,需要用到.module.css,原理都是一样的,通过给类名添加一个唯一hash值来标识。

举个例子:

react(简写):

xxx.module.css

.xxx {
  background-color: red;
}

xxx.css

.xxx {
  background-color: blue;
}

xxx.jsx
import React from 'react'
import style form './xxx.module.css'
import './xxx.css'
class App extends React.Component { 
    render(){
        return (
            <div>
                <div className='xxx'>
                    blue
                </div>
                <div className={style.xxx}>
                    red
                </div>
            </div>
        )
    }
}

vue

xxx.css
.xxx {
  background-color: red;
}

xxx.vue
<template>
    <div>
        <div class='xxx' @click='click'>
            red
        </div>
    </div>
</template>
export default {
    methods: {
        click() {
          this.$router.push('yyy')
        }
    }
}
</script>
<style scoped>
.xxx{
  background-color: red;
}
</style>

yyy.vue
<template>
    <div>
        <div class='xxx' @click='click'>
            blue
        </div>
    </div>
</template>
export default {
    methods: {
        click() {
          this.$router.push('xxx')
        }
    }
}
</script>
<style scoped>
.xxx{
  background-color: blue;
}
</style>

上面只是简单举个例子,页面之间的样式污染主要是因为css默认是全局生效的,所以无论scoped也好或是module.css也好,都会解析成ast语法树,通过添加hash值生成唯一样式。

总结

无论vue也好,react也好不变的都是js,把js基础打牢才是硬道理。