[尚硅谷React笔记]——第2章 React面向组件编程

 目录：

1. 基本理解和使用：
   1. 使用React开发者工具调试
   2. 函数式组件
   3. 复习类的基本知识
   4. 类式组件
2. 组件三大核心属性1: state
   1. 复习类中方法this指向： 
   2. 复习bind函数：
   3. 解决changeWeather中this指向问题：
   4. 一般写法：state.html
   5. 在精简写法之前，复习一下类的基本知识：
   6. 精简写法：
3. 组件三大核心属性2: props
   1. props的基本使用.html
   2. 复习展开运算符.html
   3. 使用展开运算符，批量传递props
   4. 对props进行限制
   5. props的简写方式.html
   6. 类式组件中的构造器与props:
   7. 函数式组件使用props:
4. 组件三大核心属性3: refs与事件处理
   1. 字符串形式的ref
   2. 回调形式的ref
   3. 回调ref中调用次数的问题
   4. createRef的使用
   5. 事件处理
5. 收集表单数据
   1. 非受控组件
   2. 受控组件
6. 高阶函数，函数柯里化
   1. ​​​​​​​高阶函数，函数柯里化
   2. 对象相关的知识
   3. 演示函数的柯里化
7. 组件的生命周期
   1. ​​​​​​​​​​​​​​引出生命周期
   2. react生命周期（旧） 
   3. react生命周期(l日)_setState流程
   4. react生命周期(l日)_forceUpdate流程
8. 虚拟DOM与DOM Diffing算法

1.基本理解和使用：

使用React开发者工具调试

函数式组件：

运行结果：

复习类的基本知识：

总结:

1. 类中的构造器不是必须写的，要对实例进行一些初始化的操作，如添加指定属性时厅与。
2. 如果A类继承了B类，且A类中写了构造器，那么A类构造器中的super是必须要调用的。
3. 类中所定义的方法，都是放在了类的原型对象上，供实例去使用

代码示例：

类式组件：

运行结果：

2.组件三大核心属性1: state

简介：

在React中，state是一个非常重要的属性，主要用于标识组件的状态，以及更新UI，使页面动态变化。

对于state的定义和使用，主要有以下特点：

1. state的值是json对象类型，可以维护多个key-value的组合。
2. 在类组件中，state是组件的一个默认属性，用于存储和跟踪组件的状态。当state变化时，组件将被重新渲染。这意味着React将根据最新的state值重新计算渲染输出，并对DOM进行更新。
3. 在函数组件中，由于没有对象属性（babel默认开启了局部严格模式，函数内部this指向undefined），所以没有state属性。因此，函数组件只负责展示静态页面，而不进行动态更新。
4. state的值是可变的，但props的值是只读的。props属性值可以进行类型、必要性限制，也可以设置属性默认值，但组件自身不能修改props属性值。

总的来说，React的state主要用于存储和更新组件的状态，从而可以动态地控制组件的渲染和显示内容。

复习原生事件绑定：

    
    


按钮1
按钮2
按钮3

复习类中方法this指向： 

复习bind函数：

效果（需求: 定义一个展示天气信息的组件）

1. 默认展示天气炎热 或 凉爽
2. 点击文字切换天气

 解决changeWeather中this指向问题：

 一般写法：state.html

在精简写法之前，复习一下类的基本知识：

精简写法： 

理解

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

强烈注意

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

3.组件三大核心属性2: props

简介：

React中的props是一种类似于JavaScript函数的组件概念，它允许组件接收任意的输入参数，并返回用于描述页面展示内容的React元素。

具体来说，props的主要作用和用途包括以下几个方面：

1. 传递数据：props可以用于向子组件传递数据，这些数据可能是父组件的状态或者是其他兄弟组件的状态。通过props，子组件可以获得父组件或其他组件传递过来的数据，从而更新自己的状态。
2. 外部控制：通过props，父组件可以对子组件进行控制，例如设置初始状态或者传递回调函数。这种控制方式使得React的组件之间具有更好的互动性和协作性。
3. 自定义行为：通过props，我们可以向组件传递一些自定义的属性，从而改变组件的行为或者样式。例如，我们可以向按钮组件传递一个“disabled”属性，使得按钮变得不可点击。
4. 属性约束：与state不同，props是只读的，也就是说子组件不能修改父组件传递过来的props数据。这使得React的组件之间具有更好的可维护性和可预测性。

总的来说，React的props是一种强大的工具，它可以使得组件之间的数据传递更加灵活和高效，同时也可以使得组件的行为更加自定义和可控。

props的基本使用.html

复习展开运算符.html

使用展开运算符，批量传递props

对props进行限制

props的简写方式.html

类式组件中的构造器与props:

函数式组件使用props:

4.组件三大核心属性3: refs与事件处理

简介：

• React中的refs属性是一种提供对真实DOM（组件）的引用的机制，通过这个引用，我们可以直接操作DOM（组件）。
• 在React中，我们通常不会直接操作底层的DOM元素，而是通过在render方法中编写页面结构，并由React来组织DOM元素的更新。然而，有些情况下，我们可能需要对页面的真实DOM进行直接操作，这时就需要用到refs。
• refs是用于访问和操作React元素（虚拟DOM元素）的一种方式。它使我们能够更加方便且准确地控制refs的设置和解除。在ref中，我们可以传递一个函数，这个函数接受React组件实例或HTML DOM元素作为参数，以使它们能在其他地方被存储和访问。
• 对于事件处理，React中的refs也提供了相应的机制。例如，我们可以使用refs来获取HTML元素并注册事件处理函数，以便在用户与页面交互时执行特定的操作。
• 总的来说，React的refs属性为我们提供了一种机制，使我们能够对React元素（虚拟DOM元素）进行直接操作，以及处理用户与页面交互的事件。

字符串形式的ref：

回调形式的ref：

回调ref中调用次数的问题:

createRef的使用

 事件处理

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

5.收集表单数据

非受控组件

受控组件 

6.高阶函数，函数柯里化

高阶函数:如果一个函数符合下面2个规范中的任何一个，那该函数就是高阶函数。

1. 若A函数，接收的参数是一个函数，那么A就可以称之为高阶函数。
2. 若A函数，调用的返回值依然是一个函数，那么A就可以称之为高阶函数。
3. 常见的高阶函数有:Promise、setTimeout、arr.map()等等

函数的柯里化:通过函数调用继续返回函数的方式，实现多次接收参数最后统一处理的函数编码形式。

高阶函数，函数柯里化

对象相关的知识

演示函数的柯里化

7.组件的生命周期

引出生命周期：

react生命周期（旧） 

 react生命周期(l日)_setState流程

react生命周期(l日)_forceUpdate流程

8.虚拟DOM与DOM Diffing算法