Будущее React Native и React Hooks

Недавно я болтал с друзьямиReact-NativeОфициальный статус рефакторинга и недавно выпущенный0.59.xВ серийной версии дизайн верхнего уровня претерпел серьезные корректировки.В сочетании с состоянием после опыта, я хочу поговорить об этом.React-NativeСтатус-кво новой версии, опыт обновления новой версии, а также недавно поддерживаемый React Hook и другие функции.

Эта статья не является анализом исходного кода и учебным пособием, а скорее обсуждением и описанием записи. Автор работал надAndroid,React-Native,FlutterДождитесь большой фронтенд-разработки, а иногда пишитеReactа такжеVue, Эта статья также надеется связаться с вами. Если вы можете, вы можете задать вопросы или предложения. Наконец, я также надеюсь, что статья может вдохновить вас.

Skin, проект React-Native выпускается уже более 4 лет, а версии 1.0 пока нет (¬_¬)

1. Статус-кво

Я верю, что каждыйReact-NativeПервое впечатление о «быть крутым» должно быть от Alibaba.«Почему Airbnb отказалась от React Native», как описано в текстеReact-NativeДействительно будут некоторые узкие места в производительности, но это зависит от того, с кем вы сравниваете, я лично думаюКодекс служит бизнесу, и практика откладывания сцены и исполнения не является строгой.Ключ в том, как вы его используете, а также в том, активны ли и оптимизированы ли официальный сайт и сообщество.

Позвольте мне начать с моего понимания кроссплатформенности:Набор логики можно запускать на нескольких платформах, чтобы избежать несогласованности бизнес-логики каждой платформы, а снижение нагрузки не очевидно! Не очевидно! Не очевидно!В то же время, после того, как корпоративный проект большой, он обычно не ограничивается одним фреймворком.

На самом деле, Facebook не сдалсяReact-Native, испытывая«Facebook проводит рефакторинг React Native, который перепишет большую часть нижнего слоя»После официального объявления, почти через год после «обработки», хотя лежащий в основе рефакторинг официально не выпущен, недавняя новая версия0.59.xТоже дал хороший ответ.

Новая версия в основном включает в себя следующие пункты:

• 1. УменьшенныйReact-NativeСобственный фреймворк, разделяющий встроенные пакеты, такие как webView, viewPager, netinfo, async-storage и т. д., независимо поддерживаемые сообществом и постепенно размываемыеReactа такжеReact-Nativeграницы.
• 2. Обновите JavaScriptCore, обновите инструменты и CLI.
• 3. ПоддержкаReact Hooks.
• 4. ИсправленоFlatListИ многие другие проблемы в управлении списком.

Основными целями рефакторинга в будущих версиях являются:

• 1. Уменьшите зависимость JSBridge.
• 2. ПройтиFabricАрхитектура пользовательского интерфейса, будетShadowПол,UIManager,NativeModuleПеренесено с Java на C++ для поддержкиДвусторонний синхронный и асинхронный рендеринг и вызов.

Как можно заметить0.59Рефакторинг и разделение в версии — все это подготовка к следующему рефакторингу.Более конкретный анализ содержимого рефакторинга следующего поколения можно найти на JD.com.«Паодин Цзе Ню! Углубленный анализ рефакторинга архитектуры нового поколения React Native».Проверьте это, я не буду вдаваться в подробности здесь.

Также в проекте Ctrip:«Структура разработки CRN с открытым исходным кодом CRN»В статье также было сказано, что он был обновлен в первый раз0.59.xверсия, все еще чувствуюReact-Native"Холодает"?

Не по теме:

В современном мире программирования существуют различные «партийные споры», такие какVue,React,Angular, кроссплатформенныйCordova,Weex,React-Native,Flutterи т. д., и когда я рассматриваю выбор фреймворка, я обычно отдаю предпочтение следующим моментам:

• 1. Активность фреймворка.
• 2. Сложность потребностей вашего бизнеса.
• 3. Конфигурация команды и технический стиль членов команды.
• 4. Личный комфорт в кадре.

2. React-Native 0.59.x

Прежде чем выбрать версию обновления, нам нужно понятьReact-NativeКитайская версия имеет0.A.BУстанавливается основной номер версии A-минор B, в то время какReact-NativeОдно из моих ощущений во время использования:

