React 组件基础

目录

1. React 组件介绍

2. React 组件的两种创建方式

2.1 使用函数创建组件

2.2 使用类创建组件

2.3 抽离为独立 JS 文件

3. React 事件处理 

3.1 事件绑定

在函数组件中绑定事件：

     在类组件中绑定事件：

3.2 事件对象(e)

4. 有状态组件和无状态组件 

5. 组件中的 state 和 setState

5.1 state的基本使用

5.2 setState()修改状态

5.3 从 JSX 中抽离事件处理程序

6. 事件绑定 this 指向 

1. 箭头函数

2. Function.prototype.bind()

3. class 的实例方法（重点推荐）

7. 表单处理 

7.1 受控组件

使用步骤：

1.在 state 中添加一个状态，作为表单元素的value值（控制表单元素值的来源）

2.给表单元素绑定 change 事件，将 表单元素的值 设置为 state 的值（控制表单元素值的变化）

受控组件示例总结：

多表单元素优化：

多表单元素优化步骤：

7.2 非受控组件

使用步骤：

1.调用 React.createRef() 方法创建一个 ref 对象

2.将创建好的 ref 对象添加到文本框中

3.通过 ref 对象获取到文本框的值

总结： 

---

 

1. React 组件介绍

组件是 React 的 一等公 民 ，使用 React 就是在用组件

组件表示页面中的部分功能

组合多个组件实现完整的页面功能

特点：可复用、独立、可组合

 

2. React 组件的两种创建方式

2.1 使用函数创建组件

函数组件：使用 JS 的函数（或箭头函数）创建的组件

约 定1： 函数名称必须以 大写 字 母开头

约 定2：函数组 件 必须有返回 值 ，表示 该 组件的 结 构

如果返回值为 null， 表示不渲染任何 内 容

function Hello() {
    return (
        <div>这是我的第一个函数组件！</div>
    )
}

渲染函数组件 ： 用函数名作为组 件 标签名

组件标签可以是单标签也可以是 双 标签

function Hello() {
    return (
        <div>这是我的第一个函数组件！</div>
    )
}
ReactDOM.render(<Hello />, root)

使 用 JS 中的函数创建的组件叫做： 函 数组件

函数组件必须有返回值

组件名称必须以大写字母开头， React 据此区 分 组 件 和 普通的React 元素

使用函数名作为组件标签名

function Hello() {
    return (
        <div>这是我的第一个函数组件！</div>
    )
}
ReactDOM.render(<Hello />, root)

2.2 使用类创建组件

类组件：使用 ES6 的 class 创建的组件

约 定1： 类名称也必须以 大写 字 母开头

约 定2： 类组件应该继 承 React.Component 父类，从而可以使用父类中提供 的 方法或 属 性

约 定3： 类组件必须提 供 render() 方法

约 定4：render() 方法 必须有返回值 ，表示该 组 件的结构

class Hello extends React.Component {
    render() {
        return <div>Hello Class Component!</div>
    }
}
ReactDOM.render(<Hello />, root)

2.3 抽离为独立 JS 文件

组件作为一个独立的个体，一般 都 会 放到 一 个单独的 JS 文件中

1. 创 建Hello.js

2. 在 Hello.js 中导入 React

3. 创建组件（函 数 或 类）

4. 在 Hello.js 中导出该组件