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

我一直在交替使用

this.props

和

props

，而且在大多数情况下，它们之间似乎没有什么大的区别（据我所知）

然而，我最近遇到了一些问题，这些问题让我想到，什么时候以及为什么要用一个来代替其他的事情

这就是我目前交替使用它们的地方：

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

区别是什么？什么时候使用一个而不是另一个，在哪里？

---

谢谢

这完全取决于您使用的组件类型

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

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

const无状态组件=（道具）=>{
返回{props.something}；
}
类SomeComponent扩展组件{
建造师（道具）{
超级（道具）
}
render（）{
返回{this.props.something}；
}
}

在这里，您会注意到，在无状态组件中，它只是一个常规函数，没有任何

此

上下文。道具被传递给函数，因此我们已经可以访问它。
当你有了一个类，你就有了一个道具赖以生存的

上下文。

在类的构造函数中，道具被传递给类构造函数。因此，在该构造函数的上下文中，props函数作为参数传递，是一个局部变量

我建议您坚持一种模式，当您将props作为参数传递给您使用的函数时，使用
props
当您使用react类的其他方法时，使用
this.props
。这就是它的用途。同样，对于一致性也有一些说法，所以无论你选择其中一个还是另一个，都要坚持这种模式。如果你不遵循一种模式/保持事物的一致性，这可能会令人困惑。
这一切都取决于你使用的组件的类型

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

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

const无状态组件=（道具）=>{
返回{props.something}；
}
类SomeComponent扩展组件{
建造师（道具）{
超级（道具）
}
render（）{
返回{this.props.something}；
}
}

在这里，您会注意到，在无状态组件中，它只是一个常规函数，没有任何
此
上下文。道具被传递给函数，因此我们已经可以访问它。

当你有了一个类，你就有了一个道具赖以生存的
上下文。

在类的构造函数中，道具被传递给类构造函数。因此，在该构造函数的上下文中，props函数作为参数传递，是一个局部变量

我建议您坚持一种模式，当您将props作为参数传递给您使用的函数时，使用
props
当您使用react类的其他方法时，使用
this.props
。这就是它的用途。同样，对于一致性也有一些说法，所以无论你选择其中一个还是另一个，都要坚持这种模式。如果你不遵循一种模式/保持事物的一致性，这可能会令人困惑。
只有在React ES2015组件（非功能组件）的
构造函数中，你才能在传递到构造函数时引用
道具。如果在
构造函数中执行
this.props===props
，它将计算为
true

但是，在React中，您只能在调用
super（props）
后使用
this.props
。这是问题的一部分

为简单起见，我通常只在
构造函数
中使用
道具
，在组件生命周期方法中使用
道具
，在
渲染中使用
道具
仅在React ES2015组件（非功能组件）的
构造函数
中使用当它被传递到构造函数中时，您是否能够参考
props
。如果在
构造函数中执行
this.props===props
，它将计算为
true

但是，在React中，您只能在调用
super（props）
后使用
this.props
。这是问题的一部分

为简单起见，我通常只在
构造函数中使用
道具
，在组件生命周期方法和
渲染中使用
道具
，简单来说：



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



复制代码并在“stackblitz”->

下面的代码显示了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'));

import React，{Component}来自'React'；
从'react dom'导入{render}；
//=========================道具=======================
//类和函数组件都有“属性”即道具
//属性不可变->固定->无法更改
//=================================================
//功能组件中的props.data
功能A1（道具）
{
返回函数组件->props.data:{props.data}
}
//===============================================
//类组件中的this.props.data
A2类扩展了React.Component{
render（）
{
returnclass组件->this.props.data:{this.props.data}
}
}
//===================================================
变量元素1=

//来自类和功能组件的数据

render（element1，document.getElementById（'root'））；
简单来说：



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



复制代码并在“stackblitz”->

下面的代码显示了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'));

import React，{Component}来自'React'；
从'react dom'导入{render}；
//=========================道具=======================
//类和函数组件都有“属性”即道具
//属性不可变->固定->无法更改
//=================================================
//道具