делаетReact-NativeПри выборе или обновлении последней версии лучше не выбирать версию 0.A.0, например 0.59.0; обычно я выбираю итерацию младшей версии после основной версии, например, версию 0.59.4 для обновления и обновление, эта версия относительно более стабильна, вы можете меньше ложить некоторые проблемы.

потомReact-NativeУстройство версии всегда было большой проблемой, я обычно лежал в моем проекте с открытым исходным кодом, на этот раз в моем проекте с открытым исходным кодомGSYGithubAPP, из0.57.8обновить непосредственно до0.59.4версии, результаты, как правило, не гладкие, как ожидалось, в то время как общееReact-NativeСуществует три основных типа проблем, вызванных обновлением версии:

1,Корректировки официального API:

Как правило, такие проблемы решаются относительно легко, и в официальном документе по обновлению также есть подробные инструкции.React-NativeавтономныйwebView,netinfo,async-storageдождитесь замены плагинаreact-native-communityпредставлен ниже и заменяет некоторые устаревшие API.

2,Сторонняя библиотека несовместима :

Это тожеReact-NativeВ стороннем пакете это головная боль,потому что сопровождение сторонних пакетов происходит неравномерно.В принципе,если автор не поддерживает или не поддерживает вовремя,то только сам с кривой усмешкой может это сделать,как и в этот раз .GSYGithubAPPВ процессе обновления есть:

• столкнулся после обновленияrealmОшибка компиляции библиотеки на Xcode неверна, подробности см.GSYGithubAPP#66, проблема хоть и не большая, но решается простой сменой БД локально, что тоже текущий апгрейд проекта не слит вmasterодна из причин.

• react-native-router-fluxа такжеreact-navigationМодернизированные версии должны соответствовать друг другу, и в то же время должны увеличиваться.react-native-gesture-handlerзависит от и вindex.jsИмпортируйте заранее на входе, чтобы решить некоторые проблемы.

• Различные сторонние плагины для AndroidtargetSdkа такжеsupportSdkНапример, проблемы с версиями и зависимостями.

3.node_module "черная дыра":

Такой вопрос относится к персонажу, напримерGSYGithubAPPтовар из0.57обновитесь до0.59, покаBackAndroidсуществует0.58полностью устарел, если проект имеет одинmodalиспользуемый плагинBackAndroid, хотя автор и обновил плагин для совместимости, но...

После обновления плагина он все еще сообщает об ошибке после повторного запуска? WTF, а исходный код плагина больше недоступенBackAndroidтрейсы, откуда ошибка?

Просмотр текущего через отладку ChromebundleИсходный код, и, наконец, обнаружил, что он действительноBackAndroidсуществование, оно было должным образом оценено в то времяПроблема с кешем.

