วิธีเปรียบเทียบ oldValues และ newValues บน React Hooks useEffect?

Question 1

สมมติว่าฉันมี 3 อินพุต: rate, sendAmount และ earnAmount ฉันใส่ 3 อินพุตนั้นไว้ใช้ กฎคือ:

ถ้า sendAmount เปลี่ยนแปลงฉันจะคำนวณ receiveAmount = sendAmount * rate
หากได้รับการเปลี่ยนแปลงฉันคำนวณ sendAmount = receiveAmount / rate
หากอัตราเปลี่ยนแปลงฉันคำนวณว่าreceiveAmount = sendAmount * rateเมื่อใดsendAmount > 0หรือคำนวณsendAmount = receiveAmount / rateเมื่อใดreceiveAmount > 0

นี่คือรหัสแซนด์บ็อกซ์https://codesandbox.io/s/pkl6vn7x6jเพื่อสาธิตปัญหา

มีวิธีที่จะเปรียบเทียบได้oldValuesและnewValuesต้องการบนcomponentDidUpdateแทนการขนย้ายวัสดุ 3 สำหรับกรณีนี้หรือไม่?

ขอบคุณ

นี่คือทางออกสุดท้ายของฉันกับusePrevious https://codesandbox.io/s/30n01w2r06

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

Question 2

คุณสามารถเขียน hook ที่กำหนดเองเพื่อจัดเตรียมอุปกรณ์ประกอบฉากก่อนหน้านี้โดยใช้useRef

function usePrevious(value) {
  const ref = useRef();
  useEffect(() => {
    ref.current = value;
  });
  return ref.current;
}

แล้วใช้ใน useEffect

const Component = (props) => {
    const {receiveAmount, sendAmount } = props
    const prevAmount = usePrevious({receiveAmount, sendAmount});
    useEffect(() => {
        if(prevAmount.receiveAmount !== receiveAmount) {

         // process here
        }
        if(prevAmount.sendAmount !== sendAmount) {

         // process here
        }
    }, [receiveAmount, sendAmount])
}

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

Question 3

ในกรณีที่ใครก็ตามกำลังมองหาเวอร์ชันการใช้งาน TypeScript

ใน.tsxโมดูล:

import { useEffect, useRef } from "react";

const usePrevious = <T extends unknown>(value: T): T | undefined => {
  const ref = useRef<T>();
  useEffect(() => {
    ref.current = value;
  });
  return ref.current;
};

หรือใน.tsโมดูล:

import { useEffect, useRef } from "react";

const usePrevious = <T>(value: T): T | undefined => {
  const ref = useRef<T>();
  useEffect(() => {
    ref.current = value;
  });
  return ref.current;
};

Question 4

ตัวเลือกที่ 1 - เรียกใช้ useEffect เมื่อค่าเปลี่ยนแปลง

const Component = (props) => {

  useEffect(() => {
    console.log("val1 has changed");
  }, [val1]);

  return <div>...</div>;
};

การสาธิต

ตัวเลือกที่ 2 - useHasChanged hook

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

const Component = (props) => {
  const hasVal1Changed = useHasChanged(val1)

  useEffect(() => {
    if (hasVal1Changed ) {
      console.log("val1 has changed");
    }
  });

  return <div>...</div>;
};

const useHasChanged= (val: any) => {
    const prevVal = usePrevious(val)
    return prevVal !== val
}

const usePrevious = (value) => {
    const ref = useRef();
    useEffect(() => {
      ref.current = value;
    });
    return ref.current;
}

การสาธิต

Question 5

ฉันเพิ่งเผยแพร่react-deltaซึ่งแก้สถานการณ์แบบนี้ได้ ในความคิดของฉันuseEffectมีความรับผิดชอบมากเกินไป

หน้าที่ความรับผิดชอบ

จะเปรียบเทียบค่าทั้งหมดในอาร์เรย์การอ้างอิงโดยใช้ Object.is
มันเรียกใช้เอฟเฟกต์ / ล้างข้อมูลตามผลลัพธ์ของ # 1

การทำลายความรับผิดชอบ

react-deltaแบ่งuseEffectความรับผิดชอบออกเป็นตะขอเล็ก ๆ หลายอัน

ความรับผิดชอบ # 1

ความรับผิดชอบ # 2

useConditionalEffect(callback, boolean)

จากประสบการณ์ของฉันแนวทางนี้มีความยืดหยุ่นสะอาดและรัดกุมกว่าuseEffect/ useRefวิธีแก้ปัญหา

Question 6

จากคำตอบที่ยอมรับซึ่งเป็นทางเลือกอื่นที่ไม่ต้องใช้ hook แบบกำหนดเอง:

const Component = (props) => {
  const { receiveAmount, sendAmount } = props;
  const prevAmount = useRef({ receiveAmount, sendAmount }).current;
  useEffect(() => {
    if (prevAmount.receiveAmount !== receiveAmount) {
     // process here
    }
    if (prevAmount.sendAmount !== sendAmount) {
     // process here
    }
    return () => { 
      prevAmount.receiveAmount = receiveAmount;
      prevAmount.sendAmount = sendAmount;
    };
  }, [receiveAmount, sendAmount]);
};

Question 7

เนื่องจากรัฐไม่ได้เป็นคู่แน่นด้วยเช่นองค์ประกอบในส่วนการทำงานของรัฐก่อนหน้านี้ไม่สามารถเข้าถึงได้ในโดยไม่บันทึกมันเป็นครั้งแรกเช่นกับuseEffect useRefนอกจากนี้ยังหมายความว่าการอัปเดตสถานะอาจถูกนำไปใช้อย่างไม่ถูกต้องในตำแหน่งที่ไม่ถูกต้องเนื่องจากสถานะก่อนหน้านี้มีอยู่ในsetStateฟังก์ชันตัวอัปเดต

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

