การเรียกใช้ตัวอัปเดตสถานะจาก useState ในคอมโพเนนต์หลายครั้งทำให้เกิดการแสดงผลซ้ำหลายครั้ง

ฉันกำลังลอง React hooks เป็นครั้งแรกและทุกอย่างดูเหมือนจะดีจนกระทั่งฉันรู้ว่าเมื่อฉันได้รับข้อมูลและอัปเดตตัวแปรสถานะที่แตกต่างกันสองตัว (ข้อมูลและแฟล็กการโหลด) ส่วนประกอบของฉัน (ตารางข้อมูล) จะแสดงผลสองครั้งแม้ว่าทั้งสองสาย ไปยังตัวอัปเดตสถานะกำลังเกิดขึ้นในฟังก์ชันเดียวกัน นี่คือฟังก์ชัน api ของฉันซึ่งส่งคืนตัวแปรทั้งสองไปยังส่วนประกอบของฉัน

const getData = url => {

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

    useEffect(async () => {

        const test = await api.get('/people')

        if(test.ok){
            setLoading(false);
            setData(test.data.results);
        }

    }, []);

    return { data, loading };
};

ในคอมโพเนนต์คลาสปกติคุณจะโทรเพียงครั้งเดียวเพื่ออัปเดตสถานะซึ่งอาจเป็นอ็อบเจ็กต์ที่ซับซ้อน แต่ดูเหมือนว่า "hooks way" จะแบ่งสถานะออกเป็นหน่วยย่อย ๆ ซึ่งเป็นผลข้างเคียงที่ดูเหมือนว่าจะเกิดขึ้นอีกหลายครั้ง แสดงผลเมื่อมีการอัปเดตแยกกัน มีความคิดอย่างไรที่จะลดปัญหานี้?

คุณสามารถรวมloadingสถานะและdataสถานะเป็นออบเจ็กต์สถานะเดียวจากนั้นคุณสามารถทำการsetStateเรียกหนึ่งครั้งและจะมีการแสดงผลเพียงครั้งเดียว

หมายเหตุ:ไม่เหมือนกับsetStateคอมโพเนนต์ในคลาสสิ่งที่setStateส่งคืนจากuseStateไม่ผสานอ็อบเจกต์กับสถานะที่มีอยู่มันจะแทนที่อ็อบเจ็กต์ทั้งหมด หากคุณต้องการทำการผสานคุณจะต้องอ่านสถานะก่อนหน้านี้และรวมเข้ากับค่าใหม่ด้วยตัวคุณเอง อ้างถึงเอกสาร

ฉันจะไม่กังวลมากเกินไปเกี่ยวกับการแสดงผลการโทรมากเกินไปจนกว่าคุณจะพิจารณาว่าคุณมีปัญหาด้านประสิทธิภาพ การแสดงผล (ในบริบทการตอบสนอง) และการคอมมิตการอัปเดต DOM เสมือนไปยัง DOM จริงนั้นเป็นคนละเรื่องกัน การแสดงผลในที่นี้หมายถึงการสร้าง DOM เสมือนไม่ใช่เกี่ยวกับการอัปเดต DOM ของเบราว์เซอร์ การตอบสนองอาจแบตช์การsetStateโทรและอัปเดต DOM ของเบราว์เซอร์ด้วยสถานะใหม่ขั้นสุดท้าย

const {useState, useEffect} = React;

function App() {
  const [userRequest, setUserRequest] = useState({
    loading: false,
    user: null,
  });

  useEffect(() => {
    // Note that this replaces the entire object and deletes user key!
    setUserRequest({ loading: true });
    fetch('https://randomuser.me/api/')
      .then(results => results.json())
      .then(data => {
        setUserRequest({
          loading: false,
          user: data.results[0],
        });
      });
  }, []);

  const { loading, user } = userRequest;

  return (
    <div>
      {loading && 'Loading...'}
      {user && user.name.first}
    </div>
  );
}

ReactDOM.render(<App />, document.querySelector('#app'));

<script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script>
<div id="app"></div>

ทางเลือก - เขียน hook การควบรวมกิจการของคุณเอง

const {useState, useEffect} = React;

function useMergeState(initialState) {
  const [state, setState] = useState(initialState);
  const setMergedState = newState => 
    setState(prevState => Object.assign({}, prevState, newState)
  );
  return [state, setMergedState];
}

