React 在渲染组件后重新渲染整个应用程序答案

【问题标题】：React re-renders whole app after rendering a componentReact 在渲染组件后重新渲染整个应用程序
【发布时间】：2016-11-15 15:17:09
【问题描述】：

我在我的网络应用程序中使用 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);

Reduser：

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>
        );
    }
}

【问题讨论】：

您是否注意到任何视觉故障？有什么事吗？
您需要更具描述性，例如至少向我们展示组件
@Anup 我添加了一些 sn-ps。谢谢你的帮助:)
@azium 不，一切正常。
也许我不明白你的问题。如果应用程序运行正常，那么您想知道什么？每当进行状态更改时，React 都会在您的应用程序上递归调用 render，这是设计使然。但除非 React 的 diff/patch 算法发现差异，否则不会进行 DOM 更新。

标签： reactjs redux react-redux

【解决方案1】：

这可能是因为您让<form> 继续其默认行为，即提交到目标action。看看 w3c 的按钮规范：

http://w3c.github.io/html-reference/button.html

具体来说，没有 type 属性的按钮将默认提交。所以你的按钮告诉表单提交，目标是当前页面，因为没有提供。在您的 handleAdd 方法中，您可以执行以下操作：

handleAdd = (event) => {
   event.preventDefault(); // prevent default form submission behavior
   const name = this.textInput.value.trim();
    if (name.length !== 0) {
        this.props.addGroup(name);
        this.textInput.value = '';
    }
}

或者您可以将按钮修改为type="button"。

【讨论】：

非常感谢！你说的对。我没想到：）