Каковы недостатки использования одного большого компонента React?

Каковы недостатки использования одного большого компонента React?



У меня есть глубокий опыт использования webpack, browserify, AngularJS, ES6, NPM и других подобных веб-фреймворков. Я новичок, чтобы реагировать.



Я хочу создать одностраничное приложение в React. Я не хочу и не нуждаюсь в тестировании. Мне не нужны друзья по команде, чтобы работать. Мне нужно только сделать разработку продукта как можно быстрее. Сделай так, чтобы все работало. Вы можете назвать его MVP. Вы можете назвать его типом lessm, или умным развитием. Если все получится хорошо, в будущем я могу рассмотреть возможность рефакторинга проекта. Я единственный разработчик, который работает над этим. Я не беспокоюсь о проблеме perfromance (если это всего лишь несколько МС)



Вопрос таков: Все статьи говорят, чтобы сделать как можно больше многих и малых реагирующих компонентов. В отдельных файлах. Вы можете увидеть React-Starter-Kit. Он огромен.



Вы можете видеть, что каждый компонент является отдельным файлом.Есть огромный webpack.конфиг.файл js. Каждый компонент импортирует много других вещей. Если я тоже захочу Redux, мне нужно импортировать магазин и сделать connect на каждом компоненте.
Я хочу использовать другой подход. Я хочу использовать React & Redux. Но с использованием только одного компонента. Каждый внутренний элемент может отправлять или выполнять события.



Есть ли какие-то проблемы в будущем, о которых я не думаю?


HTML: 



<html><head><body></body></html>


JavaScript: 



App=React.createClass(function(){

    getInitialState:function(){

        return {

            openMore:'block'

        }

    },

    openMore:function(){

        this.setState({openMore:'visible'})

    },

    render:function(){

        return (

            <div>

                I want to put all the HTML of the app

                <span>

                    In one component that do everything.

                    <button onClick={this.openMore}>More Info</button>

                    <span> This way I beleive I will need to type less for development</span>

                    <b style={{display:this.getState().openMore}}>What are the disadvance of this?</b>

                </span>

            </div>

        )

    }

})

ReactDOM.render(App,document.getElementsByTagName('body')[0])
528   3  

3 ответов:

Наличие одного большого файла прекрасно. React был построен на Максиме "нет абстракции лучше, чем неправильная абстракция" и имеет API с низкой площадью поверхности.

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

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

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

Можно использовать React только как средство декларативного синтаксиса для описания того, как должен выглядеть html в различных состояниях.

7  
2016-09-08 17:51:17

Ну недостатков много. Я попытаюсь перечислить их из того, с чем я столкнулся и наблюдал: -

    React был построен на концепции разбиения страницы на компоненты, поэтому да, чем больше вы разбиваете страницу на мелкие компоненты, тем проще ее использовать.
  1. его обычно легко отслеживать код.
  2. его масштабируемость
  3. один компонент не нарушает другие компоненты.
  4. рендеринг существует только для определенных компонентов, если они изолированы. Если у вас есть все в одном компоненте, рендеринг сделает ваш весь компонент загружается снова, снижая эффективность.
  5. труднее проверить
  6. трудно использовать с redux при передаче действий и последующем подключении к хранилищу.
  7. ваш компонент должен выполнять только одну работу.
  8. не может разбить компоненты на презентационные и контейнерные компоненты, таким образом, не используя redux в полной мере.
  9. Не имея возможности использовать разлитый код особенность webpack, которые увеличивают скорость страницы за счет частичной загрузки кода.

Это немногие вещи, с которыми я лично сталкивался. Далее переходим к настройке webpack. Я вряд ли настроил файл webpack более чем на 100 строк, и поверьте мне, эти 100 строк действительно облегчают вашу жизнь. На самом деле базовая конфигурация-это всего лишь 10-15 строк, которые могут генерировать ваш пакет.

Теперь, переходя к проблемам в будущем, да, следующие будут проблемы: -

  1. трудно масштабировать.
  2. трудно проверить
  3. нет использование библиотек в их потенциале
  4. трудно управлять компонентом из-за поведения монолита.

Надеюсь, это поможет!!!

8  
2016-09-08 15:53:16

Наличие больших компонентов плохо из-за того, что вы не можете упростить свой код. Разбиение ваших модулей на более мелкие позволит вам легче поддерживать код в течение более длительного времени, а также быстрее находить ошибки. Трассировка стека проще, а также она более составная, когда имеет неявный компонент.

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

1  
2016-09-08 15:45:42

Comments

    Ничего не найдено.
Click here to cancel reply.