Tôi có thể đặt trạng thái bên trong móc useEffect không

Question 1

Giả sử tôi có một số trạng thái phụ thuộc vào một số trạng thái khác (ví dụ: khi A thay đổi, tôi muốn B thay đổi).

Có thích hợp để tạo một hook quan sát A và đặt B bên trong hook useEffect không?

Liệu các hiệu ứng có phân tầng như vậy, khi tôi nhấp vào nút, hiệu ứng đầu tiên sẽ kích hoạt, khiến b thay đổi, khiến hiệu ứng thứ hai kích hoạt, trước khi kết xuất tiếp theo? Có bất kỳ nhược điểm nào về hiệu suất khi cấu trúc mã như thế này không?

let MyComponent = props => {
  let [a, setA] = useState(1)
  let [b, setB] = useState(2)
  useEffect(
    () => {
      if (/*some stuff is true*/) {
        setB(3)
      }
    },
    [a],
  )
  useEffect(
    () => {
      // do some stuff
    },
    [b],
  )

  return (
    <button
      onClick={() => {
        setA(5)
      }}
    >
      click me
    </button>
  )
}

Question 2

Các hiệu ứng luôn được thực thi sau khi giai đoạn kết xuất hoàn thành ngay cả khi bạn đặtState bên trong một hiệu ứng, một hiệu ứng khác sẽ đọc trạng thái cập nhật và chỉ thực hiện hành động trên nó sau giai đoạn kết xuất.

Đã nói rằng có lẽ tốt hơn nếu thực hiện cả hai hành động với cùng một hiệu ứng trừ khi có khả năng bcó thể thay đổi do các lý do khác ngoài changing atrường hợp đó bạn cũng muốn thực hiện cùng một logic

Question 3

Nói chung, sử dụng setStatebên trong useEffectsẽ tạo ra một vòng lặp vô hạn mà rất có thể bạn không muốn gây ra. Có một vài ngoại lệ đối với quy tắc đó mà tôi sẽ đề cập sau.

useEffectđược gọi sau mỗi lần kết xuất và khi setStateđược sử dụng bên trong nó, nó sẽ khiến thành phần được kết xuất lại sẽ gọi useEffect, vân vân và vân vân.

Một trong những trường hợp phổ biến mà việc sử dụng useStatebên trong của useEffectsẽ không gây ra vòng lặp vô hạn là khi bạn chuyển một mảng trống làm đối số thứ hai để useEffectthích useEffect(() => {....}, []), điều đó có nghĩa là hàm hiệu ứng nên được gọi một lần: chỉ sau lần gắn kết / hiển thị đầu tiên. Điều này được sử dụng rộng rãi khi bạn đang tìm nạp dữ liệu trong một thành phần và bạn muốn lưu dữ liệu yêu cầu ở trạng thái của thành phần.

Question 4

Đối với các mục đích trong tương lai, điều này cũng có thể giúp:

Sử dụng setState là được, useEffectbạn chỉ cần chú ý như đã mô tả để không tạo vòng lặp.

Nhưng nó không phải là vấn đề duy nhất có thể xảy ra. Xem bên dưới:

Hãy tưởng tượng rằng bạn có một thành phần Compnhận được propstừ cha mẹ và theo một propsthay đổi mà bạn muốn thiết lập Comptrạng thái của. Vì một số lý do, bạn cần thay đổi cho mỗi chỗ dựa theo một cách khác nhau useEffect:

KHÔNG LÀM ĐIỀU NÀY

useEffect(() => {
  setState({ ...state, a: props.a });
}, [props.a]);

useEffect(() => {
  setState({ ...state, b: props.b });
}, [props.b]);

Nó có thể không bao giờ thay đổi trạng thái của một như bạn có thể thấy trong ví dụ này: https://codesandbox.io/s/confident-lederberg-dtx7w

Lý do tại sao điều này xảy ra trong ví dụ này là vì cả hai useEffects đều chạy trong cùng một chu kỳ phản ứng khi bạn thay đổi cả hai prop.avà prop.bvì vậy giá trị của {...state}thời điểm bạn làm setStatelà hoàn toàn giống nhau trong cả hai useEffectvì chúng ở trong cùng một ngữ cảnh. Khi bạn chạy cái thứ hai, setStatenó sẽ thay thế cái đầu tiên setState.

LÀM VIỆC NÀY INSTEAD

Giải pháp cho vấn đề này về cơ bản là gọi setStatenhư thế này:

useEffect(() => {
  setState(state => ({ ...state, a: props.a }));
}, [props.a]);

useEffect(() => {
  setState(state => ({ ...state, b: props.b }));
}, [props.b]);

Kiểm tra giải pháp tại đây: https://codesandbox.io/s/mutable-surf-nynlx

Bây giờ, bạn luôn nhận được giá trị cập nhật và chính xác nhất của trạng thái khi bạn tiến hành setState.

Tôi hi vọng điêu nay se giup được ai đo!

Question 5

useEffectcó thể móc vào một chỗ dựa hoặc trạng thái nhất định. vì vậy, điều bạn cần làm để tránh móc vòng lặp vô hạn là ràng buộc một số biến hoặc trạng thái có hiệu lực

Ví dụ:

useEffect(myeffectCallback, [])

hiệu ứng trên sẽ chỉ kích hoạt khi thành phần đã hiển thị. điều này tương tự như componentDidMountvòng đời

const [something, setSomething] = withState(0)
const [myState, setMyState] = withState(0)
useEffect(() => {
  setSomething(0)
}, myState)

