Хорошая практика для передачи функции в реквизитах?

Question

Я знаю, что React действительно отличает this.state. Но когда вы находитесь в дочернем компоненте, diff выполняется на this.props. Поэтому мне было интересно, как отличается система diff, если значение prop является функцией? Является ли это плохой практикой (как в случае плохого для перфоратора или чего-то еще), если я помещаю функцию в this.props или this.state?

Answer 1

Если вы передадите дочернюю компоненту функцию как props, то алгоритм diff будет постоянно запускаться. Если вам интересно об этом случае, вы можете реализовать shouldComponentUpdate, где вы можете игнорировать свойства, содержащие функции.

Вы можете экспериментировать с this example

Answer 2

Пропустите несвязанную функцию компоненты ребенка, и у ребенка использовать метод экземпляра, например:

class Container extends Component { 

    deleteItem(index) { 
     actionThatDeletesSomething(index); 
    } 

    render(){ 
     return(
      <ChildComponent deleteItem={ this.deleteItem } /> 
     ) 
    } 
} 


class ChildComponent extends Component { 

    render(){ 
     return(
      <a onClick={ this.props.deleteItem(index) } /> 
     ) 
    } 
}