一文带你了解React中的并发机制

import { useState } from 'react';

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

  const handleClick = () => {
    setCount(count + 1);
    setCount(count + 2);
    setCount(count + 3);
  };

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

import { useState, useEffect } from 'react';

function AsyncComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetchData().then((fetchedData) => {
      setData(fetchedData);
    });
  }, []);

  if (data === null) {
    return <p>Loading...</p>;
  }

  return <div>{data}</div>;
}

async function fetchData() {
  // 模拟异步数据获取
  await new Promise((resolve) => setTimeout(resolve, 1000));
  return 'Async data';
}

import { useState, useDeferredValue } from 'react';

function DebounceInput() {
  const [text, setText] = useState('');
  const deferredText = useDeferredValue(text, { timeoutMs: 500 });

  const handleChange = (e) => {
    setText(e.target.value);
  };

  return (
    <div>
     <input type="text" value={text} onChange={handleChange} />
      <p>Debounced value: {deferredText}</p>
    </div>
  );
}

import { useState, useTransition } from 'react';

function TransitionExample() {
  const [count, setCount] = useState(0);
  const [isPending, startTransition] = useTransition();

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

  return (
    <div>
      <p>Count: {count}</p>
     <button onClick={handleClick}>Increment</button>
      {isPending && <p>Loading...</p>}
    </div>
  );
}

import { Suspense } from 'react';

function App() {
  return (
    <Suspense
      fallback={<div>Loading...</div>}
      timeoutMs={1000}
      fallbackAfterSuspense={<div>Loading with suspense...</div>}
    >
      <Page1 />
      <Page2 />
    </Suspense>
  );
}

function Page1() {
  // 模拟异步数据获取
  return new Promise((resolve) => setTimeout(() => resolve(<div>Page 1</div>), 2000));
}

function Page2() {
  // 模拟异步数据获取失败
  return new Promise((_, reject) => setTimeout(() => reject(new Error('Error loading Page 2')), 2000));
}

import { useState, startTransition } from 'react';

function AnimationTransitionExample() {
  const [position, setPosition] = useState(0);

  const handleClick = () => {
    // 使用 startTransition 创建过渡
    startTransition(() => {
      setPosition(position + 100);
    });
  };

  return (
    <div style={{ position: 'relative' }}>
      <div
        style={{
          position: 'absolute',
          left: position,
          transition: 'left 0.5s ease-out',
        }}
      >
        Box
      </div>
     <button onClick={handleClick}>Move box</button>
    </div>
  );
}

import { useId, useSyncExternalStore } from 'react';

function ChatMessage({ message }) {
  const id = useId();
  return <div id={`message-${id}`}>{message}</div>;
}

function ChatRoom() {
  const messages = useSyncExternalStore(
    () => chatStore.subscribe,
    () => chatStore.getMessages()
  );

  return (
    <div>
      {messages.map((message) => (
        <ChatMessage key={message.id} message={message.text} />
      ))}
    </div>
  );
}

const chatStore = {
  messages: [],
  subscribers: new Set(),

  subscribe(callback) {
    this.subscribers.add(callback);
    return () => {
      this.subscribers.delete(callback);
    };
  },

  getMessages() {
    return this.messages;
  },

  addMessage(message) {
    this.messages.push(message);
    this.subscribers.forEach((callback) => callback());
  },
};