likes
comments
collection
share

react响应式编程

作者站长头像
站长
· 阅读数 8

最近问了chatgpt很多关于编程的问题，感觉很多问题的回答都挺通透的。也记录一下自己学习的内容 -- 响应式编程 。

react响应式编程思想

响应式编程是一种编程范式，它强调编写代码以处理数据的变化和响应。它关注于定义数据的流动和变换，并通过触发和传播变化来实现代码的响应性。

在响应式编程中，开发者不需要显式地编写控制流程的指令（命令式编程），而是将重点放在描述数据流和数据之间的关系上。它通过建立数据之间的依赖关系和定义变化的规则，实现自动地响应数据的变化。

1、以下是响应式编程的一些关键概念：
  1. 数据流：在响应式编程中，数据被看作是在不同组件或函数之间流动的。数据的变化会在数据流中传播，并触发相关的操作。
  2. 依赖关系：数据之间可以建立依赖关系，即当一个数据发生变化时，依赖于它的其他数据也会相应地发生变化。
  3. 响应式函数：响应式编程中的函数被称为响应式函数，它们定义了数据之间的依赖关系和变化规则。当依赖的数据发生变化时，响应式函数会自动地更新结果。
2、响应式编程的优势

响应式编程的优势在于它能够简化代码的编写和维护，提高代码的可读性和可维护性。它使得代码可以更容易地处理复杂的数据流和变化，而不需要手动追踪和处理每个数据的变化。

相比之下，命令式编程是一种以明确的指令和控制流程来描述程序行为的编程方式。在命令式编程中，开发者需要显式地编写一步一步的指令，描述程序的执行顺序和逻辑。它强调对程序状态的修改和控制，以实现期望的结果。

与响应式编程相比，命令式编程在处理复杂的数据流和变化时可能变得冗长和复杂。它通常需要更多的手动跟踪和处理数据的变化，并且代码的扩展和维护可能会变得更加困难。

总而言之，响应式编程通过数据流和自动响应数据变化的机制，使得代码能够更容易地处理数据的变化和交互。它与命令式编程相比，注重于描述数据之间的关系而不是控制流程的指令。这使得响应式编程成为开发现代应用中非常有用和流行的一种编程范式。

3、react响应式编程应用

以下是一些典型的响应式编程模式和特性在React中的应用：

  1. 组件状态（Component State）：使用useState Hook或类组件的state属性来管理组件的状态。当状态发生变化时，React会自动更新相关的UI部分，实现响应式更新。
  2. 属性传递（Props）：通过组件的属性（props）来传递数据和配置信息。当父组件的属性发生变化时，子组件会接收到新的属性值，并相应地更新自己的UI。属性包含函数属性。JS和TS都是具有函数优先特性的语言（函数可以当做变量使用，可以作为参数传递，first-class function），父组件传递子组件函数我们一般称之为回调函数。
  3. 条件渲染（Conditional Rendering）：使用条件语句（如if、else）或三元表达式来根据不同的条件渲染不同的UI。当条件发生变化时，React会根据新的条件重新渲染相应的UI。
  4. 列表渲染（List Rendering）：通过使用map函数将数组中的数据映射为一组组件，实现动态的列表渲染。当数组发生变化时，React会自动更新列表中的组件。
  5. 生命周期方法（Lifecycle Methods）：在类组件中，你可以使用生命周期方法（如componentDidMount、componentDidUpdate、componentWillUnmount等）来在特定的生命周期阶段执行相应的操作。这可以用于处理副作用、异步操作和组件的状态变化。
  6. 上下文（Context）：使用上下文来共享数据和状态，以便在组件树中的任何地方访问和更新它们。当上下文的值发生变化时，相关的组件会自动更新。
  7. 异步操作：使用异步函数、Promise、async/await等技术来处理异步操作，如数据获取、API调用等。React的生命周期方法和useEffect Hook可以用于管理异步操作的状态和生命周期。
  8. 响应式表单（React Form）：使用React的表单组件和事件处理来实现响应式的表单验证和交互。React的受控组件模式使得表单的状态和UI保持同步。

通过以上这些模式和特性，React提供了强大的响应式编程工具和机制，使得开发者能够更轻松地构建响应式的UI和交互。这些特性的使用可以使代码更具可读性、可维护性和可扩展性。

4、react不推荐使用的命令式编程

