React-组件基础

创建组件

1. 函数组件 ： 使用 JS 的函数(或箭头函数)创建的组件，叫做函数组件
   函数组件又叫做无状态组件 函数组件是不能自己提供数据【前提：不考虑 hooks 的情况下】

约定1：函数名称必须以大写字母开头，React 据此区分组件和普通的 HTML标签
约定2：函数组件必须有返回值，表示该组件的 UI （jsx）结构；如果不需要渲染任何内容，则返回 null

2. 类组件 ： 使用 ES6 的 class 创建的组件，叫做类（class）组件
   类组件又叫做有状态组件 类组件可以自己提供数据

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

函数组件和类组件的区别：有没有状态【前提：不考虑 hooks 的情况下】

---

将组件抽离成单独的js文件

创建Hello.js

在index.js中

---

组件样式

新建index.css

需要在哪个组件使用，就在这个js中引用

---

组件逻辑

函数组件——————在函数体内，return之前

类组件——————定义在state中

---

事件处理

注册事件

---

事件对象

作用：

1. 获取被触发事件的事件源（e.target）
2. 阻止默认行为（e.preventDefault()）

this指向问题

this指向问题只存在于类组件

• 事件处理程序中的this指向的是undefined
• render方法中的this指向的是当前react组件。只有事件处理程序中的this有问题
• 原因

1. 事件处理程序的函数式函数调用模式，在严格模式下，this指向undefined
2. render函数是被组件实例调用的，因此render函数中的this指向当前组件

解决

方式1：箭头函数

<button onClick={() => this.add()}>点击</button>

方式2：bind

<button onClick={this.add.bind(this)}>点击</button>

方式3：箭头函数形式的实例方法 - 推荐使用

  add = () => {
    console.log('组件实例：', this)
  }

标签：函数,指向,约定,基础,js,React,事件,组件
来源： https://blog.csdn.net/crystal_iwwish/article/details/122700681