function App() {
  const [userRequest, setUserRequest] = useMergeState({
    loading: false,
    user: null,
  });

  useEffect(() => {
    setUserRequest({ loading: true });
    fetch('https://randomuser.me/api/')
      .then(results => results.json())
      .then(data => {
        setUserRequest({
          loading: false,
          user: data.results[0],
        });
      });
  }, []);

  const { loading, user } = userRequest;

  return (
    <div>
      {loading && 'Loading...'}
      {user && user.name.first}
    </div>
  );
}

ReactDOM.render(<App />, document.querySelector('#app'));

<script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script>
<div id="app"></div>

นอกจากนี้ยังมีวิธีแก้ปัญหาอื่นโดยใช้useReducer! setStateครั้งแรกที่เรากำหนดใหม่ของเรา

const [state, setState] = useReducer(
  (state, newState) => ({...state, ...newState}),
  {loading: true, data: null, something: ''}
)

หลังจากนั้นเราก็สามารถใช้มันเหมือนกับคลาสเก่า ๆ ที่ดีthis.setStateโดยไม่มีthis!

setState({loading: false, data: test.data.results})

ดังที่คุณสังเกตเห็นในใหม่ของเราsetState(เช่นเดียวกับที่เราเคยมีมาก่อนหน้านี้this.setState) เราไม่จำเป็นต้องอัปเดตสถานะทั้งหมดด้วยกัน! ตัวอย่างเช่นฉันสามารถเปลี่ยนสถานะของเราได้เช่นนี้ (และจะไม่เปลี่ยนสถานะอื่น!):

setState({loading: false})

น่ากลัวฮ่า?!

ลองรวบรวมชิ้นส่วนทั้งหมดเข้าด้วยกัน:

import {useReducer} from 'react'

const getData = url => {
  const [state, setState] = useReducer(
    (state, newState) => ({...state, ...newState}),
    {loading: true, data: null}
  )

  useEffect(async () => {
    const test = await api.get('/people')
    if(test.ok){
      setState({loading: false, data: test.data.results})
    }
  }, [])

  return state
}

การอัปเดตแบทช์ใน react-hooks https://github.com/facebook/react/issues/14259

การตอบสนองในขณะนี้จะอัปเดตสถานะเป็นกลุ่มหากทริกเกอร์จากภายในเหตุการณ์ที่อิงตามการตอบสนองเช่นการคลิกปุ่มหรือการเปลี่ยนแปลงอินพุต จะไม่อัปเดตเป็นกลุ่มหากถูกทริกเกอร์ภายนอกตัวจัดการเหตุการณ์ตอบสนองเช่นการโทรแบบไม่ซิงค์

สิ่งนี้จะทำ:

const [state, setState] = useState({ username: '', password: ''});

// later
setState({
    ...state,
    username: 'John'
});

หากคุณใช้ hooks ของบุคคลที่สามและไม่สามารถรวมสถานะเป็นวัตถุเดียวหรือใช้งานuseReducerได้วิธีแก้ปัญหาคือใช้:

ReactDOM.unstable_batchedUpdates(() => { ... })

แนะนำโดย Dan Abramov ที่นี่

ดูตัวอย่างนี้

ในการจำลองthis.setStateพฤติกรรมการผสานจากส่วนประกอบของคลาส React docs แนะนำให้ใช้รูปแบบการทำงานของการuseStateแพร่กระจายวัตถุ - ไม่จำเป็นสำหรับuseReducer:

setState(prevState => {
  return {...prevState, loading, data};
});

ตอนนี้ทั้งสองสถานะรวมเป็นหนึ่งซึ่งจะช่วยให้คุณประหยัดรอบการแสดงผล

มีประโยชน์อื่นที่มีวัตถุรัฐหนึ่งคือloadingและdataมีขึ้นอยู่กับรัฐ การเปลี่ยนแปลงสถานะที่ไม่ถูกต้องจะชัดเจนยิ่งขึ้นเมื่อรวมรัฐเข้าด้วยกัน:

setState({ loading: true, data }); // ups... loading, but we already set data

คุณได้ดียิ่งขึ้นสามารถให้แน่ใจว่าการรัฐที่สอดคล้องกัน โดย 1) การทำสถานะ - loading, success, errorฯลฯ - อย่างชัดเจนในรัฐและ 2 ของคุณ) โดยใช้useReducerตรรกะรัฐแค็ปซูลในการลดนี้:

