谈谈IONIC版本中加入的React开发方式
IONIC介绍
发现国内前端圈里面，现在知道IONIC的人已经很少了，但毕竟这东西也是一门不错的移动端开发技术，感觉可能大多数人对于新技术的追求和尝试，让这个技术看起来地位略微尴尬。
但是，毫无疑问，这门技术，在全球还是相对比较流行的。
IONIC是什么？如果在利用前端技术做手机app的起步阶段，大家大概会听到phonegap、Xamarin。
其中Xamarin是基于C#的一套移动开发框架，当然，现如今团队已经被微软收购，生命力看起来也并不算多顽强，喜欢C#的人可能会用到，但前端同事估计很难去接触。
而phonegap则是最初始的前端技术做手机App的开发框架，当时社区内部也有不少前端在讨论这个技术，以至于后来催生了国内前端移动化的一个趋势。
例如Dcloud、APICloud、AppCan这些国内的前端做移动App的框架，其中Dcloud和APICloud曾经还因为源码事件撕逼过一段时间，这一切都是因为phonegap这样技术催生了国内开发者的视野。
后来phonegap优化成了一部分，发展成了Cordova这门技术。
在RN还未出现的时刻，Cordova可谓是如日中天，当时我曾经也做过几个Cordova项目，在商业趋于移动化的年代，Cordova技术每个移动前端必会的技术。
而当时比较火热的技术angularjs，当时还是1.0脏检查阶段，于是结合Cordova、angularjs发展出来的移动端开发UI框架IONIC应运而生。
IONIC在angularjs在国内前端市场占据百分之九十以上市场的时候曾经也算火热一时，国内涌现了许多利用该技术制作的App。
但，angularjs后来被新兴的单向数据流技术React抢占了大量的市场，以至于市场份额落后到了百分之十左右程度，导致IONIC也受到了发展局限，性能问题频出。
更别说后来React Native的出现，利用JS写原生组件这个概念当时甚嚣尘上，我当时的公司也有将App专项RN开发的想法。
虽然后来Angular更新换代，有了2.0、4和Angular5，性能得到了很大的提升，避免了过量脏检查机制，但好似错过了黄金年代，市场份额则是不愠不火。
IONIC从2018年开始集成React技术，并且在2019年可以投入使用，中间一直是Angular和TS在支撑着平台前进。
但说到底，IONIC只是开发浏览器应用，而不是真正的原生应用，和React Native有很大的区别的。
不过，最近随着大家手机性能的提升，其实原生应用和浏览器应用，在性能上几乎是看不出差异，但如今国内前端圈很多人只知道React Native、Flutter而不知IONIC，实在是有些尴尬。
最近我也重新捡起这门技术，看看这个React应用到底在IONIC上做了哪些事情。
React + TypeScript
IONIC的React引入，同样和Angular一样，都是利用TypeScript做类型检查。并且直接引入的React的高级版本，现如今支持FC和Hooks特性。
下面来一段生成的应用中的代码：
const App: React.FunctionComponent = () => (
<IonApp>
<IonReactRouter>
<IonPage id="main">
<IonTabs>
<IonRouterOutlet>
<Route path="/:tab(books)" component={Books}/>
<Route path="/:tab(home)" component={Home} exact={true} />
<Route path="/:tab(books)/details" component={Details} />
<Route path="/:tab(cate)" component={Categaray} />
<Route exact path="/" render={() => <Redirect to="/home" />} />
</IonRouterOutlet>
<IonTabBar slot="bottom">
<IonTabButton tab="schedule" href="/books">
<IonIcon icon={book} />
<IonLabel>书架</IonLabel>
</IonTabButton>
<IonTabButton tab="speakers" href="/home">
<IonIcon icon={apps} />
<IonLabel>书城</IonLabel>
</IonTabButton>
<IonTabButton tab="map" href="/cate">
<IonIcon icon={send} />
<IonLabel>分类</IonLabel>
</IonTabButton>
</IonTabBar>
</IonTabs>
</IonPage>
</IonReactRouter>
</IonApp>
);组件化
IONIC是个UI框架，已经把组建平台分装成了React组件，可以直接引用就可。
import { RouteComponentProps } from 'react-router';
import { IonItem, IonLabel, IonList, IonThumbnail, IonContent } from '@ionic/react';不过，我尝试写了一个组件，引入发生报错信息：
Type '{}' is missing the following properties from type 'Readonly<RouteComponentProps<{}, StaticContext, any>>': history, location, matchts(2739)
可见，在IONIC下写一些组件，似乎是失去了自由，感觉略微有些尴尬，这个组件化似乎是不彻底？
不过，在项目中可以直接用div去写当前组件，但这样似乎是不能共用？
稍等，这是TypeScript的校验，于是我们需要做一些修改：
import { Header } from '../../components'
interface props {
Header?: PureComponent
}
class Home extends React.PureComponent<props, {}> {}Header组件经过改造终于可以用了，那么，我们就可以通过写Web的方式，来开发移动端的应用了。
工程化
1、Icon
对一个对应用有想法的人，ionicons满足不了项目需求，于是，这个时候可以选择引入iconfont或者font asome
因为我并不是美工，也没人上传到iconfont一些图标，于是我选择引入fontasome：
直接在public/index.html以CDN的方式引入：
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">项目中直接用：
<i className="fa fa-home fa-fw"></i>
<i className="fa fa-book fa-fw"></i>2、Request
利用fetch添加通用请求方式（其实也可以用别的）：
import _ from 'lodash'
interface HttpProps {
url: string,
method: string,
body: object
}
export default function httpRequest(httpProps: HttpProps) {
const init = {
method: httpProps.method,
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
'Accept-language': 'zh-CN',
},
body: ''
}
if (httpProps.method !== 'GET') {
init.body = JSON.stringify(httpProps.body);
}
return fetch(httpProps.url, init).then(checkStatus, (err) => console.warn('===>request checkStatus error', err)).then(
(val) => {
const result = val.json();
console.log(
`%c fetch end: ${httpProps.url}`,
'color: green;font-size: 14px;font-weight:bold;',
result,
);
return result;
},
(err) => {
console.warn('===>parse json error', err);
},
).catch((err) => {
console.error('###ERROR###', err);
});
}
function checkStatus(response: any) {
const status = _.get(response, 'status');
if (status >= 200 && status < 300) {
return response;
}
throw new Error('status wrong');
}
请求文件可以直接用这个写好的封装：
// import _ from 'lodash';
import { config, httpRequest } from '../utils';
interface ReturnProps{
result: object,
}
interface RequestBody {
url: string
}
export default class HttpService<ReturnProps, RequestBody> {
getHomePages = async (requestBody: RequestBody) => {
const url = config.baseUrl;
const result = await httpRequest({url, method: 'GET', body: {}})
console.log('result==============>', result)
return result
}
}这个时候，是不是想要引入Redux？
3、Redux
在引入Redux主要是通过saga这种方式，这时候基本上要添加的是sagas、reducer、actions。
首先添加Actions：
export const FAIL_GETHOME = 'FAIL_GETHOME'
export const SUCCESS_GETHOME = 'SUCCESS_GETHOME'
export const GET_HOMEDATA = 'GET_HOMEDATA'添加Reducers：
// import _ from 'lodash';
import { FAIL_GETHOME, SUCCESS_GETHOME, GET_HOMEDATA } from '../actions/home';
const initState = {
loading: false
}
export default function homeReducer(state = initState, action: any) {
if (action.type === GET_HOMEDATA) {
return {
...state,
loading: true,
};
} else if (action.type === SUCCESS_GETHOME) {
return {
...state,
loading: false,
};
} else if (action.type === FAIL_GETHOME) {
return {
...state,
loading: false,
};
}
return state;
}添加sagas处理请求：
import _ from 'lodash';
import { call, put, takeEvery } from 'redux-saga/effects';
import { FAIL_GETHOME, SUCCESS_GETHOME, GET_HOMEDATA } from '../actions/home';
import HttpService from '../services/http-service';
function* getHomeData(action: any) {
const key = _.get(action, 'key');
const httpSerice = new HttpService()
try {
const data = yield call(httpSerice.getHomePages, action.payload);
if (!data) {
yield put({ type: FAIL_GETHOME, status: 2, key });
} else {
yield put({ type: SUCCESS_GETHOME, status: 0, payload: data, key });
}
} catch (e) {
yield put({ type: FAIL_GETHOME, status: 1, key });
}
}
export function* watchGetHomeData() {
yield takeEvery(GET_HOMEDATA, getHomeData)
}到这里一个基本的Redux流程添加完毕。接下来可以在项目中触发Actions，来进行数据请求了。
IONIC和RN
最后谈谈IONIC这门技术和React Native的区别。
两者都是基于某种技术的一种UI开发App方式，IONIC的组件相对比较完善，RN的组件则是比较简单。
开发方式来说，IONIC则是浏览器开发方式，相当于是开发的是一个webapp，但是RN开发出来的是原生应用。这是两者主要的技术区别。
上手来说，毫无疑问，IONIC的开发上手起来更快，其实是IONIC的开发就是普通的web+UI框架开发，而RN则还有些前置理解成本。
总的来说，现如今性能方面渐渐被日渐性能提升的手机抹平，其实在这个时候，回过头再看IONIC，也是一种不错的选择，不是吗？