一、最简单的函数组件 

1、创建组件

// 方式一：
function Welcome(props) {
  return <h1>Hello, {props.name}h1>;
}
 
// 方式二：
class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}h1>;
  }
}

上述函数就是一个react组件，因为它接收唯一带有数据的“props”对象，并返回一个React元素。这类组件被称为“函数组件”，因为其本质上就是JavaScript函数

特征：

        1、本身是一个函数

        2、接收props（属性对象）

        3、返回React元素

2、使用组件

const element = <Welcome name="Sara" />;
ReactDOM.render(
  element,
  document.getElementById('root')
);

3、发生了什么？

• 调用ReactDOM.render()函数，并将作为参数
• React调用Welcome组件，并将name="Sara"作为props传入
• Welcome会将

  Hello, Sara

  元素作为返回值
• React DOM将浏览器DOM更新为

  Hello, Sara

4、props

无论是通过哪种方式声明出来的（函数声明 和 class声明），都是坚决不能修改自身的props的。

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

纯函数：

        在函数中不会尝试更改入参，且多次调用下相同的入参始终返回相同的结果