นี่คือตัวอย่างลักษณะที่อาจมีลักษณะดังนี้:

function reducer({ sendAmount, receiveAmount, rate }, action) {
  switch (action.type) {
    case "sendAmount":
      sendAmount = action.payload;
      return {
        sendAmount,
        receiveAmount: sendAmount * rate,
        rate
      };
    case "receiveAmount":
      receiveAmount = action.payload;
      return {
        sendAmount: receiveAmount / rate,
        receiveAmount,
        rate
      };
    case "rate":
      rate = action.payload;
      return {
        sendAmount: receiveAmount ? receiveAmount / rate : sendAmount,
        receiveAmount: sendAmount ? sendAmount * rate : receiveAmount,
        rate
      };
    default:
      throw new Error();
  }
}

function handleChange(e) {
  const { name, value } = e.target;
  dispatch({
    type: name,
    payload: value
  });
}

...
const [state, dispatch] = useReducer(reducer, {
  rate: 2,
  sendAmount: 0,
  receiveAmount: 0
});
...

Question 8

การใช้ Ref จะนำเสนอบั๊กรูปแบบใหม่ในแอป

ลองดูกรณีนี้โดยใช้usePreviousที่มีคนแสดงความคิดเห็นก่อนหน้านี้:

prop.minTime: 5 ==> ref.current = 5 | ตั้งค่าการอ้างอิงปัจจุบัน
prop.minTime: 5 ==> ref.current = 5 | ค่าใหม่เท่ากับ ref.current
prop.minTime: 8 ==> ref.current = 5 | ค่าใหม่ไม่เท่ากับ ref.current
prop.minTime: 5 ==> ref.current = 5 | ค่าใหม่เท่ากับ ref.current

ดังที่เราเห็นที่นี่เราไม่ได้อัปเดตภายในrefเนื่องจากเราใช้useEffect

Question 9

สำหรับการเปรียบเทียบเสาที่เรียบง่ายจริงๆคุณสามารถใช้ได้ useEffectเพื่อตรวจสอบได้อย่างง่ายดายเพื่อดูว่ามีการอัปเดตเสาหรือไม่

const myComponent = ({ prop }) => {
  useEffect(() => {
    ---Do stuffhere----
  }, [prop])
}

useEffect จากนั้นจะรันโค้ดของคุณก็ต่อเมื่อ prop เปลี่ยนไป

Question 10

usePreviousนี่เป็นตะขอที่กำหนดเองที่ผมใช้ซึ่งผมเชื่อว่าจะง่ายกว่าการใช้

import { useRef, useEffect } from 'react'

// useTransition :: Array a => (a -> Void, a) -> Void
//                              |_______|  |
//                                  |      |
//                              callback  deps
//
// The useTransition hook is similar to the useEffect hook. It requires
// a callback function and an array of dependencies. Unlike the useEffect
// hook, the callback function is only called when the dependencies change.
// Hence, it's not called when the component mounts because there is no change
// in the dependencies. The callback function is supplied the previous array of
// dependencies which it can use to perform transition-based effects.
const useTransition = (callback, deps) => {
  const func = useRef(null)

  useEffect(() => {
    func.current = callback
  }, [callback])

  const args = useRef(null)

  useEffect(() => {
    if (args.current !== null) func.current(...args.current)
    args.current = deps
  }, deps)
}

คุณจะใช้useTransitionดังต่อไปนี้

useTransition((prevRate, prevSendAmount, prevReceiveAmount) => {
  if (sendAmount !== prevSendAmount || rate !== prevRate && sendAmount > 0) {
    const newReceiveAmount = sendAmount * rate
    // do something
  } else {
    const newSendAmount = receiveAmount / rate
    // do something
  }
}, [rate, sendAmount, receiveAmount])

หวังว่าจะช่วยได้

Question 11

หากคุณต้องการuseEffectแนวทางการเปลี่ยน:

const usePreviousEffect = (fn, inputs = []) => {
  const previousInputsRef = useRef([...inputs])

  useEffect(() => {
    fn(previousInputsRef.current)
    previousInputsRef.current = [...inputs]
  }, inputs)
}

และใช้มันดังนี้:

usePreviousEffect(
  ([prevReceiveAmount, prevSendAmount]) => {
    if (prevReceiveAmount !== receiveAmount) // side effect here
    if (prevSendAmount !== sendAmount) // side effect here
  },
  [receiveAmount, sendAmount]
)

โปรดทราบว่าในครั้งแรกที่เอฟเฟกต์ทำงานค่าก่อนหน้านี้ที่ส่งผ่านไปยังของคุณfnจะเหมือนกับค่าอินพุตเริ่มต้นของคุณ สิ่งนี้จะสำคัญสำหรับคุณก็ต่อเมื่อคุณต้องการทำบางสิ่งบางอย่างเมื่อค่าไม่เปลี่ยนแปลง

Question 12

คุณสามารถใช้useImmerตรงข้ามกับ useState และเข้าถึงสถานะ ตัวอย่าง: https://css-tricks.com/build-a-chat-app-using-react-hooks-in-100-lines-of-code/

วิธีเปรียบเทียบ oldValues ​​และ newValues ​​บน React Hooks useEffect?

ตัวเลือกที่ 1 - เรียกใช้ useEffect เมื่อค่าเปลี่ยนแปลง

ตัวเลือกที่ 2 - useHasChanged hook

หน้าที่ความรับผิดชอบ

การทำลายความรับผิดชอบ

วิธีเปรียบเทียบ oldValues และ newValues บน React Hooks useEffect?