Làm cách nào để so sánh oldValues ​​và newValues ​​trên React Hook sử dụngEffect?

Giả sử tôi có 3 đầu vào: tỷ lệ, sendAmount và receiveAmount. Tôi đặt 3 đầu vào đó vào các thông số khác nhau của useEffect. Các quy tắc là:

• Nếu sendAmount thay đổi, tôi tính receiveAmount = sendAmount * rate
• Nếu receiveAmount thay đổi, tôi tính sendAmount = receiveAmount / rate
• Nếu tỷ lệ thay đổi, tôi tính receiveAmount = sendAmount * ratekhi nào sendAmount > 0hoặc tôi tính sendAmount = receiveAmount / ratekhi nàoreceiveAmount > 0

Dưới đây là mãandbox https://codesandbox.io/s/pkl6vn7x6j để trình bày vấn đề.

Có cách nào để so sánh oldValuesvà newValuesthích componentDidUpdatethay vì làm 3 xử lý cho trường hợp này không?

Cảm ơn

Đây là giải pháp cuối cùng của tôi với usePrevious https://codesandbox.io/s/30n01w2r06

Trong trường hợp này, tôi không thể sử dụng nhiều useEffectvì mỗi thay đổi sẽ dẫn đến cùng một cuộc gọi mạng. Đó là lý do tại sao tôi cũng sử dụng changeCountđể theo dõi sự thay đổi. Điều này changeCountcũng hữu ích để theo dõi các thay đổi chỉ từ cục bộ, vì vậy tôi có thể ngăn cuộc gọi mạng không cần thiết vì những thay đổi từ máy chủ.

Bạn có thể viết một hook tùy chỉnh để cung cấp cho bạn một đạo cụ trước đó bằng cách sử dụng useRef

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

và sau đó sử dụng nó trong 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])
}

Tuy nhiên, rõ ràng hơn và có thể tốt hơn và rõ ràng hơn để đọc và hiểu nếu bạn sử dụng hai useEffectriêng biệt cho mỗi id thay đổi mà bạn muốn xử lý chúng riêng biệt

Bất cứ ai cũng đang tìm kiếm một phiên bản TypeScript của usePreingly:

import { useEffect, useRef } from "react";

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

Tùy chọn 1 - hookCompare hook

So sánh giá trị hiện tại với giá trị trước đó là một mẫu phổ biến và biện minh cho một móc tùy chỉnh của chính nó che giấu các chi tiết triển khai.

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

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

const Component = (props) => {
  ...
  const hasVal1Changed = useCompare(val1)
  const hasVal2Changed = useCompare(val2);
  useEffect(() => {
    if (hasVal1Changed ) {
      console.log("val1 has changed");
    }
    if (hasVal2Changed ) {
      console.log("val2 has changed");
    }
  });

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

Bản giới thiệu

Tùy chọn 2 - chạy useEffect khi giá trị thay đổi

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

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

Bản giới thiệu

Tôi vừa xuất bản Reac-delta để giải quyết loại kịch bản chính xác này. Theo tôi, useEffectcó quá nhiều trách nhiệm.

Trách nhiệm

1. Nó so sánh tất cả các giá trị trong mảng phụ thuộc của nó bằng cách sử dụng Object.is
2. Nó chạy các cuộc gọi lại hiệu ứng / dọn dẹp dựa trên kết quả của # 1

Phá vỡ trách nhiệm

react-deltaphá vỡ useEffecttrách nhiệm của mình thành một số móc nhỏ hơn.

Trách nhiệm số 1

• usePrevious(value)
• useLatest(value)
• useDelta(value, options)
• useDeltaArray(valueArray, options)
• useDeltaObject(valueObject, options)
• some(deltaArray)
• every(deltaArray)

Trách nhiệm số 2

• useConditionalEffect(callback, boolean)

Theo kinh nghiệm của tôi, cách tiếp cận này linh hoạt, sạch sẽ và ngắn gọn hơn useEffect/ useRefgiải pháp.

Vì trạng thái không được kết hợp chặt chẽ với thể hiện thành phần trong các thành phần chức năng, ví dụ, trạng thái trước đó không thể được truy cập useEffectmà không lưu nó trước useRef. Điều này cũng có nghĩa là cập nhật trạng thái có thể được thực hiện không chính xác ở vị trí sai vì trạng thái trước đó có sẵn bên trong setStatechức năng cập nhật.

Đây là trường hợp sử dụng tốt để useReducercung cấp cửa hàng giống Redux và cho phép triển khai mẫu tương ứng. Cập nhật trạng thái được thực hiện rõ ràng, do đó không cần phải tìm ra tài sản nhà nước nào được cập nhật; điều này đã rõ ràng từ hành động được gửi đi.

Đây là một ví dụ giống như:

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
});
...

Sử dụng Ref sẽ giới thiệu một loại lỗi mới vào ứng dụng.

Hãy xem trường hợp này bằng cách sử dụng usePreviousai đó đã nhận xét trước:

1. prop.minTime: 5 ==> ref.cản = 5 | đặt ref.c hiện tại
2. prop.minTime: 5 ==> ref.cản = 5 | giá trị mới bằng ref.c hiện tại
3. prop.minTime: 8 ==> ref.cản = 5 | giá trị mới KHÔNG bằng ref.c hiện tại
4. prop.minTime: 5 ==> ref.cản = 5 | giá trị mới bằng ref.c hiện tại

Như chúng ta có thể thấy ở đây, chúng tôi không cập nhật nội bộ refvì chúng tôi đang sử dụnguseEffect

Để so sánh prop thực sự đơn giản, bạn có thể sử dụng useEffect để dễ dàng kiểm tra xem liệu prop có được cập nhật hay không.

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

}

useEffect sau đó sẽ chỉ chạy mã của bạn nếu prop thay đổi.

Bỏ qua câu trả lời được chấp nhận, một giải pháp thay thế không yêu cầu móc tùy chỉnh:

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]);
};

Đây là một hook tùy chỉnh mà tôi sử dụng mà tôi tin là trực quan hơn so với sử dụng 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)
}

Bạn sẽ sử dụng useTransitionnhư sau.

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])

Mong rằng sẽ giúp.