hiệu ứng trên sẽ chỉ kích hoạt trạng thái của tôi đã thay đổi, điều này tương tự như componentDidUpdatengoại trừ không phải mọi trạng thái thay đổi sẽ kích hoạt nó.

Bạn có thể đọc thêm chi tiết thông qua liên kết này

Question 6

▶ 1. Tôi có thể đặt trạng thái bên trong móc useEffect không?

Về nguyên tắc, bạn có thể thiết lập trạng thái một cách tự do ở nơi bạn cần - bao gồm cả bên trong useEffectvà ngay cả trong quá trình kết xuất . Chỉ cần đảm bảo tránh các vòng lặp vô hạn bằng cách thiết lập Hook depsđúng cách và / hoặc trạng thái có điều kiện.

▶ 2. Cho phép nói rằng tôi có một số trạng thái phụ thuộc vào một số trạng thái khác. Có thích hợp để tạo một hook quan sát A và đặt B bên trong hook useEffect không?

Bạn chỉ cần mô tả các trường hợp sử dụng cổ điển cho useReducer:

useReducerthường thích hợp hơn useStatekhi bạn có logic trạng thái phức tạp liên quan đến nhiều giá trị con hoặc khi trạng thái tiếp theo phụ thuộc vào trạng thái trước đó. (Tài liệu phản ứng )

Khi đặt một biến trạng thái phụ thuộc vào giá trị hiện tại của một biến trạng thái khác, bạn có thể muốn thử thay thế cả hai bằng useReducer. [...] Khi bạn thấy mình đang viết setSomething(something => ...) , đây là thời điểm tốt để cân nhắc sử dụng bộ giảm tốc. ( Dan Abramov, Blog phản ứng quá mức )

Hiển thị đoạn mã

let MyComponent = () => {
  let [state, dispatch] = useReducer(reducer, { a: 1, b: 2 });

  useEffect(() => {
    console.log("Some effect with B");
  }, [state.b]);

  return (
    <div>
      <p>A: {state.a}, B: {state.b}</p>
      <button onClick={() => dispatch({ type: "SET_A", payload: 5 })}>
        Set A to 5 and Check B
      </button>
      <button onClick={() => dispatch({ type: "INCREMENT_B" })}>
        Increment B
      </button>
    </div>
  );
};

// B depends on A. If B >= A, then reset B to 1.
function reducer(state, { type, payload }) {
  const someCondition = state.b >= state.a;

  if (type === "SET_A")
    return someCondition ? { a: payload, b: 1 } : { ...state, a: payload };
  else if (type === "INCREMENT_B") return { ...state, b: state.b + 1 };
  return state;
}

ReactDOM.render(<MyComponent />, 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 } = React</script>

Mở rộng đoạn mã

▶ 3. Liệu các hiệu ứng có phân tầng như vậy, khi tôi nhấp vào nút, hiệu ứng đầu tiên sẽ kích hoạt, khiến b thay đổi, khiến hiệu ứng thứ hai kích hoạt, trước khi hiển thị tiếp theo?

useEffectluôn chạy sau khi kết xuất được cam kết và các thay đổi DOM được áp dụng. Hiệu ứng đầu tiên kích hoạt, thay đổi bvà gây ra kết xuất. Sau khi kết xuất này hoàn tất, hiệu ứng thứ hai sẽ chạy do các bthay đổi.

Hiển thị đoạn mã

let MyComponent = props => {
  console.log("render");
  let [a, setA] = useState(1);
  let [b, setB] = useState(2);

  let isFirstRender = useRef(true);

  useEffect(() => {
    console.log("useEffect a, value:", a);
    if (isFirstRender.current) isFirstRender.current = false;
    else setB(3);
    return () => {
      console.log("unmount useEffect a, value:", a);
    };
  }, [a]);
  useEffect(() => {
    console.log("useEffect b, value:", b);
    return () => {
      console.log("unmount useEffect b, value:", b);
    };
  }, [b]);

  return (
    <div>
      <p>a: {a}, b: {b}</p>
      <button
        onClick={() => {
          console.log("Clicked!");
          setA(5);
        }}
      >
        click me
      </button>
    </div>
  );
};

ReactDOM.render(<MyComponent />, 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>

Mở rộng đoạn mã

▶ 4. Có bất kỳ nhược điểm nào về hiệu suất khi cấu trúc mã như thế này không?

Đúng. Bằng cách gói thay đổi trạng thái của bmột riêng biệt useEffectcho a, trình duyệt có một giai đoạn bố trí / sơn bổ sung - những hiệu ứng này có tiềm năng rõ ràng cho người sử dụng. Nếu không có cách nào bạn muốn useReducerthử, bạn có thể thay đổi btrạng thái cùng với atrực tiếp:

Hiển thị đoạn mã

let MyComponent = () => {
  console.log("render");
  let [a, setA] = useState(1);
  let [b, setB] = useState(2);

  useEffect(() => {
    console.log("useEffect b, value:", b);
    return () => {
      console.log("unmount useEffect b, value:", b);
    };
  }, [b]);

  const handleClick = () => {
    console.log("Clicked!");
    setA(5);
    b >= 5 ? setB(1) : setB(b + 1);
  };

  return (
    <div>
      <p>
        a: {a}, b: {b}
      </p>
      <button onClick={handleClick}>click me</button>
    </div>
  );
};

ReactDOM.render(<MyComponent />, 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>

Mở rộng đoạn mã