Компоненты высшего порядка: шаблон проектирования приложения React

Эта статья написана гостем Джеком Франклином . Гостевые посты SitePoint нацелены на привлечение интересного контента от известных авторов и спикеров сообщества JavaScript.

В этой статье мы обсудим, как использовать Компоненты высшего порядка, чтобы ваши приложения React были аккуратными, хорошо структурированными и простыми в обслуживании. Мы обсудим, как чистые функции поддерживают чистоту кода и как эти же принципы можно применять к компонентам React.

Чистые функции

Функция считается чистой, если она придерживается следующих свойств:

• все данные, с которыми он имеет дело, объявляются как аргументы
• он не изменяет данные, которые ему были предоставлены, или любые другие данные (их часто называют побочными эффектами )
• при одинаковом входе он всегда будет возвращать один и тот же вывод.

Например, функция add ниже является чистой:

 function add(x, y) { return x + y; } 

Однако функция badAdd ниже нечиста:

 var y = 2; function badAdd(x) { return x + y; } 

Эта функция не является чистой, потому что она ссылается на данные, которые не были переданы напрямую. В результате можно вызвать эту функцию с одним и тем же вводом и получить другой вывод:

 var y = 2; badAdd(3) // 5 y = 3; badAdd(3) // 6 

Чтобы узнать больше о чистых функциях, вы можете прочитать « Введение в достаточно чистое программирование » Марка Брауна.

Хотя чистые функции очень полезны и значительно упрощают отладку и тестирование приложения, иногда вам нужно создавать нечистые функции с побочными эффектами или изменять поведение существующей функции, к которой у вас нет прямого доступа (функция из библиотеки, например). Чтобы включить это, нам нужно взглянуть на функции высшего порядка.

Функции высшего порядка

Функция более высокого порядка — это функция, которая при вызове возвращает другую функцию. Часто они также принимают функцию в качестве аргумента, но это не обязательно для функции, которая должна рассматриваться как более высокого порядка.

Допустим, у нас есть наша функция add сверху, и мы хотим написать некоторый код, чтобы при вызове мы записывали результат в консоль, прежде чем возвращать результат. Мы не можем редактировать функцию add , поэтому вместо этого мы можем создать новую функцию:

 function addAndLog(x, y) { var result = add(x, y); console.log('Result', result); return result; } 

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

 function logAndReturn(func) { return function() { var args = Array.prototype.slice.call(arguments); var result = func.apply(null, args); console.log('Result', result); return result; } } 

Теперь мы можем взять эту функцию и использовать ее для добавления логирования, чтобы add и subtract :

 var addAndLog = logAndReturn(add); addAndLog(4, 4) // 8 is returned, 'Result 8' is logged var subtractAndLog = logAndReturn(subtract); subtractAndLog(4, 3) // 1 is returned, 'Result 1' is logged; 

logAndReturn — это HOF, потому что он принимает функцию в качестве аргумента и возвращает новую функцию, которую мы можем вызвать. Они действительно полезны для упаковки существующих функций, которые нельзя изменить в поведении. За дополнительной информацией обращайтесь к статье М. Дэвида Грина « Функции высшего порядка в JavaScript », в которой более подробно рассматривается эта тема.

Кроме того, вы можете проверить этот CodePen , который показывает приведенный выше код в действии.

 <Link to="/" activeClassName="active-link">Home</Link> <Link to="/about" activeClassName="active-link">About</Link> <Link to="/contact" activeClassName="active-link">Contact</Link> 

 var AppLink = React.createClass({ render: function() { return ( <Link to={this.props.to} activeClassName="active-link"> {this.props.children} </Link>; ); } }); 

 <AppLink to="/">Home</AppLink> <AppLink to="/about">About</AppLink> <AppLink to="/contact">Contact</AppLink> 

 var App = React.createClass({ render: function() { return <p>My name is { this.props.name }</p>; } }); var App = function(props) { return <p>My name is { props.name }</p>; } 

 var props = { a: 1, b: 2}; <Foo a={props.a} b={props.b} /> <Foo {...props} /> 

 var AppLink = function(props) { return <Link {...props} activeClassName="active-link" />; } 

 <AppLink to=“/special-link” activeClassName=“special-active”>Special Secret Link</AppLink> 

 return <Link {...props} activeClassName="active-link" />; 

 return <Link activeClassName="active-link" {...props} />; 

 function wrapWithUser(Component) {  

 var AppHeader = function(props) { if (props.user) { return <p>Logged in as {props.user.name}</p>; } else { return <p>You need to login</p>; } } 

 var ConnectedAppHeader = wrapWithUser(AppHeader);