前端-陈旭辉-20230712

一、学习内容

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

• 函数组件叫做无状态组件（v16.8之前）；类组件叫做有状态组件
• 状态 （state），组件中使用的数据都保存在 state 中，并且是组件的私有数据
• 函数组件只负责数据展示（静）
• 类组件有状态，负责动态展示 UI 界面 （动）
  
  

2.state的基本使用

state 用来为组件绑定私有数据，有两种绑定形式

第一种： 在构造函数中定义 state

第二种： 在类中直接定义state （推荐）

setState() 方法用来修改数据  

3.this指向

• 如果将 onClick 指定的事件函数独立出来定义成一个函数则会报错
• 原因： this 的指向不同
  • 事件函数直接定义在类当中，this指向 undefined
  • 事件函数写在 onClick 中，this指向 Hero 组件
    
    
• 解决：
  
  
  • 使用箭头函数代替传统函数
  • 使用bind方法修改this指向  this.upLevel = this.upLevel.bind(this)
  • call、apply、bind
    
    

4.call\apply\bind 回顾

• call：执行函数，修改函数中this的指向，参数要和原参数对应
• apply： 执行函数，修改函数中this的指向，参数使用数组形式和原参数对应
• bind：不执行函数，修改函数中this的指向，参数和原参数对应
  
  

5.受控组件介绍

• 受控组件通常指的是表单，因为表单是可输入的，必须有对应的状态与之绑定
• React 将 state与表单的 value值绑定到一起
• 给表单元素绑定change事件，将表单元素的值设置为state的值，接收表单值变化
  
  

6.不同域数据的获取方式

• 每个域都要将 value  和  state 中对应的属性绑定
• 每个域都要绑定 onChange 事件
  
  

7.合并处理

核心：  e.target

• e.target.value : 保存了标签中的value值
• e.target.name：保存了标签中的name值
  
  

8.非受控组件

使用步骤：

• 在构造函数中调用 React.createRef() 方法创建一个 ref 对象
• 将 ref 对象绑定到对应的标签
• 通过 ref 对象获取标签对象
• 该方式是一种直接操作DOM的方式，不推荐
  
  

1)  在构造方法中声明属性，使用 React.createRef() 来获取表单域对象

2)  将创建好的表单域对象使用 ref 属性绑定到对应的表单域标签上

3)  表单域对象下保存了当前表单域的值