React中的命令式 行为是指的哪些

在React中，命令式行为通常指的是那些直接操作DOM或修改数据源而不通过React的声明式机制（如setState、useState Hook等）的操作。React的核心理念是声明式编程，它鼓励开发者描述UI应该是什么样子，而不是如何改变它。

命令式行为示例包括：

1. 直接操作DOM：

   • 使用原生JavaScript方法如element.innerHTML = 'new content'来更改DOM内容。
   • 直接添加、删除或修改DOM节点。

2. 非React管理的状态变更：

   • 在组件外部直接修改props或state的值，而没有触发React的生命周期钩子或状态更新函数。

3. 非响应式的API调用：

   • 直接发起网络请求并在请求完成时手动更新组件状态，而非使用useEffect Hook或者基于React的数据流进行处理。

4. 事件处理器中的副作用：

   • 在事件处理器内执行异步操作并直接更新状态，而不是将这些副作用封装到useEffect或其他适当的Hook中。

例如，在React中，以下代码片段体现了命令式行为：

class MyComponent extends React.Component {
  handleClick() {
    // 命令式：直接修改DOM
    this.ref.textContent = 'Clicked!';

    // 命令式：直接修改状态，没有触发React的setState
    this.state.count++;
  }

  render() {
    return (
      <div ref={(ref) => (this.ref = ref)}>
        <button onClick={this.handleClick}>Click me</button>
      </div>
    );
  }
}

相比之下，React推荐的做法是使用声明式的方式：

import React, { useState, useEffect } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);
  
  // 声明式：使用setState更新状态
  function handleClick() {
    setCount(count + 1);
  }

  // 声明式：使用useEffect处理副作用
  useEffect(() => {
    console.log('Count changed to:', count);
  }, [count]); // 当count变化时运行effect

  return (
    <div>
      <button onClick={handleClick}>Click me</button>
      {/* React会自动根据count更新DOM */}
      <p>You clicked the button {count} times.</p>
    </div>
  );
}