React是如何识别this.props的？未定义props为何可直接使用？

props 既不是JavaScript原生关键字，也不是React的保留关键字，你感知到的「无定义即可使用」是React组件初始化流程自动注入的结果，具体逻辑如下：

类组件中this.props的来源 #

• 你编写的类组件只要继承了React.Component，React在实例化该组件类时，会自动把父组件传递的属性、组件配置的defaultProps合并后，作为实例属性挂载到组件实例上，你访问的this.props就是这个提前被框架赋值好的属性。
• 如果你手动编写类组件的构造函数就会发现，我们需要主动接收props参数并调用super(props)，这一步本质是把React传过来的props交给父类React.Component的构造函数处理，父类会完成挂载到this的操作，示例如下：

class DemoComponent extends React.Component {
  // 此处props是React实例化组件时传入的参数
  constructor(props) {
    super(props)
    // 调用super后即可正常访问this.props
    console.log(this.props)
  }

  render() {
    return <span>{this.props.text}</span>
  }
}

• 如果你没有手动写构造函数，React会给类组件默认注入一个隐式构造函数，自动完成「接收props、调用super(props)」的逻辑，所以你省略constructor也能直接访问this.props，只是这个初始化过程你没有感知到。

函数组件中props的来源 #

函数组件的props同理，是React渲染组件时自动作为第一个参数传入函数的，不需要你手动定义传参来源：

// props由React调用组件函数时自动传入
function DemoComponent(props) {
  return <span>{props.text}</span>
}

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