像学习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