React|青训营

Neflibata
130 阅读7分钟

React使用场景

  • 前端应用开发
  • 移动原生开发
  • 结合Electron，进行桌面应用开发

响应式编程

  • 状态更新，UI自动更新
    • 状态更新，UI不会自动更新，需要手动调用DOM进行更新
  • 前端代码组件化，可复用，可封装
    • 欠缺基本的代码层面的封装和隔离，代码层面没有组件化
  • 状态之间的互相依赖关系，只需要声明即可。
    • UI之间的数据依赖关系，需要手动维护，如果依赖链路长，则会遇到“Callback Hell”

组件化

  • 组件是组件的组合/原子组件
  • 组件内拥有状态，外部不可见
  • 父组件可将状态传入组件内部

React是单向数据流还是双向数据流？

  • React是单向数据流。
  • 在React中，数据流动是从父组件向子组件的单向传递。父组件可以通过props将数据传递给子组件，子组件则通过props接收和使用这些数据。子组件不能直接修改父组件传递给它的props，只能通过向父组件发送回调函数来请求更新数据。
  • 这种单向数据流的模式有助于代码的可维护性和可预测性。通过限制数据的修改方式，使得数据的变化更可控，更易于调试和理解应用程序的状态变化。
  • 尽管React本身采用单向数据流，但在特定情况下，可以结合其他库或技术实现双向数据绑定。例如，React与类似Redux或MobX这样的状态管理库结合使用时，可以实现双向数据绑定的效果。这些库提供了一种管理应用程序状态的机制，使得数据在组件之间的传递和更新更加灵活和便捷。

React 更新 DOM 的基本过程

  1. 组件状态更新：当组件的状态发生变化时，通过调用 setState 方法或使用 React Hooks 来更新组件的状态。
  2. 虚拟 DOM 比较：React 使用虚拟 DOM（Virtual DOM）来表示组件的最新状态。在状态更新后，React 会将当前的虚拟 DOM 与上一次渲染生成的虚拟 DOM 进行比较。
  3. 差异计算：React 会计算出两个虚拟 DOM 之间的差异，即需要进行更新的部分。
  4. DOM 更新：根据差异计算的结果，React 会将需要更新的部分应用到实际的 DOM 上。这个过程通常使用高效的算法和批量更新来最小化 DOM 操作。
  5. 组件生命周期方法：在 DOM 更新完成后，React 会调用相应的生命周期方法，例如 componentDidUpdate，允许开发人员执行额外的操作或处理副作用。

React的响应式编程

在 React 中，响应式编程是指通过对组件状态进行观察和响应，实现动态更新用户界面的编程范式。 React 的响应式编程主要依赖于以下两个方面：

  1. 组件状态（State）：React 组件可以有自己的状态，即组件内部的数据。通过使用 setState 方法或 React Hooks 的状态钩子，可以在组件中定义和更新状态。当状态发生变化时，React 会自动重新渲染组件，并更新相关的 DOM。
  2. 属性传递（Props）：React 组件可以通过属性（Props）接收来自父组件的数据。当父组件的属性发生变化时，React 会自动更新子组件的属性，并触发相应的重新渲染。

React的生命周期

React 组件的生命周期指的是在组件被创建、更新和销毁的过程中，React 提供的一系列钩子函数（生命周期方法）的调用顺序。这些生命周期方法允许开发人员在不同的阶段执行特定的操作和处理副作用。

  1. 组件挂载阶段（Mounting Phase） ：组件被创建并插入 DOM 中。

    • constructor(): 组件的构造函数，在组件实例化时调用，用于初始化状态和绑定方法。
    • static getDerivedStateFromProps(): 在组件实例化、接收新属性或调用 setState 之前调用，用于根据属性的变化更新状态。
    • render(): 渲染组件的 UI。
    • componentDidMount(): 组件被插入 DOM 后调用，可以进行异步操作、网络请求或订阅事件等。

  2. 组件更新阶段（Updating Phase） ：组件的状态或属性发生变化，触发重新渲染。

    • static getDerivedStateFromProps(): 同上，用于根据属性的变化更新状态。
    • shouldComponentUpdate(): 决定组件是否需要重新渲染，默认返回 true，可以根据新旧状态和属性的对比来进行优化。
    • render(): 同上。
    • componentDidUpdate(): 组件完成更新后调用，可以进行 DOM 操作、网络请求或订阅事件等。

  3. 组件卸载阶段（Unmounting Phase） ：组件从 DOM 中移除。

    • componentWillUnmount(): 组件将要被卸载前调用，可以进行清理操作，如取消订阅或清除定时器等。

React Hooks

React Hooks 是 React 16.8 版本引入的一种新特性，它允许在无需编写类组件的情况下使用状态和其他 React 特性。

我们平时较常用的比如：使用状态钩子（State Hook）: `

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

我们使用 useState 钩子来创建一个名为 count 的状态变量和一个名为 setCount 的状态更新函数。通过点击按钮，可以调用 increment 函数来增加 count 的值。

React的优点：

  1. 组件化开发：  React 的核心思想是将用户界面拆分成独立、可复用的组件。这种组件化开发的方式使得代码结构清晰、易于维护和测试，并且可以提高开发效率。
  2. 虚拟 DOM（Virtual DOM）：  React 使用虚拟 DOM 来进行高效的渲染。通过在内存中构建虚拟 DOM 树，并通过比较前后两个虚拟 DOM 树的差异，最小化实际 DOM 操作，从而提高性能和渲染效率。
  3. 单向数据流：  React 推崇单向数据流，即数据的流动是单向的，从父组件流向子组件。这种数据流的设计使得组件之间的数据传递和状态管理更加可控和可预测，减少了出现数据竞争和难以追踪的 bug 的可能性。
  4. 强大的生态系统：  React 拥有庞大而活跃的社区，提供了丰富的第三方库、工具和组件。这些资源可以帮助开发人员快速构建功能丰富、高效的应用程序，并提供了解决各种问题的方案。
  5. 高度灵活：  React 可以与其他库和框架无缝集成，例如使用 React Native 构建移动应用程序，或与后端框架（如 Express、Django 等）结合使用。它也可以与状态管理库（如 Redux、MobX）等配合使用，以满足更复杂的应用程序需求。
  6. 易于学习和上手：  React 的 API 设计简洁、一致，学习曲线相对较低。官方文档和社区提供了丰富的学习资源和教程，使得初学者能够快速上手并构建 React 应用程序。
  7. 性能优化：  React 的虚拟 DOM 和优化算法使得渲染性能较高。此外，可以使用 memoization、PureComponent、React.memo 等技术来避免不必要的重新渲染，提升应用程序的性能。

总的来说，React 提供了一种高效、灵活和可维护的方式来构建用户界面。它的组件化开发、虚拟 DOM、单向数据流等特性使得开发人员能够更轻松地构建复杂的应用程序，并且拥有庞大的社区支持和丰富的生态系统。

avatar
文章
阅读
粉丝