React 组件基础

目录

1、React 组件的两种创建方式

1.1 使用函数创建组件

1.2 使用类创建组件

1.3 抽离为独立 JS 文件

2、React 事件处理

2.1 事件绑定

2.2 事件对象

2.3 事件绑定，传递额外参数

3、组件状态

3.1 初始化状态

3.2 读取状态

3.3 修改状态

4、 事件绑定 this 指向

4.1 箭头函数

4.2 Function.prototype.bind()

4.3 class 的实例方法

5、表单处理

5.1 受控组件

5.2 非受控表单组件

什么是组件？

组件就相当于页面中的部分功能，然后我们像搭积木一样，将不同的组件组合起来，然后实现一个完整地页面功能。

组件的特点：可复用，独立，可组合。

1、React 组件的两种创建方式

React 组件 有两种创建方式，函数组件和类组件。

1.1 使用函数创建组件

使用函数创建组件前，我们要知道一些创建的规则。

1. 组件的名称必须首字母大写，react内部会根据这个来判断是组件还是普通的HTML标签。
2. 函数组件必须有返回值，表示该组件的 UI 结构；如果不需要渲染任何内容，则返回 null。
3. 组件就像 HTML 标签一样可以被渲染到页面中。组件表示的是一段结构内容，对于函数组件来说，渲染的内容是函数的返回值就是对应的内容。
4. 使用函数名称作为组件标签名称，可以成对出现也可以自闭合。

代码演示：

效果：

1.2 使用类创建组件

创建规则：

1. 类名称也必须以大写字母开头。
2. 类组件应该继承 React.Component 父类，从而可以使用父类中提供的方法或属性。
3. 类组件必须提供 render() 方法。
4. render() 方法必须有返回值，表示该组件的结构

效果：

1.3 抽离为独立 JS 文件

项目中的组件多了之后，全都写在一个地方，就会显得很乱，这时候我们就可以将每个组件放到单独的js 文件中去。

1、创建 Hello.js 文件，在里面创建好组件并导出

2、在 app.js 中导入并渲染

3、效果

2、React 事件处理

2.1 事件绑定

React 事件绑定语法与 DOM 事件语法相似

• 语法：on 事件名称={事件处理程序}，比如：onClick={() => {}}
• 注意：React 事件采用驼峰命名法，比如：onMouseEnter、onFocus

示例：

Hello.js

app.js

效果：

2.2 事件对象

看完 事件绑定 ，现在我们来了解事件对象 e , 然后如何获取，在某些场景下，比如说阻止我们的默认行为，我们就可能会用到我们的事件对象 e 。

1. 可以通过事件处理程序的参数获取到事件对象 e
2. React 中的事件对象叫做：合成事件（对象）
3. 合成事件：兼容所有浏览器，无需担心跨浏览器兼容性问题

案例 ：

图中的绑定事件里，我使用了 a 标签 ，大家知道 a 标签都是默认进行跳转的 ，但是 我在 定义 事件回调的那里阻止了默认行为 ，接下来 我们 直接看效果。

它并没有进行跳转。

2.3 事件绑定，传递额外参数

有的时候，我们需要传递一些自己需要的参数，那这个时候该怎么做？很简单，我们直接看示例

效果 ：

3、组件状态

一个前提：在react hook出来之前，函数式组件是没有自己的状态的，所以我们统一通过类组件来讲解

步骤：初始化状态 ——>读取状态——>修改状态——>影响视图

3.1 初始化状态

• 通过class的实例属性state来初始化
• state的值是一个对象结构，表示一个组件可以有多个数据状态

State.js

3.2 读取状态

通过this.state来获取状态

3.3 修改状态

4、 事件绑定 this 指向

1. 箭头函数
2. Function.prototype.bind()
3. class 的实例方法

4.1 箭头函数

• 利用箭头函数自身不绑定this的特点
• render() 方法中的 this 为组件实例，可以获取到 setState()

4.2 Function.prototype.bind()

利用ES5中的bind方法，将事件处理程序中的this与组件实例绑定到一起

4.3 class 的实例方法

• 利用箭头函数形式的class实例方法
• 注意：该语法是实验性语法，但是，由于babel的存在可以直接使用

大家喜欢哪一种呢？

5、表单处理

1. 受控组件 （推荐） 2. 非受控组件（DOM方式）

5.1 受控组件

什么是受控组件？ input框自己的状态被React组件状态控制

React组件的状态的地方是在state中，input表单元素也有自己的状态是在value中，React将state与表单元素的值（value）绑定到一起，由state的值来控制表单元素的值，从而保证单一数据源特性。

React 中可变状态通常保存在 state 中，只能通过 setState() 方法来修改。

5.2 非受控表单组件

什么是非受控组件？

非受控组件就是通过手动操作dom的方式获取文本框的值，文本框的状态不受react组件的state中的状态控制，直接通过原生dom获取输入框的值。