vue2转战React Hooks实践

从vue2转战到react16.12, 还是有好多差异的。总结起来：

开发思路上：

1. vue是基于data的双向绑定，数据流在model(data)<=>view(template)中是双向流动关系。所以修改data, 绑定该data的视图会随之修改；修改view，data中的数据也会随之修改（当然，这种情况只针对于可输入类型的表单元素），然后再配合钩子函数created、mount、activated、deactivated、beforeDestroy（还有vue-router提供的beforeRouteLeave等）等在某个时刻自动触发一些业务逻辑。

2. react（16.8版本后，官方推荐react hooks开发方式）则是单向数据流动，通过useState声明变量，视图绑定state。类似钩子函数的工作，react使用useEffect来实现，通过不同的依赖项，实现不同的钩子函数作用。react开发上，就像堆积木，开发的所有东西都是组件，所以组件化更彻底；vue则是以page划分的，然后组件是引入到page中的。

代码组织结构上：

1. vue是以.vue为模块组织代码的，一个.vue模块中包含template、script、style来分别实现视图、业务逻辑、样式的编写。

2. react是以.jsx为模块组织代码的，一个.jsx模块中template都是嵌入在script中的，style另外引入，更像是所有代码都是在函数中实现的。

import React, { useState, useEffect, useCallback } from 'react';
import style from './index.less';
import CardTest from '../components/CardTest/index';
import { getInfo } from '../../../api/api';

const CardTest = () => {
 const [info, setInfo] = useState({});

 useEffect(() => {
   requestData();
 }, []);

 // 请求数据
 const requestData = () => {
   const requestParm = "XXX";
   getInfo(requestParm)
     .then(res => {
       const { data = {} } = res;
       setInfo(data);
     })
     .catch(err => {});
 };

 return (
   <div className={style.wrap}>
     <div className="list">
       <CardTest  data={info} />
     </div>
   </div>
 );
};
export default CardTest;