【04】react组件和props接收参数

在react应用中，可以使用两种方式来定义组件：函数和class类，

函数组件

import React from "react";
function Func_component(props) {
    return <div>
        <h2>这是一个函数组件：</h2>
        <p>{props.name}</p>
    </div>
}

export default Func_component

class类组件

import React from "react";

class Class_Component extends React.Component {
    render() {
        return <div>
            <h2>这是一个react的class组件</h2>
            <p>{this.props.name}</p>
        </div>
    }
}


export default Class_Component

当react应用在渲染我们所定义的组件之后，react会把jsx接收到的属性或者子组件转化为单个对象传递给组件，这个对象就是“props”。props只是用来接收父组件传给子组件的参数而已，它并不是组件本身自己的数据，所以组件的Props具有不可更改的特征，这就是react的一个规则：

所有 React 组件都必须像纯函数一样保护它们的 props 不被更改。

组件如何接收接收props？

先说我们常见的函数组件，和我们在刚开始学习编程的时候一样，我们在定义一个方法的时候，根据需求会接收一些参数。那么react应用中，这样的方法就是“组件”。同样，在函数组件中接收父组件传递过来的参数也需要定义些“形参”，通过形参来接收父组件传过来的“实参”。如以上的函数组件代码中，在定义组件时，设置形参“props”，它是一个包含了组件属性和子组件的一个对象。

在class组件内直接通过this.props来接收父组件传过来的参数值。