前端框架react----组件+props

目录

一、普通组件（函数式组件）

二、props

 三、有状态组件（类组件）

---

一、普通组件（函数式组件）

定义组件最简单的方式就是编写 JavaScript 函数：

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

该函数是一个有效的 React 组件，因为它接收唯一带有数据的 “props”（代表属性）对象与并返回一个 React 元素。这类组件被称为“函数组件”，因为它本质上就是 JavaScript 函数。 

知识点：

1、通过JS中的函数创建组件，通过将函数名作为标签名称为渲染。

2、使用函数组件的时候，必须要有return语句，并且必须返回内容，如果什么也不想返回，那么就需要些return null。

3、组件的名称必须是大写字母开头（函数名），react内部通过首字母大小写来判断是组件还是普通的DOM元素。 

4、return的内容最好使用小括号包裹，避免造成解析错误。

5、返回的JSX结构，必须有一个根元素。

6、在渲染的时候，标签的名字就是组件名。

什么是DOM元素，举个例子就明白了：

const element = <div />;

二、props

使用普通函数创建 JSX 元素，那么，如果我们需要进行组件传递数据应该怎么操作呢

 知识点：

1、props是一个对象，里面包含组件传来的所有数据，以后我们将会用它来连接父子页面或者父子框架之间的数据交互。

2、如果要给组件传递数据，只需要将传递的数据作为组件的属性即可。

3、在组件中，通过函数的参数props来获取组件传来的值。

4、可以给组件传递任意类型的数据。

5、props这个对象是只读的不可更改。

 三、有状态组件（类组件）

我们也可以使用 class 去创建一个有状态的组件,在 class 中的 render 函数中直接使用 this.props 的方式获取组件传递的数据

 知识点：

1、使用class的组件继承子React.Component

2、必须有一个render方法

3、render方法中必须有return，要么返回一段内容，要么返回null，不能为空

4、在方法中，通过this.props获取到传递给组件的数据，这里注意this指向问题，建议使用箭头函数，可以避免this指向错误。