[尚硅谷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流程
   5. react生命周期(l日)_父组件render流程
   6. react新生命周期
   7. react生命周期(新)_getDerivedStateFromProps
   8. react生命周期(新)_getSnapshotBeforeUpdate
   9. react生命周期(新)_getSnapshotBeforeUpdate的使用场景
8. 虚拟DOM与DOM Diffing算法
   1. 验证Diffing算法
   2. key的作用

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.组件的生命周期

生命周期的三个阶段（旧）

• 初始化阶段: 由ReactDOM.render()触发---初次渲染
• constructor()
• componentWillMount()
• render()
• componentDidMount()
• 更新阶段: 由组件内部this.setSate()或父组件重新render触发
• shouldComponentUpdate()
• componentWillUpdate()
• render()
• componentDidUpdate()
• 卸载组件: 由ReactDOM.unmountComponentAtNode()触发
• componentWillUnmount()

引出生命周期：

react生命周期（旧） 

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

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

react生命周期(l日)_父组件render流程

react新生命周期

生命周期的三个阶段（新）

1. 初始化阶段: 由ReactDOM.render()触发---初次渲染

• constructor()
• getDerivedStateFromProps
• render()
• componentDidMount()

2. 更新阶段: 由组件内部this.setSate()或父组件重新render触发

• getDerivedStateFromProps
• shouldComponentUpdate()
• render()
• getSnapshotBeforeUpdate
• componentDidUpdate()

3. 卸载组件: 由ReactDOM.unmountComponentAtNode()触发

• componentWillUnmount()

重要的勾子

1. render：初始化渲染或更新渲染调用
2. componentDidMount：开启监听, 发送ajax请求
3. componentWillUnmount：做一些收尾工作, 如: 清理定时器

即将废弃的勾子

1. componentWillMount
2. componentWillReceiveProps
3. componentWillUpdate

现在使用会出现警告，下一个大版本需要加上UNSAFE_前缀才能使用，以后可能会被彻底废弃，不建议使用。

react生命周期(新)_getDerivedStateFromProps

 react生命周期(新)_getSnapshotBeforeUpdate

react生命周期(新)_getSnapshotBeforeUpdate的使用场景

8.虚拟DOM与DOM Diffing算法

1. 虚拟DOM中key的作用:
   1. 简单的说: key是虚拟DOA对象的标识，在更新显示时key起着极其重要的作用。
   2. 详细的说:当状态中的数据发生变化时，react会根据【新数据】生成【新的虚拟DOM】 ,随后React进行【新虚拟DOM】与【旧虚拟DOM】的diff比较，比较规则如下;
      1. 旧虚拟DOM中找到了与新虚拟DOM相同的key:
         1. 若虚拟DOM中内容没变，直接使用之前的真实DOM
         2. 若虚拟DOM中内容变了，则生成新的真实DOM，随后替换掉页面中之前的真实DOM
      2. 旧虚拟DOM中未找到与新虚拟DOM相同的key根据数据创建新的真实DOM，随后渲染到到页面
2. 用index作为key可能会引发的问题:
   1. 若对数据进行:逆序添加、逆序删除等破坏顺序操作:会产生没有必要的真实DOM更新· ==>·界面效果没问题，但效率低。
   2. 如果结构中还包含输入类的DOM:会产生错误DOM更新==>界面有问题。
   3. 注意!如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用index作为key是没有问题的。 
3. 开发中如何选择key? :
   1. 最好使用每条数据的唯一标识作为key，比如id、手机号、身份证号、学号等唯一值。
   2. 如果确定只是简单的展示数据，用index也是可以的。 

验证Diffing算法

key的作用

运行结果：