styled-components: новая идея разделения внешних компонентов

React.js

Я думал о том, как разделить компоненты React, пока не столкнулся с styled-components, которые заставили меня чувствовать себя как рыба в воде.Сегодня я поделюсь с вами, как эта библиотека делает нашу разработку компонентов внешнего интерфейса более элегантной и как чтобы сделать его более подходящим.Детализация разделения компонентов упрощает его обслуживание.

1. Как использовать

styled-components — это библиотека, созданная специально для React, которая следует концепции дизайна всех js в React и доводит эту концепцию до крайности, так что CSS также может один за другим становиться модулями JS.

Также довольно удобно пользоваться, сначала установите эту библиотеку

npm install styled-components --save

Затем используйте его в style.js (обратите внимание, что это не style.css, все файлы стилей — это файлы JS)

import styled from 'styled-components';
//styled.xxx表示创建xxx这个h5标签,
//后面紧接的字符串里面写的是CSS代码
export const HeaderWrapper = styled.div`
  z-index: 1;
  position: relative;
  height: 56px;
  border-bottom: 1px solid #f0f0f0;
`;

Затем используйте его в React:

import React, {Component} from 'react';
import { HeaderWrapper } from './style.js';

class App extend Component{
    render() {
        return (
            <HeaderWrapper></HeaderWrapper>
        )
    }
}
export default App;

Хорошо! Вот как это используется каждый день. Если вам интересно, вы можете перейти в соответствующий репозиторий github, чтобы открыть больше постов :)

2. Какие болевые точки решаются с помощью styled-component

Вы все еще можете задаться вопросом: какая польза от этого?

1. Модульность CSS

Минимизируйте связь между модулями, что способствует дальнейшему обслуживанию проекта. Это первое преимущество перед использованием собственного CSS.

2. Поддерживает вложенный синтаксис препроцессора

Такие как:

export const SearchWrapper = styled.div`
  position: relative;
  float: left;
  .zoom {
    right: 5px;
    &.focused {
      background: #777;
      color: #fff;
    }
  }
`;

Вложенный синтаксис sass и less можно использовать для более быстрой разработки.

3. Позвольте коду CSS обрабатывать логику

Не только потому, что строка шаблона внутри может записывать выражения JS, но, что более важно, она может получать контекстную информацию компонента (состояние, свойства)

Например, в коде JSX в компоненте React напишите этот раздел:

<RecommendItem imgUrl={'xxx'}/>

Соответствующие параметры можно принять в соответствующем style.js:

export const RecommendItem = styled.div`
  width: 280px;
  height: 50px;
  background: url(${(props) => props.imgUrl});
  background-size: contain;
`;

CSS может получить содержимое в свойствах и отобразить его соответствующим образом, разве это не круто?

4. Семантика

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

В настоящее время многие люди стекаются к концепции семантики тегов, но на самом деле большинство разработчиков все еще используют режим div+class. Это из-за плохой семантики? Это, конечно, хорошо, чтобы сделать теги более понятными, но для тегов, введенных спецификацией html5, с одной стороны, это немного громоздко для разработчиков, или div, span, h1 и им подобные более лаконичны и дружелюбны. , с другой стороны, стандарт. Ведь это стандарт, и он не представляет бизнеса, поэтому не обладает достаточной выразительной силой для описания сложного бизнеса, да и эта семантика иногда необязательна. Я думаю, что эти два момента являются фундаментальными причинами, по которым разработчики предпочитают класс div+.

Ну, согласно этой идее, с точки зрения разработки компонента React, если вы хотите получить лучшую выразительность и быть максимально семантичным, что вам нужно сделать? Может быть, вы посмеетесь: что и говорить, разбирать компоненты! Но действительно ли компоненты разобраны настолько мелко, насколько это возможно?

Кто-то однажды сказал: когда вы будете разбирать компоненты все более и более точно, вы обнаружите, что каждый компонент является этикеткой. Но это создает более серьезные проблемы. Допустим, мы дизассемблируем все компоненты UI, когда мы инкапсулируем даже кнопку в компонент для семантики, код будет раздуваться, потому что компонентов будет слишком много, что очень невыгодно для сопровождения.

Итак, есть ли компромиссное решение? Он может не только улучшить семантику тегов, но и контролировать количество JS-файлов. Да, это решение — стилизованные компоненты.

Взяв в качестве примера навигацию домашней страницы, после удаления логики JSX выглядит так:

<HeaderWrapper>
    <Logo/>
    <Nav>
        <NavItem className='left active'>首页</NavItem>
        <NavItem className='left'>下载App</NavItem>
        <NavItem className='right'>
            <i className="iconfont">&#xe636;</i>
    	</NavItem>
        <SearchWrapper>
            <NavSearch></NavSearch>
            <i className='iconfont'>&#xe614;</i>
        </SearchWrapper>
    </Nav>
    <Addition>
        <Button className='writting'>
    	  <i className="iconfont">&#xe615;</i>
    	  来参加
    	</Button>
    	<Button className='reg'>注册</Button>
    </Addition>
</HeaderWrapper>

//style.js
import styled from 'styled-components';

export const HeaderWrapper = styled.div`
    z-index: 1;
    position: relative;
    height: 56px;
    border-bottom: 1px solid #f0f0f0;
`;

export const Logo = styled.div`
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100px;
    height: 56px;
    background: url(${logoPic});
    background-size: contain;
`;

export const Nav = styled.div`
    width: 960px;
    height: 100%;
    padding-right: 70px;
    box-sizing: border-box;
    margin: 0 auto;
`;
//......

Теги разделения — это в основном имена переменных, экспортированные в style.js, которые полностью настраиваются.В настоящее время CSS стал модулем JS, и каждый модуль эквивалентен тегу (например: для нас был создан styled.div теги), вы можете написать теги h5 под модулем. Такой путь развития на самом деле очень гибкий.

3. Ямы, возникшие в процессе разработки и текущие недостатки

Яма: Предыдущий injectGlobal устарел, поэтому для общих файлов стилей необходимо ввести createGlobalStyle.

//iconfont.js
//全局样式同理
import {createGlobalStyle} from 'styled-components'

export const IconStyle = createGlobalStyle`
@font-face {
  font-family: "iconfont";
  src: url('./iconfont.eot?t=1561883078042'); /* IE9 */
  src: url('./iconfont.eot?t=1561883078042#iefix') format('embedded-opentype'), /* IE6-IE8 
  //...
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
`

Затем в глобальном корневом компоненте App.js:

import { IconStyle } from './statics/iconfont/iconfont'
import { GlobalStyle } from  './style'
//import ...

function App() {
  return (
    <Provider store={store}>
      <div>
        {/* 通过标签形式引入这些样式 */}
        <GlobalStyle></GlobalStyle>
        <IconStyle></IconStyle>
        <Header />
        <BrowserRouter>
        <div>
          <Route path='/' exact component={Home}></Route>
          <Route path='/detail' exact component={Detail}></Route>
        </div>
        </BrowserRouter>
      </div>
    </Provider>
  );
}

export default App;

Что касается недостатков styled-components, то единственным недостатком я считаю отсутствие CSS-синтаксиса в строке шаблона, а также отсутствие автоматической подсказки при написании, что до сих пор является ложкой дегтя для людей, привыкших к IDE. подсказки. Впрочем, это не большая проблема, если есть соответствующие плагины или инструменты, поделитесь ими в комментариях.

Немного размышлений о styled-components и компонентизации, запишите, надеюсь, это вас вдохновит.

Категории