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

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

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

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

Как видите, каждый компонент - это отдельный файл, есть огромный файл webpack.config.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])
3
Aminadav Glickshtein 8 Сен 2016 в 15:39

2 ответа

Лучший ответ

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

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

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

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

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

7
Max White 8 Сен 2016 в 14:51

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

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

1
Even Stensberg 8 Сен 2016 в 12:45