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

饼干_

发布于 2022-09-19 15:10:44

4710

发布于 2022-09-19 15:10:44

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

本系列文章将由浅慢慢深入，一步步带你领略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中通过发布订阅模式实现了响应式，把input和change封装成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值生成唯一样式。