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在渲染組件後重新渲染整個應用程序

回答

相關問題