在React ES6中，构造函数传入prop而非props为何不报错？

这个问题其实涉及到React类组件构造函数的底层逻辑，以及JavaScript函数参数的本质——别担心，这不是什么bug，而是语言和框架设计的特性：

• 参数名只是约定，不是强制要求
  React在实例化类组件时，会把组件的props对象作为第一个参数传递给构造函数。这个参数叫什么名字完全由你决定——props只是社区约定的规范命名，换成prop、myProps甚至p都不影响React传递参数的逻辑。只要你在构造函数里正确接收了这个参数，它就会指向真实的props对象。

• 只要把接收的参数传给super，this.props就能正常初始化
  你代码里的关键是调用了super(prop)——这里你把命名为prop的参数传递给了父类Component的构造函数。React的Component基类构造函数会把传入的这个参数赋值给实例的this.props，所以后续组件的render方法或者其他生命周期里，this.props依然能正确访问到组件的props。

  举个例子，下面这段代码和你的写法本质一样，也能正常运行：

  class App extends Component{
    constructor(myCustomPropsName){
      super(myCustomPropsName);
      // 如果这里要访问props，用myCustomPropsName就行，或者this.props（因为super已经初始化了）
    }
    render(){
      return <div>{this.props.title}</div>; // 完全正常
    }
  }
  

• 什么时候才会出问题？
  只有两种情况会导致props相关的错误：

  1. 你在构造函数里没有把接收的参数传给super，同时又在构造函数里直接访问this.props——这时this.props会是undefined，因为Component的构造函数没收到props参数，没法初始化它。不过在构造函数之外的方法（比如render）里，this.props依然能正常拿到，因为React会在构造函数执行完后手动把props挂载到实例上。
  2. 你在构造函数里想用参数名访问props，但写错了名字（比如参数是prop，你却写props）——这时会报未定义的错误，但你代码里没这么做，所以没问题。

总结一下：你只是打破了命名规范，但没有破坏React传递和初始化props的逻辑，所以代码能正常运行。当然，还是建议遵循props的命名约定，这样其他开发者看代码时不会困惑~

内容的提问来源于stack exchange，提问作者guilemon