性能：在 React 中调度动作与作为道具传递

Question

I have a technical question. I am trying to pass a value from child component to store by using action dispatcher inside my child component. This action dispatcher then updates the state value in the reducer.

Is it advisable to pass value from the child component this way? will it affect the performance of the react app?

Or should I use props to pass from child to parent component and then update the state.

Please advise as I searched a lot about this but didn't get any info.

Answer 1

Problem with passing dispatcher to your child is your child component is not very reusable. I would suggest to pass a callback method to your child which contains the logic of dispatching the event.

Parent:

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

Child Component:

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

Now with this approach your child approach doesn't carry any business logic. It can be used at multiple places.