关于react基础及组件化编程的可以参考本篇笔记

文章目录

• 一、 React中的事件处理
• • 1-1 例子： 不要过度使用ref
  • 1-2 受控组件与非受控组件
  • • 1-2-1 受控组件
    • 1-2-2 非受控组件
  • 1-3 高阶函数
  • • 1-3-1 函数的柯里化
    • 1-3-2 不用柯里化的写法
• 二、生命周期
• • 2-1 引出生命周期
  • 2-2 组件生命周期
  • • 2-2-1 生命周期钩子【新旧】
    • 2-2-2 生命周期的三个阶段（旧）
    • • 2-2-2-1 基本介绍
      • 2-2-2-2 例子 setState触发更新
      • 2-2-2-3 例子 componentWillReceiveProps :
    • 2-2-3 生命周期的三个阶段（新）
    • 2-2-4 DOM的diffing算法

一、 React中的事件处理

建议使用非受控组件

• 不要过度使用ref

1-1 例子： 不要过度使用ref

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

1-2 受控组件与非受控组件

1-2-1 受控组件

1. 类似vue中的双向数据绑定
   • 所有输入类的DOM，将输入维护在state中，使用时直接从状态中取出来

1-2-2 非受控组件

现用现取

1-3 高阶函数

1. 如果一个函数符合下面2个规范中的任何一个，那该函数就是高阶函数
   • 若A函数，接收的参数是一个函数，那么A就可以成为高阶函数
   • 若A函数，调用的返回值依然是一个函数，那么A就可以称为高阶函数
2. 常见的高阶函数： Promise/setTimeout/arr.map()等等

   saveFormData = (dataType) => {// 无关的输出console.log(dataType);// 真正返回的值是函数return (event) => {console.log(dataType, event.target.value);// this.setState({ password: event.target.value });};};

1-3-1 函数的柯里化

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

function(a) {function(b) {function(c) {return a+b+c;}}
}

1-3-2 不用柯里化的写法

二、生命周期

2-1 引出生命周期

2-2 组件生命周期

2-2-1 生命周期钩子【新旧】

react生命周期(旧)

react生命周期新

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

2-2-2-1 基本介绍

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

   • constructor()

   • componentWillMount() : 组件将要挂载的钩子

   • render()

   • componentDidMount()

     • 一般在这个钩子中做一些初始化的事，例如： 开启定时器、发送网络请求、订阅消息
     • 组件挂载完毕的钩子

2. componentWillReceiveProps :

   • 组件将要接收props调用

3. 更新阶段： 由组件内部this.setState()或父组件重新render触发

   • shouldComponentUpdate()
     • 阀门：组件是否应该被更新
     • 不写持续返回true
   • componentWillUpdate()
   • render()
   • componentDidUpdate()

4. 卸载组件：由ReactDOM.unmountComponentAtNode()触发

   • componentWillUnmount()
   • 关闭定时器、取消订阅消息

2-2-2-2 例子 setState触发更新

强制更新不受阀门控制

1. 代码

2. 展示

2-2-2-3 例子 componentWillReceiveProps :

• 组件将要接收props调用
• 第一次传递的props不算
• 还可以接收参数

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

getDerivedStateFormProps（得到派生的状态）

• UNSAFE_componentWillMount():组件将要挂载的钩子
• UNSAFE_componentWillUpdate： 组件将要更新的钩子

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

   • constructor()

   • getDerivedStateFormProps

   • render()

   • componentDidMount()

     • 一般在这个钩子中做一些初始化的事，例如： 开启定时器、发送网络请求、订阅消息
     • 组件挂载完毕的钩子

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

   • getDerivedStateFormProps
   • shouldComponentUpdate()
   • render()
   • getSnapshotUpdate()
   • componentDidUpdate()

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

   • componentWillUnmount()

2-2-4 DOM的diffing算法

1. 经典面试题：
   • react/vue中的key有什么作用？（key的内部原理是什么？）
   • 为什么遍历列表，key最好不要用index
2. 虚拟DOM中key的作用：
   • key是虚拟DOM对象的标识，在更新显示时key起着极其重要的作用
   • 当状态中的数据发生改变时，react会根据【新数据】生成【新的虚拟DOM】，随后React进行【新虚拟DOM】和【旧虚拟DOM】的diff比较
     • 旧虚拟DOM中找到了与新虚拟DOM相同的key ：
       • 若虚拟DOM中内容没变，直接使用之前真实DOM
       • 若虚拟DOM中内容变了，则生成新的真实DOM
     • 旧虚拟DOM中未找到与新虚拟DOMi相同的key
       • 根据数据创建新的真实DOM，随后渲染到页面
3. 用index作为key可能会引发的问题：
   • 弱队数据进行：逆序添加、逆序删除等破坏顺序操作
     • 会产生没有必要的真实DOM更新 ===> 界面效果没问题，但效率低
   • 如果结果还包含输入类DOM ：
     • 会产生错误DOM更新–> 界面有问题
   • 如果不存在对数据的逆序添加、逆序删除等破环删除操作
     • 仅用于渲染列表用于展示，使用index作为key没有问题