Next.js+React+Node系统实战,搞定SSR服务器渲染

#1

download:Next.js+React+Node系统实战,搞定SSR服务器渲染

四個真秀React用法,妳值得具有

我們希望用戶在點擊查询按钮的時分, 表格能夠將當前頁码調整爲第一頁,同時加载表格的數據,比方像下面代码所示

import React, { useState, useEffect } from “react”;

const Test = () => {
  const [page, setPage] = useState(1);
  const [filterParams, setFilterParams] = useState({});
  const [data, setData] = useState([]);
  const form = useRef();
  useEffect(() => {
    // 當page 或 搜索條件發作變化的時分,重新懇求表格數據
    fetch("/loadData", {
      method: "get",
      params: {
        page: page,
        ...filterParams,
      },
    }).then((data) => {
      setData(data);
    });
  }, [page, filterParams]);
  function handleSearch() {
    // 經過 validateFields 異步獲取表單的值
    form.current.validateFields().then((formData) => {
      // 設置搜索條件
      setFilterParams(formData);
      // 將頁码置爲1
      setPage(1);
    });
  }
  return (
    <>
      <Form ref={form}>
        <span>表單元素</span>
        <Button onClick={handleSearch}>搜索</Button>
      </Form>
      <Table data={data} pagination={{ page: page }}></Table>
    </>
  );
};
復製代码

上面的代码,當用戶點擊搜索按钮的時分,我們做了下面三件事

  1. 調用表單的validateFields辦法異步獲取表單的數據
  2. 設置搜索條件
  3. 將頁码重置爲首頁

但是,問題呈現了,我們發現加载表格數據的懇求被發進來了兩條,而且第一條懇求的頁码並不是我們設置的1,這是怎樣回事呢?

2. 問題剖析

我們晓得,在 React 的事情循環内部,屢次 setState 會被兼並成一次來觸發更新,所以我們通常寫 React 批量更新狀態的時分並不會呈現問題,但是這里有一個慣例,就是 React 不會將異步代码里面的屢次狀態更新停止兼並。 比方常見的 setTimeout , Promise 等等這些異步操作,在這些異步操作中更新多個狀態的話, React 就不會停止狀態兼並了,那麼有沒有什麼方法處理這個問題了

3. unstable_batchedUpdates,該妳上場了

爲理解決異步批量更新狀態惹起的問題, react 提供了一個暫時的 api unstable_batchedUpdates 停止批量更新,那麼這個 api 應該怎樣運用呢?

  function handleSearch() {
    // 經過 validateFields 異步獲取表單的值
    form.current.validateFields().then((formData) => {
      unstable_batchedUpdates(() => {
        // 設置搜索條件
        setFilterParams(formData);
        // 將頁码置爲1
        setPage(1);
      })
    });
  }
復製代码

如上代码所示,只需求將批量更新狀態的代码運用 unstable_batchedUpdates 包裹起來就能夠了。

4. 一切異步狀態都需求用 unstable_batchedUpdates 來包裹吗

我以爲是不需求的,只要在批量更新狀態的時分惹起懇求反復發送,頁面渲染卡頓等影響用戶體驗的時分,再用這個 api 也不遲

發佈订阅者形式,幫妳寫一個高性能Hook

#2

This post was flagged by the community and is temporarily hidden.

#3

Next.js+React+Node系统实战,搞定SSR服务器渲染
网盘地址:pan baidu com/s/1POgFXaC546Lrz-hGkO6SUQ 提取码:rdve