react18 响应式数据的创建方式hook

React 18 中监听数据变化通常涉及使用内置的 Hooks，如 useState、useEffect 和 useReducer。对于更复杂的状态管理，还可以结合第三方库如 Redux 或 MobX。下面是这些 Hooks 的具体使用方法示例：

1. useState

useState 是 React 中用于创建状态变量的 Hook。它允许你在函数组件中添加状态，并且每当状态更新时，组件会重新渲染。

import React, { useState } from 'react';

function Counter() {
  // 创建一个名为 count 的状态变量，初始值为 0
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

export default Counter;

在这个例子中，每当用户点击按钮时，setCount 函数被调用来更新状态，导致组件重新渲染并显示更新后的计数。

2. useEffect

useEffect Hook 允许你在函数组件中执行副作用操作（例如数据获取、订阅或手动 DOM 操作）。你可以将它看作是生命周期方法的组合体，比如 componentDidMount、componentDidUpdate 和 componentWillUnmount。

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

function DataFetcher() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(setData)
      .finally(() => setLoading(false));
  }, []); // 空数组意味着只在组件挂载时运行一次

  if (loading) return <p>Loading...</p>;
  if (!data) return <p>No data</p>;

  return (
    <div>
      <h1>Data:</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

export default DataFetcher;

这里，useEffect 被用来在组件挂载后进行一次数据获取，并在数据加载完成后停止加载指示器。

3. useReducer

useReducer 是另一种管理状态的方式，特别适合于处理复杂的状态逻辑。它接收一个 reducer 函数和一个初始状态，并返回当前状态和 dispatch 方法。

import React, { useReducer } from 'react';

const initialState = { count: 0 };

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
    </>
  );
}

export default Counter;

这个例子展示了如何使用 useReducer 来管理一个简单的计数器状态。

4. useRef

虽然 useRef 主要用于直接访问 DOM 节点或保持可变值，但它也可以用于监听某些情况下的变化，特别是当需要跟踪上一次渲染的状态时。

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

function FocusInput() {
  const inputEl = useRef(null);
  const [value, setValue] = useState('');

  useEffect(() => {
    inputEl.current.focus();
  }, []);

  return (
    <>
      <input ref={inputEl} value={value} onChange={(e) => setValue(e.target.value)} />
      <p>Current Value: {value}</p>
    </>
  );
}

export default FocusInput;

这里，useRef 用来引用输入框元素，并在组件挂载后自动聚焦到该输入框。

总结

• useState：用于创建和更新状态。
• useEffect：用于处理副作用，如数据获取、订阅或手动 DOM 操作。
• useReducer：提供了一种更为复杂的状态管理方式，适用于状态逻辑较为复杂的情况。
• useRef：可以用于访问 DOM 节点或保持可变值。

通过这些 Hooks，React 提供了强大的工具来监听和响应数据的变化，使得开发者能够更加灵活地构建动态的 UI。请注意，上述代码中的 fetch 请求仅为演示目的，在实际应用中应该考虑错误处理和请求取消等场景。