React 解读#

const updateName = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      Math.random() > 0.5
        ? resolve("finished")
        : reject(new Error("error get"));
    }, 1000);
  });
};

export default function App() {
  const [name, setName] = useState("init");
  const [error, setError] = useState(null);
  const [isPending, startTransition] = useTransition();

  const handleSubmit = () => {
    startTransition(async () => {
      const res = await updateName().catch((err) => setError(err));
      res && setName(res);
    });
  };

  return (
    <div className="App">
      <h1>Hello {name}</h1>
      <h2>Start editing to see some magic happen!</h2>
      <button onClick={handleSubmit} disabled={isPending}>
        Update
      </button>
      {error && <p>{error.toString()}</p>}
    </div>
  );
}

const updateName = (name) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      Math.random() > 0.5
        ? resolve(`${name} finished`)
        : reject(new Error("error get"));
    }, 1000);
  });
};

export default function App() {
  const [error, setError] = useState(null);
  const [state, submitAction, isPending] = useActionState(
    async (previousState, formData) => {
      setError(null);
      const state = await updateName(formData.get("name")).catch((err) =>
        setError(err)
      );
      if (state) {
        return state;
      }
    },
    null
  );

  return (
    <form action={submitAction}>
      <input name="name" />
      <button type="submit" disabled={isPending}>
        Update
      </button>
      <p>state: {state}</p>
      {error && <p>{error.toString()}</p>}
    </form>
  );
}

function SubmitButton() {
  const { pending } = useFormStatus();

  return (
    <div className="form_item">
      <button className="primary" type="submit" disabled={pending}>
        {pending ? "Submitting..." : "Submit"}
      </button>
    </div>
  );
}

export default function App() {
  const [state, submitAction, isPending] = useActionState(
    async (previousState, formData) => {
      const title = formData.get("name");

      await new Promise((resolve) => setTimeout(resolve, 1000));
      return [...(previousState || []), title];
    },
    null
  );

  return (
    <form action={submitAction}>
      <input type="text" name="name" />
      <p>posts: {isPending ? "loading" : (state || []).join(",")}</p>
      <SubmitButton />
    </form>
  );
}

const updateName = (name) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(`${name} finished`);
    }, 1000);
  });
};
function SubmitButton() {
  const { pending } = useFormStatus();

  return (
    <div className="form_item">
      <button className="primary" type="submit" disabled={pending}>
        {pending ? "Submitting..." : "Submit"}
      </button>
    </div>
  );
}

function ChangeName({ currentName, onUpdateName }) {
  const [optimisticName, setOptimisticName] = useOptimistic(currentName);

  const submitAction = async (formData) => {
    const newName = formData.get("name");
    setOptimisticName(newName);
    const updatedName = await updateName(newName);
    onUpdateName(updatedName);
  };

  return (
    <form action={submitAction}>
      <p>Your name is: {optimisticName}</p>
      <p>
        <label>Change Name:</label>
        <input
          type="text"
          name="name"
          disabled={currentName !== optimisticName}
        />
      </p>
      <SubmitButton />
    </form>
  );
}

export default function App() {
  const [currentName, updateName] = useState("");

  return <ChangeName currentName={currentName} onUpdateName={updateName} />;
}

function Comments({ commentsPromise }) {
  // `use` will suspend until the promise resolves.
  const comments = use(commentsPromise);
  return comments.map((comment) => <p key={comment.id}>{comment.comment}</p>);
}

function Page({ commentsPromise }) {
  // When `use` suspends in Comments,
  // this Suspense boundary will be shown.
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <Comments commentsPromise={commentsPromise} />
    </Suspense>
  );
}

const themeContext = createContext({ color: "light" });

export default function App() {
  const theme = use(themeContext);

  console.log("theme color:", theme?.color);

  const commentsPromise = new Promise((resolve) => {
    setTimeout(() => {
      resolve([
        { id: 1, comment: "hello 1" },
        { id: 2, comment: "hello 2" },
        { id: 3, comment: "hello 3" },
        { id: 4, comment: "hello 4" },
      ]);
    }, 1000);
  });

  return <Page commentsPromise={commentsPromise} />;
}

function MyInput({placeholder, ref}) {
  return <input placeholder={placeholder} ref={ref} />
}

//...
<MyInput ref={ref} />

const ThemeContext = createContext('');

function App({children}) {
  return (
    <ThemeContext value="dark">
      {children}
    </ThemeContext>
  );  
}

<input
  ref={(ref) => {
    // ref created

    // NEW: return a cleanup function to reset
    // the ref when element is removed from DOM.
    return () => {
      // ref cleanup
    };
  }}
/>

// 停止使用 隐式返回，因为引入了 ref 清理函数，需改为下面写法
- <div ref={current => (instance = current)} />
+ <div ref={current => {instance = current}} />

function Search({deferredValue}) {
  // 首次渲染的值为 空字符串
  // 然后使用新得到的 deferredValue 安排重新渲染
  const value = useDeferredValue(deferredValue, '');
  
  return (
    <Results query={value} />
  );
}