Разработка компонентов интерфейса имеет многолетнюю историю.Будь то рендеринг на стороне сервера или интерфейс SPA, существуют относительно зрелые решения для разработки на основе компонентов. С ростом популярности компонентной разработки сообщество интерфейсных разработчиков внесло много хороших интерфейсных компонентов, каждый из которых предоставляет готовые решения, более эффективно использующие преимущества компонентизации. Во фронтенд-команде, если кто-то не имеет глубокого понимания фронтенд-компонентизации, он не сможет разрабатывать хорошие компоненты, что принесет большие затраты на сопровождение проекта. Читайте полный текст около 8 минут.
автор:zollero
Эта статья была впервые опубликована: Знать колонку Front-end Weibo (прыжок «прочитать исходный текст») Публичный аккаунт WeChat Front-end Weibo
В последние годы, от дебатов «Какая производительность лучше между React, Vue и Angular?», до все более и более полных экосистем различных фреймворков (библиотек), больше не стоит обсуждать разрыв в производительности. В кругу внутренних развлекательных интерфейсов React и Vue являются наиболее популярными, а Angular имеет низкую долю в стране по историческим причинам.
С улучшением таких инструментов, как jade, less, scss, typeScript и webpack в интерфейсной экосистеме, эффективность разработки интерфейсных компонентов значительно повысилась.
В частности, популярность превосходных библиотек интерфейсных компонентов, таких как Ant Design, Element UI и iView, довела разработку компонентов до крайности. Разработка интерфейсной страницы стала очень эффективной, особенно в управлении системными страницами, построении шаблонов, добавлении пакетов зависимостей, настройке маршрутов, создании страниц и импорте компонентов, и система может быть построена очень быстро.
Если вам нужно SEO, фреймворки React и Vue SSR Next.js и Nuxt.js предоставляют готовые интеграции и упрощают разработку «однородной системы страниц» (Google It).
Давайте перейдем к делу и подробно изучим интерфейсные компоненты.
Что такое front-end разработка компонентов
Прежде всего, мы должны выяснить, что такое разработка компонентов интерфейса?
Вы должны были столкнуться с ситуацией, когда сотни строк или даже тысячи строк кода логики страницы прописаны в js-файле. Обычно такой код трудно читать, не говоря уже о поддержке, добавлении новых функций, удалении некоторых старых функций, потому что вы не знаете, что если вы измените место, будут неожиданные ошибки.
В настоящее время вам необходимо использовать компонентную разработку, разделять функции, упаковывать компоненты и поддерживать их отдельно.
Современные интерфейсные фреймворки обычно реализуют решения MVVM.Уровень данных (M) и уровень представления (V) связаны друг с другом и изменяются одновременно, так что взаимодействие страниц поддерживает высокую степень согласованности.
Если вы знакомы с языками внутренней разработки, такими как Java, Python, Go и т. д., вы должны быть знакомы с концепцией пакета. интерфейсные компоненты предполагают больше Это логика представления и взаимодействия. Конечно, интерфейсный компонент похож на микросервисную концепцию внутренней архитектуры.Можно понять, что компонент — это сервисный компонент, который предоставляет только определенную услугу.
Front-end компонентная разработка заключается в том, чтобы выделить определенную часть страницы и инкапсулировать слой данных (M), слой представления (V) и слой управления (C) этой части в один компонент в виде черного ящика, выставляя напоказ некоторые готовые функции и свойства для вызова внешних компонентов.
Фронтенд-сборка содержит HTML, CSS, JavaScript, включая компоненты, стиль, взаимодействие и т. д. То есть вам не нужно учитывать внутреннюю логику реализации компонента, снаружи компонент представляет собой полный черный ящик. .
Компоненты могут быть инкапсулированы в нескольких слоях, вызывая несколько небольших компонентов и, наконец, инкапсулировали в большой компонент для внешних вызовов. Например:Поле ввода вводаявляется компонентом,Выберите раскрывающееся поле выбораЭто также компонент, вы можете использовать форму, чтобы наложить слой на эти два компонента, что являетсяКомпоненты формы.
Есть несколько часто используемых интерфейсных компонентов, таких как vue-router, vuex, react-router, redux, mobx и т. д., которые основаны на Vue и React. Они сосредоточены только на маршрутизации и хранении состояний и выполняют эти задачи. хорошо .
Пока вы хорошо используете компонентную разработку, разработка страницы подобна строительным блокам, соединению различных компонентов и, наконец, объединению их вместе, это полная система.
Преимущества компонентной разработки
В конце концов, компонентная разработка интерфейса может значительно уменьшить связанность каждой функции системы и улучшить агрегацию внутри функции. Это дает большие преимущества для проектирования переднего плана и сокращения объема обслуживания кода.
Уменьшение связанности улучшает масштабируемость системы, снижает сложность разработки, повышает эффективность разработки и снижает затраты на разработку.
Компоненты хорошо упакованы, меньше сверхурочных работ и меньше жуков, поэтому остается больше времени пить кофе и бороться с пестицидами. :)
как спроектировать компонент
Поскольку разработка компонентов интерфейса настолько хороша, как спроектировать хороший компонент?
После многократных тренировок подведены итоги некоторых ключевых моментов проектирования компонентов.
целеустремленный
Чтобы спроектировать хороший компонент, компонент также долженцелеустремленный.
Компоненты дизайна должны следовать принципу:Компонент фокусируется только на том, чтобы делать одну вещь и делать ее хорошо.
Если функцию можно разделить на несколько функциональных точек, то каждую функциональную точку можно инкапсулировать в компонент.Конечно, чем меньше степень детализации компонента, тем лучше, если функции и логика в компоненте управляются в едином один компонент в пределах диапазона регулирования.
Например. Если на странице есть список таблиц и элемент управления пейджингом, таблица может быть инкапсулирована как компонент, элемент управления пейджингом может быть инкапсулирован в компонент, и, наконец, компонент таблицы и компонент пейджинга могут быть инкапсулированы в компонент. Компоненты таблицы также можно разделить на несколько компонентов таблицы-столбца, отображать логику и т. д.
Конфигурируемость
Для компонента необходимо знать, каковы его вход и выход.
В дополнение к отображению контента по умолчанию, компоненты также должны выполнять некоторую динамическую адаптацию, например: компонент имеет текст, изображение и кнопку. Затем можно сделать настраиваемыми цвет шрифта, правила изображения, положение кнопки, логику обработки события нажатия кнопки и т.д.
Чтобы добиться конфигурируемости, самый простой способ — передать значение конфигурации компоненту через свойство и выполнить соответствующую модификацию отображения, прочитав значение свойства во время цикла объявления инициализации компонента. Существуют также способы передать допустимые значения функции, вызвав функцию, предоставляемую компонентом; изменить глобальный стиль CSS; передать определенное событие компоненту и прослушивать событие в компоненте для выполнения функции и т. д. .
При выполнении конфигурируемости, чтобы сделать компонент более надежным и убедиться, что компонент получает действительные свойства, а функция получает действительные параметры, необходимо выполнить некоторую проверку.
1. Проверка значения атрибута
При проверке значения атрибута обычно учитываются следующие аспекты.
1. Допустим ли тип значения атрибута. Если атрибут требует передачи массива, если переданное значение не является массивом, будет выдано исключение и будет выдано соответствующее приглашение.
2. Является ли атрибут обязательным. Когда значение некоторых атрибутов обязательно в компоненте, оно обязательное.При инициализации компонента необходимо проверить, передано оно или нет.Если не передано, нужно кинуть исключение и соответствующий запрос дано. Если свойство не требуется, вы можете установить значение по умолчанию, когда свойство не установлено, используется значение по умолчанию.
Благодаря проверкам свойств, реализованным внутри React и Vue, и эти проверки свойств выполняются по умолчанию во время инициализации компонента, вы можете легко настроить проверки свойств для компонентов. В React вы можете использовать React.PropTypes для настройки проверки типов, а в Vue вам нужно установить свойства только для компонентов.
Проверка типов в React:
// title.jsx (Title组件)
import React, { Component, PropTypes } from 'react';
export default class Title extends Component {
constructor(props) {
super(props);
}
static propTypes = {
title: PropTypes.string.isRequired
}
render() {
const { title } = this.props;
return (
<p>{ title }</p>
)
}}скопировать кодПроверка типов в Vue:
// title.vue (Title组件)
<template>
<p>{{ title }}</p>
</template>
<script>
export default {
props: {
title: {
type: String,
required: true
}
}
}
</script>скопировать код2. Проверка параметров функции
Проверка параметров функции, если проверка осуществляется традиционным методом. Значение и тип параметров оцениваются в верхней части функции.Если требования не выполняются, будет выдано исключение и будет выдано соответствующее приглашение.
Определяет первое обязательное поле функции и имеет формат String.
// ES6 语法
changeTitle(title) {
if (typeof title !== 'string') {
throw new Error('必须传入一个 title，才能修改 title。')
}
// 满足条件，可以进行修改
this.title = title // vue 语法
this.setState({ // react 语法，修改state的值
title
})
}скопировать кодЖизненный цикл
Компонент должен точно знать, что делать на разных этапах своего жизненного цикла.
На этапе инициализации прочитайте значение свойства, если вам нужно выполнить обработку данных и логику, сделайте это на этом этапе.
При изменении значения атрибута, если атрибут изменяется и измененные данные необходимо обработать, то на этом этапе они обрабатываются.
Этап уничтожения компонента. Если компонент создал что-то, что может иметь побочные эффекты в системе, его можно очистить на этом этапе. Например, timeInterval, тайм-аут и т. д.
Если компонент сообщает об ошибке при рендеринге, он должен отобразить сообщение об ошибке. Функция жизненного цикла componentDidCatch предоставляется в React v16, а функция ловушки errorCaptured — в Vue v2.5.
React предоставляет некоторые функции жизненного цикла: componentWillMount, componentDidMount, componentWillReceiveProps, shouldComponentUpdate, componentWillUpdate, componentDidUpdate, render, componentWillUnmount, componentDidCatch (React v16).
Vue предоставляет некоторые функции жизненного цикла: beforeCreate, created, beforeMount, Mount, beforeUpdate, update, beforeDestroy, destroy, errorCapture, errorCaptured (Vue v2.5).
Конкретное использование каждого жизненного цикла см. в официальной подробной документации.
доставка события
Передача событий в Vue очень проста. Вам нужно только использовать this.$emit('event1') в дочернем компоненте для передачи события event1. Когда родительский компонент вызывает дочерний компонент, вам нужно только прослушать событие event1 и дать Можно использовать соответствующую логику обработки событий.
Доставка событий в Vue
Определение дочернего компонента Vue
Vue.component('child-component', {
methods: {
emitEvent() {
this.$emit('event1', 'This is a event.')
}
},
mounted() {
this.emitEvent()
}
})скопировать кодРодительский компонент Vue вызывает дочерний компонент
<template>
<div>
<child-component @event1="eventHandler" />
</div>
</template>
<script>
import childComponent from './child-component'
export default {
components: {
childComponent
},
methods: {
eventHandler(event) {
console.log(event)
}
}
}
</script>скопировать кодВ React нет официального решения для доставки событий между компонентами, что также является подводным камнем в React. Однако есть и другие способы сделать это.
В React родительские компоненты могут использовать пропсы для передачи значений дочерним компонентам, в то время как дочерние компоненты передают значения родительским компонентам, вам нужно определить функции в родительском компоненте и передать их дочерним компонентам через свойства, и вызвать функцию, соответствующую свойству в дочернем компоненте, передать параметры, передать их функции в родительском компоненте и выполнить логическую обработку в функции родительского компонента.
Определение дочернего компонента React child-component.js
class ChildComponent extends React.Components {
render() {
return (
<button onClick={
() => {
this.props.clickHandler('This is a click')
}
}></button>
)
}
}скопировать кодРодительский компонент React вызывает дочерний компонент
import ChildComponent from './child-component'
class ParentComponent extends React.Components {
clickHandler(message) {
console.log(message)
}
render() {
return (
<child-component
clickHandler={ this.clickHandler.bind(this) }
/>
)
}
}скопировать кодпостскриптум
Практика компонентной разработки переднего плана — это длительный процесс, поэтому настойчивость и непрерывная оптимизация будут способствовать общей оптимизации системы.
Статья будет обновлена позже, чтобы рассказать о том, «как разработать сторонний компонент vue».
В будущем будет написано больше статей о React и Vue, так что следите за обновлениями.
Связанные прошлые статьи
Настройки и обновления Vue v2.5 не полностью объяснены.
Быстрый старт с рендерингом React Server с помощью Next.js
Эпоха фронтенда после разделения фронтенда и бэкенда