const useData = () => {
  const [state, dispatch] = useReducer(reducer, /*...*/);

  useEffect(() => {
    api.get('/people').then(test => {
      if (test.ok) dispatch(["success", test.data.results]);
    });
  }, []);
};

const reducer = (state, [status, payload]) => {
  if (status === "success") return { ...state, data: payload, status };
  // keep state consistent, e.g. reset data, if loading
  else if (status === "loading") return { ...state, data: undefined, status };
  return state;
};

const App = () => {
  const { data, status } = useData();
  return status === "loading" ? <div> Loading... </div> : (
    // success, display data 
  )
}

const useData = () => {
  const [state, dispatch] = useReducer(reducer, {
    data: undefined,
    status: "loading"
  });

  useEffect(() => {
    fetchData_fakeApi().then(test => {
      if (test.ok) dispatch(["success", test.data.results]);
    });
  }, []);

  return state;
};

const reducer = (state, [status, payload]) => {
  if (status === "success") return { ...state, data: payload, status };
  // e.g. make sure to reset data, when loading.
  else if (status === "loading") return { ...state, data: undefined, status };
  else return state;
};

const App = () => {
  const { data, status } = useData();
  const count = useRenderCount();
  const countStr = `Re-rendered ${count.current} times`;

  return status === "loading" ? (
    <div> Loading (3 sec)... {countStr} </div>
  ) : (
    <div>
      Finished. Data: {JSON.stringify(data)}, {countStr}
    </div>
  );
}

//
// helpers
//

const useRenderCount = () => {
  const renderCount = useRef(0);
  useEffect(() => {
    renderCount.current += 1;
  });
  return renderCount;
};

const fetchData_fakeApi = () =>
  new Promise(resolve =>
    setTimeout(() => resolve({ ok: true, data: { results: [1, 2, 3] } }), 3000)
  );

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.0/umd/react.production.min.js" integrity="sha256-32Gmw5rBDXyMjg/73FgpukoTZdMrxuYW7tj8adbN8z4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.0/umd/react-dom.production.min.js" integrity="sha256-bjQ42ac3EN0GqK40pC9gGi/YixvKyZ24qMP/9HiGW7w=" crossorigin="anonymous"></script>
<div id="root"></div>
<script>var { useReducer, useEffect, useState, useRef } = React</script>

PS: อย่าลืมเติมคำนำหน้า Hooks แบบกำหนดเองด้วยuse( useDataแทนgetData) ผ่านไปยังโทรกลับไปไม่สามารถuseEffectasync

คำตอบเพิ่มเติมเล็กน้อยhttps://stackoverflow.com/a/53575023/121143

เย็น! สำหรับผู้ที่วางแผนจะใช้ hook นี้สามารถเขียนด้วยวิธีที่มีประสิทธิภาพเล็กน้อยในการทำงานกับฟังก์ชันเป็นอาร์กิวเมนต์เช่นนี้:

const useMergedState = initial => {
  const [state, setState] = React.useState(initial);
  const setMergedState = newState =>
    typeof newState == "function"
      ? setState(prevState => ({ ...prevState, ...newState(prevState) }))
      : setState(prevState => ({ ...prevState, ...newState }));
  return [state, setMergedState];
};

อัปเดต : เวอร์ชันที่ปรับให้เหมาะสมสถานะจะไม่ถูกแก้ไขเมื่อไม่มีการเปลี่ยนแปลงสถานะบางส่วนที่เข้ามา

const shallowPartialCompare = (obj, partialObj) =>
  Object.keys(partialObj).every(
    key =>
      obj.hasOwnProperty(key) &&
      obj[key] === partialObj[key]
  );

const useMergedState = initial => {
  const [state, setState] = React.useState(initial);
  const setMergedState = newIncomingState =>
    setState(prevState => {
      const newState =
        typeof newIncomingState == "function"
          ? newIncomingState(prevState)
          : newIncomingState;
      return shallowPartialCompare(prevState, newState)
        ? prevState
        : { ...prevState, ...newState };
    });
  return [state, setMergedState];
};

คุณยังสามารถใช้useEffectเพื่อตรวจจับการเปลี่ยนแปลงสถานะและอัปเดตค่าสถานะอื่น ๆ ตามนั้น