Функциональные компоненты внутри и вне класса React - PullRequest
Новая
       6

Функциональные компоненты внутри и вне класса React

1 голос
/ 09 января 2020

Мне интересно, каковы эффекты соединения / вложения функционального компонента в компонент класса React без явной передачи ему реквизитов через параметры и использования this.props через родительский класс. Я понимаю, что наличие функционального компонента вне компонента класса React легче тестировать и читать, но мне любопытно узнать, какова точная разница между использованием this.props против props через параметры с точки зрения производительности / визуализации.

Например: 

class Foo extends React.Component {
  bar = () => { return (<p>{this.props.baz}</p>) }

  render() {
    return (
      <h1>Hello, {this.props.name}</h1>
      {this.bar()}
    )
  }
}

Vs. 

class Foo extends React.Component {
  render() {
    return (
      <h1>Hello, {this.props.name}</h1>
      <Bar baz={'foobar'}
    )
  }
}
function Bar(props) {
  return <p>{props.baz}</p>
}

1 Ответ

3 голосов
/ 09 января 2020

Оба дают один и тот же результат, за исключением случаев, когда вы заботитесь о возможности повторного использования кода.

Если вам нужно повторно использовать функцию Bar, то лучше оставить ее вне class, чтобы вы могли import ее в другом месте .

Пример:

Если Bar отображает сообщение success или warning. Вы хотите сохранить одинаковый дизайн для всех предупреждающих сообщений в системе. Теперь, если каждый component имеет свой собственный код предупреждающего сообщения, вы не сможете легко редактировать дизайн предупреждающего сообщения, и вам придется снова и снова переписывать один и тот же код .

...