После выполнения бесчисленного количества раз, чтобы удалить приложение, закрыть интерфейс командной строки, удалитьnode_moduleПосле переустановки, наконец, удалив кешrm -rf ~/.rncacheа такжеrm -rf $TMPDIR/*, а затем переустановитеnode_moduleЗапуск решает проблему.

• Суммировать

Собственно поэтому я и говорюReact-NativeЖдем кроссплатформенной разработки, на самом деле нет смысла снижать нагрузку.Кроссплатформенность решает унифицированное обслуживание логики, и в процессе разработки возникает множество проблем совместимой разработки, а адаптация между платформами также требует времени.

я верю каждомуReact-NativeРазработчики ненавидят полноэкранный красный цвет, поэтому я не знаю, с какой версии начать,React-NativeДобавлены красные и черные эффекты для ошибок (¬_¬).

3. Реагистрационные крючки

React HooksЯ действительно обновился до0.59Одна из целей, потому что это действительно очень интересный сеттинг.

На самом деле, я не являюсь строго фронтенд-персоналом, большую часть времени яCSSа такжеESпонимание не в глубину, а вJSЕсть несколько, которые впечатлили меня в процессе использования:

• Redux:ReduxДизайн управления состоянием и ряд последующих и сторонних плагинов, производных от него, я лично думаю, что этоReactОдин из бустеров, который смог быстро стать популярным в первую очередь.

• HOCа такжеES7 Decorators: на самом деле это также должно быть включено вRedux, ноHOC + DecoratorsБыстро добиться эффекта аспектоподобного программирования, что, несомненно, заставляет меня чувствовать себя дружелюбно в Java-разработке.

Наконец, главный геройReact Hooksсейчас,React HooksЭто также относительно новое понятие, оReact HooksЯ рекомендую эту статью:«[Подробно реагировать] От Mixin до HOC и Hook», что хорошо описано в текстеReactРазвитие и контраст стилей развития.

И дляReact Hooksможет быть введен так раноReact-Native, это дает мне ощущение, чтоFacebookКоманда работает надразмытоReactГраница разработчика между сетью и приложением, а также для обогащенияReactЭкосистема разработчиков.

И дляReact Hooks, функциональное программирование, вероятно, ближе к форме «будущего» в моем понимании (хотя я не особо уверен), в то время какReact HooksУ него есть явные преимущества:

• Это может лучше уменьшить объем нашего кода.
• При этом снижается блокировка, вызванная кодом при выполнении жизненного цикла.
• Пользовательские хуки могут в определенной степени отделить друг друга, увеличить повторное использование и уменьшить вложенность.
• Стиль функционального программирования делает функции независимыми, а код лаконичным и легко читаемым.

Вернемся к конкретному использованию,React HooksНаиболее распространенные интерфейсы по умолчанию:

• useStateПозволяет быстро добавлять состояние к функциям
• useEffectПозволяет быстро добавить обработку жизненного цикла
• useImperativeHandleБыстро открыть интерфейс для внешнего мира

Эти встроенные хуки могут в определенной степени сохранить ваш код и обеспечить четкую логику управления состоянием, используя преимущества официальногоuseReducer, как следующий код, вы можете быстро написать псевдоRedux.

import React, {Component, useReducer, useRef, useImperativeHandle, forwardRef} from 'react';
import {Text, View, TouchableOpacity,} from 'react-native';

const initialState = {count: 0};

function reducer(state, action) {
    switch (action.type) {
        case 'reset':
            return initialState;
        case 'increment':
            return {count: state.count + 1};
        case 'decrement':
            return {count: state.count - 1};
        default:
            return state;
    }
}

export function DemoCounter({initialCount}) {
    const [state, dispatch] = useReducer(reducer, {count: initialCount});
    return (
        <View>
            <Text>Count: {state.count}</Text>
            <TouchableOpacity onPress={() => dispatch({type: 'reset'})}>
                <Text>Reset</Text>
            </TouchableOpacity>
            <TouchableOpacity onPress={() => dispatch({type: 'increment'})}>
                <Text>+</Text>
            </TouchableOpacity>
            <TouchableOpacity onPress={() => dispatch({type: 'decrement'})}>
                <Text>-</Text>
            </TouchableOpacity>
        </View>
    )
}

дляReact Hooks, в сочетании с простым пониманием исходного кода и статьи, просто используйте серию хуков перед рендерингом, иHooksиспользуется внутримножество, который реализует последовательное обновление данных состояния.

Так чиновник сказал,Хуки нельзя использовать в циклах или условных суждениях., что является соглашением, потому чтоHooksМассив внутри вызывается последовательно каждый раз.Если порядок в условном суждении нарушен, курсор не сможет сопоставить правильные данные, поэтому условлено неifилиforиспользуется вuseStateповедение.

оReact HooksДля получения более подробной информации о сухих товарах см.:

• «Предварительное исследование React Hook»

• «Крючки React — это не волшебство, это массивы»

Наконец, давайте поговорим о стиле кодирования.:

Будь тоHOC,React Hooks,ReduxПодождите, на самом деле я не думаю, что существует так называемое оптимальное решение, конкретный выбор использования зависит от бизнес-сценария.Чрезмерный дизайн ради дизайна, следствием убийства кур бычьим ножом является то, что это очень неудобно, и легко случайно пораниться.

Если это личная разработка, понятно, что код шоу яркий, но если это реальная командная разработка, лучше всего рассмотреть совместный выбор команды, в противном случае код, который вы пишете, можете поддерживать только вы, и это подсчитано, что вы будете плакать в конце.

Что ж, на этом статья заканчивается! (///▽///)

Полные кроссплатформенные проекты и статьи:

• Проекты и статьи Flutter с открытым исходным кодом
• React Native проекты и статьи с открытым исходным кодом
• Проекты и статьи Weex с открытым исходным кодом

Полное содержание статьи находится на домашней странице проекта ReadMe.

Другие статьи

«Углубленный анализ мобильной кроссплатформенной разработки»