From f6c6cd007535137e1b692eecb23735431882ef5b Mon Sep 17 00:00:00 2001 From: Vitaly Takmazov Date: Mon, 5 Nov 2018 13:09:30 +0300 Subject: Memoizing Contact, Icon and Message --- vnext/src/components/Contact.js | 24 ++++++++++----------- vnext/src/components/Icon.js | 46 +++++++++++++++++++---------------------- vnext/src/components/Message.js | 13 ++++++------ 3 files changed, 38 insertions(+), 45 deletions(-) diff --git a/vnext/src/components/Contact.js b/vnext/src/components/Contact.js index 300b650b..787acd57 100644 --- a/vnext/src/components/Contact.js +++ b/vnext/src/components/Contact.js @@ -3,20 +3,18 @@ import { UserType } from './Types'; import Avatar from './Avatar'; -export default class Contact extends React.Component { +const Contact = React.memo(({user, ...rest}) => { + return ( + <> + + {user.unreadCount && {user.unreadCount}} +
{user.lastMessageText}
+
+ + ); +}); - render() { - const { user } = this.props; - return ( - <> - - {user.unreadCount && {user.unreadCount}} -
{user.lastMessageText}
-
- - ); - } -} +export default Contact; Contact.propTypes = { user: UserType diff --git a/vnext/src/components/Icon.js b/vnext/src/components/Icon.js index 0a4c7dbc..faf1a704 100644 --- a/vnext/src/components/Icon.js +++ b/vnext/src/components/Icon.js @@ -1,39 +1,35 @@ import React from 'react'; import PropTypes from 'prop-types'; -export default class Icon extends React.Component { - constructor(props) { - super(props); - } +const Icon = React.memo(props => { + var size = props.size ? ' icon--' + props.size : ''; + var className = props.className ? ' ' + props.className : ''; + var klass = 'icon' + (!props.noFill ? ' icon--' + props.name : '') + size + className; - render() { - var size = this.props.size ? ' icon--' + this.props.size : ''; - var className = this.props.className ? ' ' + this.props.className : ''; - var klass = 'icon' + (!this.props.noFill ? ' icon--' + this.props.name : '') + size + className; + var name = '#' + props.name + '-icon'; + var useTag = ''; + var Icon = React.createElement('svg', { className: 'icon__cnt', dangerouslySetInnerHTML: { __html: useTag } }); + return React.createElement( + 'div', + { className: klass }, + wrapSpinner(Icon, klass) + ); +}); - var name = '#' + this.props.name + '-icon'; - var useTag = ''; - var Icon = React.createElement('svg', { className: 'icon__cnt', dangerouslySetInnerHTML: { __html: useTag } }); +function wrapSpinner(Html, klass) { + if (klass.indexOf('spinner') > -1) { return React.createElement( 'div', - { className: klass }, - this.wrapSpinner(Icon, klass) + { className: 'icon__spinner' }, + Html ); - } - - wrapSpinner(Html, klass) { - if (klass.indexOf('spinner') > -1) { - return React.createElement( - 'div', - { className: 'icon__spinner' }, - Html - ); - } else { - return Html; - } + } else { + return Html; } } +export default Icon; + Icon.propTypes = { size: PropTypes.string.isRequired, name: PropTypes.string.isRequired, diff --git a/vnext/src/components/Message.js b/vnext/src/components/Message.js index 1ecbf996..f303d5eb 100644 --- a/vnext/src/components/Message.js +++ b/vnext/src/components/Message.js @@ -9,7 +9,7 @@ import Avatar from './Avatar'; import { format } from '../utils/embed'; -export default function Message({ data, visitor, children, ...rest }) { +const Message = React.memo(({ data, visitor, children, ...rest }) => { return (
@@ -80,16 +80,15 @@ export default function Message({ data, visitor, children, ...rest }) { )} - {data.FriendsOnly && ( - Открыть доступ - )} {children}
); -} +}); + +export default Message; -function Tags({ data, user, ...rest }) { +const Tags = React.memo(({ data, user, ...rest }) => { return data.length > 0 && (
{ @@ -99,7 +98,7 @@ function Tags({ data, user, ...rest }) { }
); -} +}); Message.propTypes = { data: MessageType, -- cgit v1.2.3