React는 컴포넌트를 렌더링 한 후 전체 앱을 다시 렌더링합니다.

내 웹 앱에서 react 및 redux를 사용합니다. 4 개의 구성 요소, 하나의 감속기 및 3 개의 동작이있는 간단한 앱입니다. 목록에 새 항목을 추가 한 후 react는 목록의 구성 요소 (listItem)를 렌더링 한 다음 전체 앱을 다시 렌더링합니다. 하나의 구성 요소를 렌더링 한 후 전체 앱을 다시 렌더링하는 원인은 무엇입니까?

업데이트 :

앱 컨테이너 :

class App extends Component {

    static propTypes = {
        groups: PropTypes.array.isRequired,
        actions: PropTypes.object.isRequired
    };

    render() {
        return (<div>
            <Header addGroup={this.props.actions.addGroup} />
            <List groups={this.props.groups} />
        </div>
        );
    }
}

function mapStateToProps(state) {
    return { groups: state.groups };
}

function mapDispatchToProps(dispatch) {
    return { actions: bindActionCreators(AppActions, dispatch) };
}

export default connect(mapStateToProps, mapDispatchToProps)(App);

줄이다:

export default function groupDiseases(state = initialState, action){
    switch (action.type) {
        case ADD_GROUP:
            return [
            {
                id: '',
                name: action.name
            },
            ...state
        ];

        case DELETE_GROUP:
             return state.filter(group =>
                group.id !== action.id
            );

        case EDIT_GROUP:
            return state.map(group => (group.id === action.id ? { id: action.id, name: action.name } : group));

        default:
            return state;
    }
}

구성품 :

export default class Add extends Component {

    static propTypes = {
        addGroup: PropTypes.func.isRequired
    }

    componentDidMount() {
        this.textInput.focus();
    }

    handleAdd = () => {
       const name = this.textInput.value.trim();
        if (name.length !== 0) {
            this.props.addGroup(name);
            this.textInput.value = '';
        }
    }

    render() {
        return (
        <form className="add_form">
            <input
                type="text"
                className="add__name"
                defaultValue=""
                ref={(input) => this.textInput = input}
                placeholder="Name" />
            <button
                className="add__btn"
                ref="add_button"
                onClick={this.handleAdd}>
                Add
            </button>
        </form>
       );
   }
}

export default class ListGroups extends Component {

    static propTypes = {
        groups: PropTypes.array.isRequired
    };

    render() {
        let data = this.props.groups;
        let groupTemplate = <div> Группы отсутствуют. </div>;
        if (data.length) {
            groupTemplate = data.map((item, index) => {
                return (
                <div key={index}>
                    <Item item={item} />
                </div>
                );
           });
       }

       return (
        <div className="groups">
            {groupTemplate}
            <strong
                className={'group__count ' + (data.length > 0 ? '' : 'none')}>
                Всего групп: {data.length}
            </strong>
        </div>
        );
    }
}