Реактивный компонент, кажется, повторно рендерит на моем событии

Question

У меня есть следующий код в моем приложении реакции,

<CommentModal show={this.state.commentModal}
    handleClose={this.hideModal}
    handleChange={this.handleCommentChange}
    handleSubmit={this.handleCommentSubmit}
    textareaValue={this.state.comment}
/>

Функция изменения ручки выглядит следующим образом:

handleCommentChange(e) {
    this.setState({
        [e.target.id] : e.target.value
    })
}

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

https://www.useloom.com/share/8f27de7a341f408b807c11c62d3c1cf3

Воткод commentModal,

import React, { Component } from 'react';

импорт в стиле из 'styled-components';

класс CommentModal расширяет компонент {

constructor(props) {
    super(props);
}

render() {
    const ModalWrapper = styled.div`
        position: fixed;
        top: 0;
        left: 0;
        width:100%;
        height: 100%;
        background: rgba(255, 255, 255, 0.9);
        display:none;
        z-index:999;
        &.display-block {
            display:block;
        }
    `;

    const ModalBody = styled.div`
        position:fixed;
        width: 41%;
        height: 53%;
        top:50%;
        left:50%;
        transform: translate(-50%,-50%);
        position:relative;
        display:flex;
        form {
            width:100%;
            height:100%;
            display: flex;
            flex-direction: column;
            textarea {
                width:100%;
                height:calc(100% - 54px);
                resize:none;
                border:0 none;
                color:#fff;
                padding:50px 40px;
                background: black;
                border-radius:15px 15px 0px 0px;
                outline:0 none;
                padding-bottom:20px;
                &::-webkit-input-placeholder {
                    color:#8e8e93;
                }
            }

        }

        button {
            width:100%;
            flex:1;
            background-color:#22cae5;
            width:100%;
            border-radius:0px 0px 15px 15px;
            color:#fff;
            margin-top:auto;
            border:none;
            padding:15px 0px;
            position:absolute;
            left:0;
            bottom:0;
        }
    `;

    const CloseModal = styled.div`
        height:60px;
        width:60px;
        border-radius:100%;
        background-color:#22cae5;
        color:#fff;
        text-align:center;
        line-height:60px;
        position:absolute;
        top:-15px;
        right:-15px;
        font-size:1.5em;
    `;

    return(
        <ModalWrapper className={this.props.show ? 'display-block' : 'display-none'}>
            <ModalBody>
                <CloseModal onClick={this.props.handleClose}>X</CloseModal>
                <form action="/" onSubmit={this.props.handleSubmit}>
                    <textarea id="comment" key="comment" placeholder="Start typing your comment here..." value={this.props.textareaValue} onChange={this.props.handleChange}></textarea>
                    <button type="submit">Add Comment</button>
                </form>
            </ModalBody>
        </ModalWrapper>
    );
}

}

exportdefaultModal по умолчанию;

Answer 1

Похоже, вы должны использовать хук жизненного цикла shouldComponentUpdate().

По сути, он позволяет компоненту перерисовываться только при определенных изменениях, вы можете указать их в этом хуке и в противном случае вернуть false..

https://developmentarc.gitbooks.io/react-indepth/content/life_cycle/update/using_should_component_update.html

Answer 2

setState запускает рендеринг компонента. Смотрите здесь