在 React 中，仍然会看到一些非响应式编程甚至是废弃的方法存在。以下是一些常见的但并不推荐使用的命令式编程方法：

  1. 直接操作底层 DOM：这包括使用废弃的 findDOMNode 方法或其他类似的方法来直接获取和操作底层 DOM 节点。这种方式绕过了 React 的虚拟 DOM 抽象层，可能导致性能问题、可读性下降以及跨平台兼容性问题。在 React 16.3 版本中，官方引入了新的 React.createRef() 和 ref API 来更好地处理对底层 DOM 节点的引用。使用 ref 获取的底层 DOM 节点会与 React 的更新机制保持一致。当组件重新渲染时，React 会负责更新底层 DOM 节点以反映组件的最新状态。findDOMNode 获取的底层 DOM 节点则绕过了 React 的更新机制，可能导致一些潜在的问题。但是，不要过度使用，很多ref根本没有必要，看下文。
  2. 强制更新组件：使用 forceUpdate 方法来强制重新渲染组件，而不是通过正常的状态更新和使用 setState 方法来触发重新渲染。这种方式可能导致不一致的状态和性能问题。
  3. 直接修改状态（State）: 在 React 中，应该通过使用 setState 方法来更新组件的状态。直接修改状态的值是一种命令式编程的方式，但这样做会绕过 React 的更新机制，可能导致组件的不一致状态。
  4. 使用废弃的生命周期方法：在 React 的早期版本中，有一些生命周期方法已经被标记为过时或废弃，如 componentWillReceiveProps、componentWillUpdate 和 componentWillMount。使用这些废弃的生命周期方法可能导致难以预测的行为和代码维护困难。

这些命令式编程的方式在某些特定情况下可能会有用，但在一般情况下，React 更推崇使用声明式编程的方式来描述组件的状态和行为。声明式编程通过使用组件、状态和属性来表达应用程序的逻辑，而不是直接操作底层 DOM 或组件实例。这种方式使得代码更易理解、维护和调试，并与 React 的更新机制相符合。

5、ref的推荐和不推荐操作

React 推荐使用 ref 来执行以下操作：

  1. 访问底层 DOM 元素：ref 提供了一种访问组件底层 DOM 元素的方式。例如，您可以使用 ref 来获取输入框的值、调用底层 DOM 元素的方法、触发自定义事件等。
import React, { useRef } from 'react';
function MyForm() {
const inputRef = useRef(null);

const handleSubmit = (event) => {
    event.preventDefault();
    const value = inputRef.current.value;
    console.log(value);
};

return ( 
    <form onSubmit={handleSubmit}> 
       <input type="text" ref={inputRef} /> 
       <button type="submit">Submit</button> 
    </form>
  );
}

在这个例子中，通过 ref，我们可以直接访问底层 DOM 元素（这里是输入框），而无需依赖 React 的属性和状态。我们不需要为输入框的值创建额外的状态来存储和管理。通过使用 ref，直接访问输入框的值。

  1. 管理焦点和输入：ref 可以用于管理焦点，让您可以在需要时将焦点设置到特定的元素上，例如表单提交后将焦点设置到下一个输入框。此外，ref 也可以用于直接修改输入框的值或进行其他与用户输入相关的操作。
  2. 执行 DOM 动画和测量：通过 ref，您可以获取组件的底层 DOM 元素并与动画库或测量库进行交互，从而实现复杂的动画效果或进行准确的 DOM 测量。5. 第三方库集成：某些第三方库可能需要直接操作底层 DOM 元素，这时可以使用 ref 将 React 组件与这些库进行集成。
import React, { useRef, useEffect } from 'react';

function MyComponent() {
  const boxRef = useRef(null);

  useEffect(() => {
    const box = boxRef.current;
    box.style.transition = 'transform 0.3s ease-in-out';

    const handleAnimation = () => {
      box.style.transform = 'translateX(200px)';
    };

    box.addEventListener('click', handleAnimation);

    return () => {
      box.removeEventListener('click', handleAnimation);
    };
  }, []);

  return <div ref={boxRef} style={{ width: '100px', height: '100px', backgroundColor: 'red' }} />;
}

在这个例子中，我们使用 ref 获取一个 div 元素的引用，并在 useEffect 钩子函数中操作其样式属性来实现动画效果。当点击该 div 元素时，它会向右移动 200 像素。

ref 的使用场景应该遵循以下原则，React 不推荐在以下情况下使用 ref：

  1. 避免过度使用 ref：在大多数情况下，应该优先考虑使用属性传递和回调函数来实现组件之间的通信和交互，而不是过度依赖 ref。过度使用 ref 可能会导致代码变得难以理解、维护和测试。
  2. 避免直接修改组件的状态：应该避免使用 ref 直接修改组件的状态，因为这可能会绕过 React 的更新机制，导致不一致的状态和不可预测的行为。通常情况下，应该使用 setState 来更新组件的状态。
  3. 避免使用 ref 进行组件间通信：应该优先考虑使用属性传递和回调函数来实现组件之间的通信，而不是直接使用 ref 调用组件的属性方法。这样可以使代码更加清晰、可维护和可测试。

总结起来，ref 应该用于需要直接访问底层 DOM 元素、管理焦点、执行 DOM 动画和测量，以及与某些第三方库集成的情况。但应避免过度使用 ref，直接修改组件的状态，以及在组件间通信时过度依赖 ref。