性能：在 React 中調度動作與作為道具傳遞

Question

我有一個技術問題。 我試圖通過在我的子組件中使用動作調度程序將一個值從子組件傳遞到存儲。 然后，此操作調度程序更新減速器中的 state 值。

以這種方式從子組件傳遞值是否可取？ 它會影響反應應用程序的性能嗎？

或者我應該使用道具從子組件傳遞到父組件，然后更新 state。

請告知，因為我對此進行了很多搜索，但沒有得到任何信息。

Answer 1

將調度程序傳遞給您的孩子的問題是您的孩子組件不是很可重用。 我建議將回調方法傳遞給您的孩子，其中包含調度事件的邏輯。

家長：

class ParentComponent extends React.Component {

  loginHandler(){
    ...
    this.props.someMethod();
  }

  render() {
    return {
      ...
      <ChildComponent click="loginHandler"></ChildComponent>
      ...
    }
  }
}
const mapDispatchToProps = dispatch => {
  return {
    // dispatching plain actions
    ...
    someMethod: () => dispatch({ ... }),
    ...
  }
}
export default connect(null, mapDispatchToProps)(ParentComponent);

子組件：

function ChildComponent({click}) {
  return {
    ...
    <button click={click}></button>
    ...
  }
}

現在使用這種方法，您的子方法不帶有任何業務邏輯。 它可以在多個地方使用。