像学习vue 同样学习 react

一直据说 vue 借鉴了其余两大框架的优势，真实状况我并不了解，由于我只会 vue，才入坑 react。多是语言都是想通的， react 没有我想象中那么高攀不起。

vue 中全部文件后缀名是 .vue, react 的文件直接是 js ，他们的引入方式同样，react 使用 JSX 语法，vue 和咱们写原生的 html 更像,把 css JS HTML 放在一个组件里面，而 react 是写 js 同样书写组件 放两张对比图，是我在学 react 时候的笔记

在 vue 中，全部的数据定义在 data()，全部的this 指向 vue 构造函数（箭头函数除外），没有 this 绑定的问题，html 代码写在<template> 元素当中，js 写在 <script>，css 写在 <style>，全部的方法函数写在了 methods 里面。在html 元素当中，引用 class 类名，能够直接写 class，父子组件传值的方式相似，均可以有数据类型验证，都是单项数据传递传递方式也是同样的，子组件触发父组件的方式有一点点区别，vue 经过on 和 emit ，react 直接经过 this.props ; react 绑定事件用相似原生的写法，只是首字母大写(onClick) ,vue 用 @click .....

生命周期

vue 有他的生命周期，在每一个时期都有相对应的钩子函数，这样咱们就能够在相对而言更加适合的时机作适合的事。

在工做中用的最多的是 mounted 渲染数据，beforeDestroy 在销毁组件的时候释放一些定时器或者其余资源会用到。其余的好像用的相对而言比较少。

react 也有他的生命周期函数，每个版本钩子函数有一点点小小小的区别，可是咱们经常使用的那些个钩子函数一直存在

咱们经过 console.log 日志来看看，这些钩子函数在何时执行

在 console.log 日志中咱们大概能够明白，生命周期能够分红三大块，初次渲染，组件更新，组件销毁。 为何组件销毁还要执行呢？由于要资源释放。做为一个合格的前端，是不容许控制台有任何警告性的提示出现的。若是组件占用的资源在组件销毁的时候没有释放会怎么样？

避免这样的警告一句话就解决了，控制台干干净净，代码整整齐齐，心情美美哒

案例DOM

仔细看 案例DOM ，你会发现里面有一个怪异的语法，或许你会问我这是什么东西？

handleChange=()=>{
    this.setState((preState)=>({
      count:preState.count+1
    }))
  }
复制代码

这是 ES7 语法，官方文档中有说哟

react 生命周期函数里面最重要的是 render() 这个钩子函数（全部的生命周期均可以不存在，除了 render 函数除外，由于react.Component 函数默认内置了其余函数，可是没有内置 render 函数），咱们元素的书写，组件的使用，都是在那个里面进行。全部的方法就直接和生命周期在同一层级（好像和小程序的生命周期函数和方法结构是同样的）

经过和 vue 的生命周期函数一对比，发现好像是差很少的。只是在写法上不同而已。在咱们的项目中，数据的获取都是接口请求获取异步数据的，那么咱们在哪个生命周期函数里面去写更好一点呢？？我推荐 componentDidMount() 。若是你想组件从加载到成功渲染是如何一步一步执行的，咱们能够在每个钩子函数里面打一个断点，这样清晰可见。console.log 日志咱们只能够看到钩子函数执行的前后

ref

若是你写过 vue 应该用过 ref 这个东西。在 react 中 ref 含义是同样的，只是语法写的不同。ref 是什么？个人理解是一个引用，一个别名，一个ID，用来获取数据，操做方法。他让父组件的兄弟组件中去调用子组件的方法。在个人工做中用的仍是比较多的。

案例DOME

那么在 react中 ref 的又是如何使用的呢？

说白了就是在组件上面加上一句话 ref={val=>this.name = val} 里面的 this.name 是我本身定义的，name 能够换成其余的名字。this.name 就牵引着这个组件，里面的数据方法属性，咱们均可以获取到案例DOME

插槽

我首先接触的是 vue ，在学习 react 的时候我总在想，vue 里面有的东西，react 里面有没有呢？文档证实是真的有。

在 vue 中写基础组件的时候，插槽这东西用的比较多。在写基础组件的时候总会考虑到，有那么一两个特别，须要特殊处理，而大部分的时候是不须要处理的，这时候咱们就须要在基础组件里面预留一个位置，这样就不要再从新写一段差很少的代码了。在 react 中也存在这东西，用法都差很少。

写插槽类的时候咱们首先要引入 createPartal 这个组件，这个组件接受两个参数，第一个是要渲染的子元素(包括共有的和占位元素 this.props.children)，第二个是要挂载的元素。 案例DOME

直接用一个无名的 <slot></slot> 元素进行占位，具体是什么根据需求场景而定。若是没有占位元素，浏览器会报错。案例DOME

当咱们页面须要用到一些基础组件或者说是公共组件的时候，咱们能够考虑用插槽来处理某些特殊状况，而不是再写一次重复的代码

若是学过这两个框架的就会发现，其实他们的数据流，组件化，生命周期，状态更新都是差很少的，只是语法不同而已；vue 框架帮咱们作了大部分的事情 api 多，react 框架更多的事情都是咱们本身动手去作，去写。多是由于工做是写 vue 的，或者是 react 的初学者，我的认为 vue 写起来更加简单方法，毕竟那是在本身熟悉的领域，哈哈。好像会慢慢的喜欢上 react