В чем разница между использованием этого.props и реквизита в React.js?

Question

Я использовал this.props и props взаимозаменяемо, и по большей части между ними (насколько я могу судить, не существует существенной разницы).

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

Это где я в настоящее время используют их как взаимозаменяемые:

constructor(props, context) { 
    super(props, context); 
    this.data = props.card.data; 
    this.dataLength = this.props.card.data.length; 
    } 

В чем разница и когда вы используете один над другим, и где? Спасибо!

Answer 1

Все зависит от типа используемого компонента.

const StatelessComponent = (props) => { 
    return <div>{props.something}</div>; 
} 

class SomeComponent extends Component { 
    constructor(props){ 
     super(props) 
    } 
    render() { 
     return <div>{this.props.something}</div>; 
    } 
} 

Здесь можно заметить, что в безгосударственной компоненте это просто регулярная функция без this контекста. Реквизиты передаются функции, поэтому мы уже имеем к ней доступ.
Когда у вас есть класс, у вас есть контекст this, в котором живут реквизиты.
В конструкторе класса реквизит передается конструктору класса. Таким образом, в контексте этой функции конструктора реквизита передается в качестве аргумента и является локальной переменной

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

Answer 2

Только в constructor компонентов React ES2015 (компоненты без функции без состояния) вы сможете обращаться к props, поскольку он передается в конструктор. Если вы делаете this.props === props в constructor, он будет оценивать true.

Однако в React вы можете использовать только this.props после того, как вы позвоните super(props). Это часть ES2015 Class spec.

Для простоты я обычно просто использовать исключительно props в пределах constructor и this.props в рамках методов жизненного цикла компонентов и в render.