Здравствуйте, это мой третий пост о экосистеме React Ecosystem, и сегодня это поворот одной из самых важных частей в развитии любого Fe, стили Отказ Каждый раз, когда я должен объяснить, что делает разработчик Frontend в словах, что даже пятилетний мальчик или девочка могут понять, я всегда начинаю говорить, что сайт как человеческое тело, HTML могут быть кости, JavaScript Может быть мозг, а CSS будет появлением. S0 вам нужна здоровая усердие, будь умственно устойчивая, и, очевидно, вам нужна выглядит хорошо, звучит нарцисс, но в конце концов, все прерывания маленькие нарциссы.
В 2018 году мы на мгновение, когда вы можете сделать удивительные вещи с JavaScript, у нас уже почти 10 лет, так как HTML 5 становится окончательным стандартом для HTML и трудно найти кого-то, кто пытается реализовать альтернативу стилю веб-сайта Использование чего-то другого для CSS. Стиль – это то, что имеет значение между уродливым сайтом и современным. В этом посте мы не собираемся говорить о UI/UX, считать конвенции или передовые практики, когда вы пытаетесь дать стиль своей странице (или, по крайней мере, не подробно), сегодня мы собираемся сосредоточиться на том, как включить Этот большой мир стайлинга в нашем реагированном приложении.
Реагировать позволяет вам включать CSS в его компоненты несколькими способами, поэтому вы можете иметь 2 подхода, когда вы пытаетесь стирать компонент React, каждый из которых полностью отличается от другого, в основном вы можете создавать компоненты, где компонент может знать или справиться с собственным Стиль или полностью агностика о том, как они будут выглядеть, я не говорю о Компоненты против контейнеров Борьба, этот подход состоит в том, как мы включаем стиль в нашем компоненте реагирования, основываясь на том, что у нас есть эти 2 подхода:
Самолюбленные компоненты(Прохладные): компонентдолжен включать его собственное определение того, кого они должны смотретьС этим тем, кто потребляет компонент, не должен заботиться о определении стиля, а также вам не нужно иметь большие модули CSS, просто включите стиль (мы расскажем о том, как сделать это позже) непосредственно в компоненте, Пусть каждый решите.Чистые компоненты: Эти компонентыне знаю, как они должны смотретьОни все равно, они будут использовать ссылку на указание того, какой компонент он, и доверие, которое не имеет значения, где используется компонент, какой-то глобальный стиль заставит его выглядеть хорошо, основанным в этой ссылке, что может быть название класса Но вы не пишете ни одной строки CSS.
Примечание : Для этого контекста чистый член компонента не то же самое, что ACT API PURECOMPONENT Отказ
Оба подхода в порядке, просто зависит от того, что вам нужно. Идея первого вида компонентов состоит в том, что никто не должен модифицировать его внешность, они владеют тем, как они должны смотреть, независимо от того, кто будет использовать его или где выглядит всегда одинаково, для второго, им просто все равно.
Очевидно, что вы можете использовать оба подхода, вы можете иметь самостоятельные компоненты для определенных компонентов, таких как определенный вход, доступность DatePicker или макет; А также иметь глобальный стиль, который заботится о большой картинке, сбрасывая некоторые значения по умолчанию или даже выбирая шрифты, ВАЖНЫЙ : Если вы решили смешать, чрезвычайно важно, чтобы быть дотошным в дифференцировании того, что вы считаете глобальным, иначе вы будете бороться на войне, что вы не сможете выиграть против специфики CSS. Если вы собираетесь использовать CSS, попробуйте выполнить следующее соглашение, Line Bem или как вы, как вы.
ПРИМЕЧАНИЕ: Если вы решили использовать самостоятельные компоненты, не пытайтесь переопределить определенные стили в глобальных CSS, потому что вы найдете себя, написав CSS растворы Это завершит большой селектор и использует Действительно важно где угодно. ЗАМЕТКА 2: Если вы решите иметь глобальный стиль или любые рамки CSS, как Bootstrap, пытаются следовать за лучшими практиками в момент продления стилей, SASS и менее, имеют отличную документацию о том, как сохранить поддерживаемые CSS.
React – это мощная библиотека, в которой мы можем иметь компонент, который смешивает HTML и JS, в один класс или функцию. Этот класс или функция обрабатывает состояния визуализации, как инициализировать компонент, как вести себя после и перед рендером, обновлением или устранением. Но это не просто бизнес-логика, нам нужно создавать компоненты, которые должны выглядеть хорошо для того, что они притворяются.
Таким образом, вам нужно иметь способ включить стиль в вашем компоненте реагирования, реальный вопрос, если я должен использовать самоуверенный компонент или чистый компонент? Вы можете использовать оба базы на то, что вы действительно хотите. Я дам несколько примеров того, где вы должны использовать тот или иной.
Это лучшие сценарии для использования чистых компонентов: Я хочу использовать Framework CCS, построенную (или купил) в нашем Frestend Если вы используете что-то вроде Bootstrap, Material Ui или вашу собственную структуру CSS, и вы хотите использовать это в вашем приложении React. Вам нужно использовать чистый компонентный подход. Я хочу сохранить последовательность между всеми моими Фес Также есть вероятность того, что вы создали Multiply Fe в других рамках других, если вы не хотите беспокоиться о определении структуры CSS для каждого проекта и удобства использования.
И это почему для самоуверенных компонентов: Я не хочу иметь большие монолитные рамки CSS Иногда большие монолиты не лучшие, один проект против других может иметь особые различия или требования, которые могут преобразовать наши CSS Monolith в ужасный код спагетти. Я хочу использовать последние CSS , Если вы хотите использовать последние функции для ваших сайтов, вы должны использовать этот, потому что вы можете быть уверены в реализации того, что вы хотите в уменьшенном объеме, в противном случае, что новая функция CSS, которая отлично работает в вашем проекте, может создавать бесконечные ошибки в других проектах.
Мы договариваемся о том, что и почему давайте сейчас пойдем в действие, я дам простые примеры того, как сделать чистый компонент и самоуверенный компонент, давайте посмотрим:
Чистые компоненты Чистые компоненты, как мы уже говорили, не имейте определения своего стиля, только ссылка на то, как наш компонент должен выглядеть, и мы можем использовать имя класса для этого, в реакции мы не можем использовать сорт Мы должны использовать классное значение В этом атрибуте нашего компонента мы можем составить ссылку на любой тип CSS-класса, используемого для нашего приложения, например:
import { Component } from 'react';
class PureComponent extends Component {
render() {
return (
);
}
}
export default (PureComponent);
Мы видим, что у нас есть 2 ссылки, имя одно класса называется контейнер и Ребенок Для контекста компонента они не заботятся о том, что это означает, определение правил для этого класса полностью независимо от самого компонента.
Но, где этот стиль определен? Все зависит от нашей архитектуры, и где работает наше приложение React. Я позволю вам несколько ссылок на другие блоги, где вы можете найти конкретную информацию о том, как реализовать на основе того, что у вас может быть: Bootstrap , чтобы позволить использовать классы, такие как Col-LG-X Или любой другой класс Bootstrap вы должны прочитать это ссылка Материал интерфейс , использовать Материал пользовательских компонентов CSS погрузчики включают мои собственные CSS , если вы хотите включить свои собственные CSS, вы должны прочитай это
В большинстве случаев использовать библиотеку CSS, что вам нужно сделать, это включать ссылку на ссылку, то вы сможете использовать его, просто вызывая правильный класс.
Самостоятельные компоненты Теперь мы будем говорить о другом способе сделать стиль, иногда то, что нам нужно, это определить конкретный стиль для нашего компонента, мы не хочем использовать любое название класса или ссылки, чтобы дать стили нашим компонентом, что мы Нужна доставка компонента со своей логикой и стилем, и мы можем сделать это несколькими способами:
В том числе стили с JSON Мы можем определить JSON, который содержит стили, а затем вводится непосредственно в компонент, как это:
import { Component } from 'react';
const container = {
margin: '30px',
padding: '5px 10px',
textAlign: 'center'
};
class SelfStyledComponent extends Component {
render() {
return (
);
}
}
export default (SelfStyledComponent);
Нам нужно помнить, что для недвижимости, таких как Выравнивание текста Мы должны пройти это к корпусу верблюда и использовать TextAlign вместо.
Слифовые компоненты У нас есть библиотека, которая позволяет вам создать самоуверенный компонент более дружелюбным образом, чем просто вводить jsons, мы можем использовать Слифовые компоненты С этим мы можем включить небольшие (или самые большие зависимости) частей SCSS, назначаемое непосредственно к компоненту реагирования, как это:
import React from 'react';
import styled from 'styled-components';
const Container= styled.div`
margin: 40px 20px 15px;
display: flex;
margin-left: auto;
div {
padding: 10px;
&::after {
backgroung: gray;
}
}
`;
const Child = styled.div`
color: 'blue'
`;
class SelfStyledComponent extends Component {
render() {
return (
);
}
}
export default (SelfStyledComponent);
С помощью компонентов стиля вы можете создавать пользовательские компоненты, принимающие продвижение всех последних особенностей CSS и SCSS, вы также можете обрабатывать стили компонентов с переменными, которые очень хороши, когда вы работаете с темами ._
Отредактируйте сентябрь 2018: Стилированный компонент – это не единственная библиотека, которая позволяет создавать самоуверенные компоненты, как упомянули в комментариях, есть гораздо больше REPOS, которые приведут вам альтернативу сделать то же самое. Вы можете проверить это этим github repo Автор Michele Bertoli, где вы найдете подробный список библиотек, чтобы сделать CSS-in-js для получения дополнительной информации.
Как видите, мы можем иметь несколько способов сделать то же самое, лучший вариант зависит от вас, ваш технический персонал и что вы ожидаете создавать. Существует большое количество преимуществ каждого подхода, производительности, масштабируемости, повторного использования и других. Надеюсь, это поможет вам понять, как иметь дело со стилем, пока вы разрабатываете в реакции.
Оригинал: “https://dev.to/mangel0111/the-what-why-and-how-of-react-styles-2a0k”