# 核心概念

## 1.state

### 1.定义

1.	state是组件对象最重要的属性, 值是对象(可以包含多个key-value的组合)
2.	组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新渲染组件)
3.	与用户交互的桥梁

### 2.注意事项

1.	组件中render方法中的this为组件实例对象
2.	组件自定义的方法中this为undefined，如何解决？
a)	强制绑定this: 通过函数对象的bind()
b)	箭头函数
3.	状态数据，不能直接修改或更新

### 3.关于__proto__

1. 类中的this定义会挂载到类中

![image-20210711160930064](../../照片/image-20210711160930064.png)

2. 类中定于的函数会挂载到__protot__中

![image-20210711161011771](../../照片/image-20210711161011771.png)

3. 如果直接访问类中的函数，this会指向undefined

## 2.props

### 1.定义

1. 组件之间进行传值。
2. state 和 props 主要的区别在于 props 是只读的，而 state 可以根据与用户交互来改变。
3. 子组件只能通过 props 来传递数据。

### 2.理解

1.	每个组件对象都会有props(properties的简写)属性
2.	组件标签的所有属性都保存在props中

### 3.作用

1.	通过标签属性从组件外向组件内传递变化的数据
2.	注意: 组件内部不要修改props数据

## 3.refs

### 1.定义

组件内的标签可以定义ref属性来标识自己，代替ID的存在
收集到的是真实DOM

### 2.种类

1. 字符串形式的ref

   ![image-20210711210508635](../../照片/image-20210711210508635.png)

2. 回调形式的ref

![image-20210711210528433](../../照片/image-20210711210528433.png)

3. createRef创建ref容器·

![image-20210711210543482](../../照片/image-20210711210543482.png)

## 4.事件处理

1.	通过onXxx属性指定事件处理函数(注意大小写)
1)	React使用的是自定义(合成)事件, 而不是使用的原生DOM事件 --- 兼容性
2)	React中的事件是通过事件委托方式处理的(委托给组件最外层的元素) --- 高效
2.	通过event.target得到发生事件的DOM元素对象 --- 不要过度使用ref

## 5.受控组件和非受控组件

受控组件：输入类的DOM维护到state里面 --- 尽量采取这种形式，不要过度使用ref 
非受控组件：输入类的DOM采取现用现取形式