React Native 状态逻辑和副作用 的区别？

在 React Native 中，状态逻辑（State Logic）和副作用（Side Effects）是两个核心概念，它们的职责和使用场景不同，但经常协同工作。以下是它们的区别和联系：

1. 状态逻辑（State Logic）

状态逻辑指的是管理组件内部数据（状态）的代码，决定了组件如何存储、更新和响应数据变化。

• 作用：存储组件的动态数据（如用户输入、API 响应、UI 状态等），并触发 UI 更新。
• 工具：
  useState：管理简单状态。
  useReducer：管理复杂状态逻辑（类似 Redux）。
  Context API：跨组件共享状态。
• 特点：
  纯逻辑，不直接与外部世界交互（如不直接发起网络请求）。
  状态更新会触发组件重新渲染。

// 示例：状态逻辑（计数器）
const [count, setCount] = useState(0); // 状态声明
const increment = () => setCount(prev => prev + 1); // 状态更新逻辑

2. 副作用（Side Effects）

副作用指的是组件与外部世界的交互，即那些可能影响其他组件或外部系统的操作。

• 作用：处理非纯操作（如数据获取、订阅、手动修改 DOM、定时器等）。
• 工具：
  useEffect：处理大多数副作用。
  useLayoutEffect：在 DOM 更新后同步执行（适用于 UI 相关副作用）。
• 特点：
  在组件渲染后执行，不阻塞 UI。
  可能需要清理（如取消订阅、清除定时器）。

// 示例：副作用（数据获取）
useEffect(() => {
  fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => setData(data)); // 副作用中更新状态
}, []); // 依赖数组控制执行时机

关键区别

协同工作示例

状态逻辑和副作用通常结合使用：

1. 状态存储数据，副作用获取数据并更新状态。
2. 状态变化可能触发副作用（通过 useEffect 的依赖数组）。

const [user, setUser] = useState(null);

// 副作用：组件挂载时获取用户数据
useEffect(() => {
  fetchUser().then(data => setUser(data)); // 更新状态
}, []);

// 状态逻辑：基于用户数据渲染UI
return <Text>{user ? user.name : 'Loading...'}</Text>;

总结

• 状态逻辑：关注数据如何存储和更新，驱动 UI 变化。
• 副作用：关注如何与外部世界交互，但不直接参与渲染。
• 规则：
  保持状态逻辑纯净（避免在状态更新中混入副作用）。
  将副作用隔离到 useEffect 中，并通过依赖数组控制执行。

通过合理分离两者，可以构建可维护、可预测的 React Native 组件。