下一篇

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: (

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

大家可以自己写写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 (







      )

  }

}

vue（简写）

其实乍一看也差不了多少，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 (

vue

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

}

xxx.vue

export default {
methods: {
click() {

          this.$router.push('yyy')

        }

    }

}



yyy.vue

export default {
methods: {
click() {

          this.$router.push('xxx')

        }

    }

}

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

总结

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