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被传递给类构造函数。因此，在该构造函数的上下文中，props作为参数传递，并且是局部变量

我建议你坚持一个模式，当你使用props作为参数传递给你使用的反应类的其他方法{ {1}}。这就是它的用途。还有一些东西可以说是一致的，所以无论你选择一个还是另一个坚持这种模式。如果你不遵循模式/保持一致，可能会令人困惑。

Answer 2

只有在constructor的React ES2015组件（非无状态函数组件）中，您才能在传递给构造函数时引用props。如果您在this.props === props中执行constructor，则评估为true。

但是在React中，您只能在致电this.props后使用super(props)。这是ES2015 Class spec。

的一部分

为简单起见，我通常只在props中使用constructor，在组件生命周期方法和this.props中使用render。

Answer 3

简单来说：

1.props.data用于功能组件 2.this.props.data用于Class组件

复制代码并在“ stackblitz”中运行-> https://stackblitz.com/edit/react-3wr8jb

以下代码显示了props.data和this.props.data中类和功能组件的用法

import React, { Component } from 'react';
import { render } from 'react-dom';

//=================PROPS=======================
//Both Class and Functional components have "properties" ie props
//properties are immutable->fixed->cant be changed

//=================================================
//props.data in functional components
function A1(props)
{
  return <h2>functional component->props.data:{props.data}</h2>
}
//===============================================
//this.props.data in class components
class A2 extends React.Component{
  render()
  {
    return<h2>class component->this.props.data:{this.props.data}</h2>
  }
}
//===================================================
var element1=
<div>
<hr/>
//data from class and functional component
<A1 data="Sample data" />
<A2 data="Sample data"></A2>
<hr />
</div>


render(element1, document.getElementById('root'));

在React.js中使用this.props和props有什么区别？

3 个答案: