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

我在我的web应用程序中使用react和redux。这是一个简单的应用程序，它有四个组件，一个减速器和三个动作。在向列表中添加一个新条目后，对列表（listItem）的呈现组件进行反应，然后重新呈现整个应用程序。渲染一个组件后重新渲染整个应用程序的原因是什么？React在渲染组件后重新渲染整个应用程序

更新时间：

应用程序容器：

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

来源

2016-11-15 Evgeniy Ilyushin

你注意到任何视觉故障？有什么问题吗？ – azium

你需要更具描述性，如向我们展示组件至少 – Anup

@Anup我添加了一些片段。感谢您的帮助:) –

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

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

具体而言，没有类型属性的按钮，将默认为提交。所以你的按钮是告诉表单提交，目标是当前页面，因为没有提供。在你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"。

来源

2016-11-15 18:47:30

非常感谢！你是对的。我没有想到它:) –

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

回答

相关问题