Некоторое время назад я делал небольшой проект, и времени было мало, всего один человек в месяц. Наконец, я надеюсь, что смогу запустить приложение через ссылку общедоступной учетной записи WeChat. Не буду много говорить о бизнес-деталях проекта, в основном хочу поделиться опытом в технических аспектах этого проекта.
Технический отбор
Есть примерно три эталонных диапазона: AngularJS, Angular, React.
Здесь может быть некоторая путаница, разве AngularJS и Angular не одно и то же?
Да, они вещь, но и не вещь. Что ж, без лишних слов, давайте сначала объясним разницу между AngularJS и Angular.
Цитата из официальной документации
Angular is the name for the Angular of today and tomorrow. AngularJS is the name for all v1.x versions of Angular.
который
Angular: относится к v2.x и более поздним версиям.
AngularJS: конкретно v1.x
Так как Angular был относительно обновлен с версии 2.0, чтобы отличить, нам остается придумать только такой трюк.
Ну и вернемся к теме, как выбрать эти три технологии?
Вот мои мысли в то время:
AngularJS: Поскольку в предыдущих двух проектах использовался AngularJS, его использование не является чем-то непривычным, и относительный буфер будет намного меньше (как упоминалось ранее, время относительно сжато, всего один месяц). Если у вас возникнут проблемы, вы также можете обсудить их со всеми. Но производительность и размер AngularJS являются проблемой, особенно при работе на мобильных телефонах.
Angular: Производительность не проблема, и размер в порядке. Но контакт относительно небольшой, и до этого я делал только один веб-проект.
React: Я просто изучал его некоторое время назад, производительность и объем не являются проблемой. Но, как и в случае с Angular, здесь нет реального проектного опыта, и если есть проблема, можно использовать только Baidu.
После некоторых компромиссов, описанных выше, я действительно хочу использовать React в своем сердце. Одна из причин в том, что после периода обучения я действительно хочу накопить некоторый опыт разработки React через проект. Другая причина в том, что React более продвинут как с точки зрения производительности (благодаря Virtual DOM), так и с точки зрения идеологии (компонентизация).
Основываясь на двух вышеупомянутых причинах, я настоятельно рекомендую React при определении выбора технологии с менеджером проекта.Хотя могут быть некоторые буферы, с точки зрения устойчивого развития (моя собственная догадка...), в конце концов менеджер проекта согласился .
Строительство каркаса проекта
Я видел много проектов котельной на Github, и они более или менее отличаются от собственных потребностей. Итак, в конце концов, я построил проект семян посредством официального React Create-React-App CLI.
Подготовьте среду
2. Установите cli приложения create-реагировать
npm install -g create-react-app
3. Создайте проект
create-react-app react-seed
Затем войдите в корневой каталог проекта, чтобы установить связанные зависимости.
cd react-seed
npm install
4. Откройте элементы конфигурации
Поскольку информация о конфигурации, такая как веб-пакет проекта, созданного приложением create-react-app, инкапсулирована, для гибкого изменения соответствующей конфигурации инкапсулированный файл конфигурации можно открыть с помощью следующей команды.
npm run eject
Созданный каталог проекта выглядит следующим образом:
5. Запуск локальной службы
// 启动本地server用于开发
npm run start
запустится на локальном порту 3000
редукционная интеграция
Те, кто знаком с React, могут знать, что React — это односторонний поток данных, поэтому в некоторых случаях связь между компонентами не может быть достигнута, полагаясь только на React.Reduxпоявился.
Эта статья не знакомит с синтаксисом и идеями Redux, а только с тем, как интегрировать.
Прежде всего, вам нужно установить зависимости, связанные с Redux, так как между разными версиями могут быть проблемы с совместимостью, лучше всего при установке сделать версию:
npm install redux@3.7.2 --save
npm install redux-thunk@2.1.0 --save
npm install react-redux@5.0.6 --save
Затем в проект можно ввести redux, а структуру каталогов организовать следующим образом:
Интеграция маршрутизации
npm install react-router@3.0.5 --save
Маршрутизация поддерживает вложенность, код выглядит следующим образом:
const routes = (
<Router history={hashHistory}>
<Route path="/home" component={Layout} onEnter={onEnter}>
<IndexRoute getComponent={home} onEnter={onEnter}/>
<Route path="/home" getComponent={home} onEnter={onEnter}/>
<Route path="/detect" getComponent={detect} onEnter={onEnter}/>
<Route path="/about" getComponent={about} onEnter={onEnter}/>
</Route>
<Route path="/unauthorized" getComponent={unauthorized}/>
<Redirect from="*" to="/home" />
</Router>
);
export default routes;
план интернационализации
обычно используетсяreact-intl
npm install react-intl@2.4.0 --save
Интеграция компонентов пользовательского интерфейса
Здесь рекомендуются два компонента пользовательского интерфейса на основе React, один от Ant Financial.Ant Design; другой естьMaterial-UI.
Оба очень хороши, я использую Ant Design.
npm install antd@2.13.10 --save
выборка интеграции
Есть много способов запросить данные, я используюfetch.
npm install fetch@1.1.0 --save
Его можно просто инкапсулировать следующим образом:
import 'whatwg-fetch'
import loggerService from './logger'
let notAuthorizedCounter = 0;
let fetchService = {
fetch: (url, method, header, body) => {
if (!header) {
header = {}
}
return fetchService[method.toLowerCase()](url, header, body).catch(function(exception) {
loggerService.log('fetchService failed:', exception);
// token过期，重新获取token并发起请求
if (exception.code === '401' || exception.code === '403') {
notAuthorizedCounter++;
// 最多重试3次
if (notAuthorizedCounter > 2) {
notAuthorizedCounter = 0;
loggerService.warn("401 or 403 received. Max attemps reached.");
return;
} else {
return fetchService.fetch(url, method, header, body);
}
}
});
},
get: (url, header) => {
return fetch(url, {
method: 'GET',
headers: header
}).then((response) => {
return response.json();
});
},
post: (url, header, body) => {
header['Content-Type'] = 'application/json';
return fetch(url, {
method: 'POST',
headers: header,
body: JSON.stringify(body)
}).then((response) => {
return response.json();
});
}
};
export default fetchService;
Развертывание проекта
Сначала упакуйте проект.
npm run build
Вы можете запустить упакованный проект в своей локальной среде с помощью следующей команды.
serve -s build
Причина в том, что BrowserRouter использует метод объекта истории браузера для запроса сервера. Если сервер не настроит соответствующий маршрут так, чтобы он указывал на соответствующую страницу, маршрут не найдет ресурс.
BrowserRouter станет таким путем http://111.230.139.105:3001/detail/9459469 При обращении к серверу по такому пути сервер будет рассматривать его как запрос на поиск неких данных интерфейса.
Следовательно, в это время необходимо использовать HashRouter.