Я официально на 11-й неделе 15-недельного курса разработки программного обеспечения с погружением во Flatiron School. Сумасшедший! Мы собираемся заняться нашим испытанием кода Mod4, закончить наши обучающие лекции и начать работу над проектами Mod4, прежде чем мы проведем последние три недели, работая и создавая наши окончательные проекты. Мы изучили хороший материал о Javascript и React.js, и я буду честен, когда скажу, что немного боролся. React просто не привязывался ко мне, как Ruby/Ruby on Rails и Javascript, поэтому я был немного обескуражен.
Проведя субботу с столь необходимым временем вдали от компьютера, я вернулся к кодированию и повторному обучению себя концепциям большую часть дня в воскресенье, и я могу сказать, что чувствую себя немного лучше. Я пока не уверен на 100%, но знаю, что буду с большей практикой.
Проходя практические испытания и уроки, я понял важность чистого кода. Четкое и явное кодирование помогло мне изучить концепции, видя все, что я набрал, более четко и имея возможность видеть поток того, куда и откуда вещи передаются в качестве реквизита.
Я помню урок в Learn.co, на котором мы узнали о различиях и полезности компонентов Presentational и Container. Эти двое были жизненно важны для поддержания моего кода в чистоте и порядке. А теперь я собираюсь рассказать вам, ребята, почему важно использовать эти стили компонентов в вашем коде!
Компоненты контейнера
Мне нравится рассматривать компонент Container как своего рода «посредника» или «посредника» между компонентом Parent и компонентом Presentation. Основная обязанность компонента Container — предоставлять данные и поведение своим дочерним элементам, которыми обычно являются презентационные компоненты. Компоненты-контейнеры имеют очень ограниченный HTML-код, обычно только с оберткой ‹div›. Родительский компонент также обычно считается компонентом-контейнером, поскольку он содержит данные, имеет состояние и вызывает другие компоненты для передачи данных, чтобы отображать данные и предоставлять им функциональные возможности.
// Parent component that also acts as a Container component import React from 'react'; import CatList from '<file path>'; class App extends React.Component { constructor() { super(); this.state = { arrayOfCats: [ ... ] }; render() { return ( <> <CatList cats={this.state.arrayOfCats} /> // <CatList />, or CatList.js is a component being called within // this Container component </> ); }; }; export default App;
Вы также можете вызвать другой компонент-контейнер внутри родительского компонента, чтобы передать данные и поведение компоненту-представлению, что сделает ваш код еще чище и организованнее! Например, если у вас есть состояние в родительском компоненте, которое содержит массив данных, которые вы хотите отобразить, вы можете передать это состояние в качестве реквизита компоненту-контейнеру, который затем вы можете сопоставить с реквизитом и передать каждый сопоставленный компонент. возражать компоненту Presentation.
// Container component that takes in 'cats' as a prop from App.js import React from 'react'; import Cat from '<file path>'; class CatList extends React.Component { render() { return ( <div> // usually some container/grouping styling here! {this.props.cats.map(cat => <Cat cat={cat} />)} // This container component is calling a Presentational component // and passes the data to it, and that's ALL it does! </div> ); }; }; export default CatList;
Презентационные компоненты
Компоненты презентации говорят сами за себя. Его основная обязанность заключается в работе с аспектами представления кода или в рендеринге переданных данных и обеспечении форматирования для их отображения в модели DOM. Если здесь нет определяемых или устанавливаемых/изменяемых состояний, вы можете просто использовать компонент класса, а не функциональный компонент. Это буквально так. Просто и понятно, верно?
// Presentational Component that takes in 'cat' as a prop, which is // a single object from the arrayOfCats in App.js, from CatList.js import React from 'react'; const Cat = (props) => { return ( <div className="image"> <img src={props.cat.image} /> </div> <div className="content"> <div className="header"> {props.cat.name} </div> <div> Age: {props.cat.age} </div> </div> ); } export default Cat;
И вот оно! Простой способ сохранить ваш код чистым и организованным, ради вашего мозга, когда вы понимаете, что есть ошибка или ошибка, когда вы пытаетесь что-то отобразить. Очевидно, что вы можете добавить несколько интересных функций, передаваемых в качестве реквизита, чтобы предоставить больше функциональности отображаемым данным, например, добавить «нравится» или, в случае с кошками, «усыновить» кошку!
Кодирование меня поражает. И процесс добавления функций, передачи их в качестве свойств, которые будут вызываться на основе «щелчка» в отображаемых данных, меня поражает. Несколько месяцев назад я бы не смог сделать ничего из этого! И посмотри, где я сейчас. Дикий. Оставайтесь с нами для следующей остановки в этом сумасшедшем приключении :)