আমি কি একটি ব্যবহারের প্রভাবের হুকের মধ্যে স্থিতি স্থাপন করতে পারি?

Question 1

আসুন বলুন যে আমার কিছু রাজ্য রয়েছে যা অন্য কোনও রাজ্যের উপর নির্ভরশীল (যেমন যখন আমি যখন বি পরিবর্তন করতে চাই তখন পরিবর্তন হয়)।

এটি এমন একটি হুক তৈরি করা উপযুক্ত যা এ পর্যবেক্ষণ করে এবং ব্যবহারের প্রভাবের হুকের ভিতরে বি সেট করে?

প্রভাবগুলি কী ক্যাসকেড করবে, যখন আমি বোতামটি ক্লিক করব, তখন প্রথম প্রভাবটি আগুন লাগবে, ফলে বি পরিবর্তিত হবে, দ্বিতীয় প্রভাবটি আগুনে লাগবে, পরবর্তী রেন্ডার করার আগে? স্ট্রাকচারিং কোডের মতো কোনও পারফরম্যান্স ডাউনসাইড রয়েছে?

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

প্রভাবগুলি সর্বদা রেন্ডার পর্বটি শেষ হওয়ার পরে কার্যকর করা হয় এমনকি যদি আপনি একটি প্রভাবের মধ্যে স্থিতি স্থির করেন, অন্য প্রভাবটি আপডেট হওয়া অবস্থাটি পড়বে এবং রেন্ডার পর্বের পরে কেবলমাত্র এতে পদক্ষেপ নেবে।

যে bকারণে আপনি changing aএকই যুক্তিটি কার্যকর করতে চান এমন ক্ষেত্রে ছাড়া অন্য কারণগুলির কারণে পরিবর্তিত হতে পারে এমন সম্ভাবনা না থাকলে উভয় পদক্ষেপকে একইভাবে কার্যকর করা তার পক্ষে আরও ভাল said

Question 3

সাধারণভাবে বলতে গেলে, setStateভিতরে ব্যবহার করেuseEffect এমন একটি অসীম লুপ তৈরি হবে যা সম্ভবত আপনি তৈরি করতে চান না। সেই নিয়মের ক্ষেত্রে বেশ কয়েকটি ব্যতিক্রম রয়েছে যা আমি পরে নিয়ে যাব।

useEffectপ্রতিটি রেন্ডারের পরে ডাকা হয় এবং এর অভ্যন্তরে যখন setStateএটি ব্যবহার করা হয়, তখন এটি উপাদানটিকে পুনরায় রেন্ডার করতে দেয় যা কল করবে useEffectএবং এ জাতীয় কিছু।

জনপ্রিয় মামলা হল যে ব্যবহার useStateভেতরে useEffectএকটি অসীম লুপ কারণ হবে না হয় যখন আপনি একটি দ্বিতীয় আর্গুমেন্ট হিসাবে একটি খালি অ্যারে পাস useEffectমত useEffect(() => {....}, [])যার মানে প্রভাব ফাংশন একবার বলে অভিহিত হই প্রথম মাউন্ট / শুধুমাত্র রেন্ডার। আপনি যখন কোনও উপাদানগুলিতে ডেটা আনছেন তখন এটি ব্যাপকভাবে ব্যবহৃত হয় এবং আপনি উপাদানটির রাজ্যে অনুরোধের ডেটা সংরক্ষণ করতে চান।

Question 4

ভবিষ্যতের উদ্দেশ্যে, এটি খুব সাহায্য করতে পারে:

সেটস্টেট ইন ব্যবহার করা ঠিক আছে useEffectআপনার আছে কোনও লুপ তৈরি না করার জন্য ইতিমধ্যে বর্ণিত হিসাবে মনোযোগ দেওয়া দরকার।

তবে এটিই কেবল সমস্যা হতে পারে না। নিচে দেখ:

কল্পনা করুন যে আপনার কাছে এমন একটি উপাদান রয়েছে Compযা propsপিতামাতার কাছ থেকে প্রাপ্ত হয় এবং propsপরিবর্তনের অনুসারে আপনি Compতার রাজ্য সেট করতে চান । কিছু কারণে, আপনার প্রতিটি প্রপকে আলাদাভাবে পরিবর্তন করতে হবে useEffect:

এটা করো না

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

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

এটি উদাহরণের মতো দেখতে পারা যায় না এমন অবস্থার কোনও পরিবর্তন হতে পারে না: https://codesandbox.io/s/confident-lederberg-dtx7w

কারণ এই এই উদাহরণে ঘটতে ইহার কারণ উভয় useEffects একই চালানোর চক্র প্রতিক্রিয়া যখন আপনি পরিবর্তন উভয় prop.aএবং prop.bতাই এর মান {...state}যখন আপনি কি setStateঠিক উভয় একই useEffectকারণ তারা একই প্রেক্ষাপটে হয়। আপনি যখন দ্বিতীয়টি চালাবেন setStateএটি প্রথমটি প্রতিস্থাপন করবেsetState ।

এই ইনস্টল করুন

এই সমস্যার সমাধানটি মূলত এইভাবে কল করা হয় setState:

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

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

সমাধানটি এখানে দেখুন: https://codesandbox.io/s/mutable-surf-nynlx

আপনি যখন এগিয়ে যান তখন আপনি সর্বদা রাষ্ট্রের সর্বাধিক আপডেট হওয়া এবং সঠিক মান পাবেন setState ।

আমি আশা করি এটা কারো সাহায্যে লাগবে!

Question 5

useEffectএকটি নির্দিষ্ট প্রপ বা রাজ্য হুক করতে পারেন। সুতরাং, অসীম লুপ হুক এড়ানোর জন্য আপনার যে জিনিসটি করা দরকার তা হ'ল কিছু পরিবর্তনশীল বা স্থিতি কার্যকর করতে বাধ্য

উদাহরণ স্বরূপ:

useEffect(myeffectCallback, [])

উপরের প্রভাবটি কেবল একবার সরবরাহ করা হবে। এটি componentDidMountলাইফাইসাইকেলের অনুরূপ

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

উপরের প্রভাবটি কেবল আগুনে ছড়িয়ে দেবে কেবলমাত্র আমার রাষ্ট্র পরিবর্তিত হয়েছে এটি পরিবর্তনের পরিবর্তে componentDidUpdateপ্রতিটি পরিবর্তনকারী রাষ্ট্রই এটি জ্বালিয়ে দেবে না।

আপনি এই লিঙ্কটি যদিও আরও বিস্তারিত পড়তে পারেন

Question 6

? 1. আমি কি ব্যবহারের প্রভাবের হুকের ভিতরে রাজ্যটি সেট করতে পারি?

বস্তুত, আপনি রাষ্ট্র অবাধে সেট করতে পারেন যেখানে আপনি এটি প্রয়োজন - ভিতরে সহ useEffectএবং এমনকি রেন্ডারিং সময় । হুককে depsসঠিকভাবে এবং / অথবা শর্তাধীন স্থিতি দিয়ে অসীম লুপগুলি এড়ানো নিশ্চিত করুন ।

▶ 2. বলুন যে আমার কিছু রাজ্য রয়েছে যা অন্য কোনও রাজ্যের উপর নির্ভরশীল। এটি এমন একটি হুক তৈরি করা উপযুক্ত যা এ পর্যবেক্ষণ করে এবং ব্যবহারের প্রভাবের হুকের ভিতরে বি সেট করে?

আপনি কেবল ক্লাসিক ব্যবহারের ক্ষেত্রে এর জন্য বর্ণনা করেছেনuseReducer :

useReduceruseStateযখন আপনার কাছে জটিল রাষ্ট্র যুক্তি থাকে যা একাধিক উপ-মানগুলিতে জড়িত থাকে বা যখন পরবর্তী রাজ্যটি পূর্বেরটির উপর নির্ভর করে তখন সাধারণত তার চেয়ে ভাল । ( দস্তাবেজের প্রতিক্রিয়া )

যখন কোনও রাষ্ট্রের ভেরিয়েবল সেট করা হয় তখন অন্য রাষ্ট্রের ভেরিয়েবলের বর্তমান মানের উপর নির্ভর করে , আপনি তাদের উভয়কে প্রতিস্থাপনের চেষ্টা করতে চাইতে পারেন । [...] আপনি যখন নিজেকে লেখার বিষয়টি খুঁজে পান , তার পরিবর্তে একটি হ্রাসকারী ব্যবহার করার জন্য এটি ভাল সময় time ( ড্যান আব্রামভ, অত্যুক্তি করা ব্লগ )useReducer setSomething(something => ...)

কোড স্নিপেট দেখান

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>

স্নিপেট প্রসারিত করুন

? 3. প্রভাবগুলি কী ক্যাসকেড করবে, যখন আমি বোতামটি ক্লিক করব, তখন প্রথম প্রভাবটি আগুন লাগবে, ফলে বি পরিবর্তিত হবে, দ্বিতীয় প্রভাবটি পরবর্তী রেন্ডার করার আগে আগুনে ফেলেছে?

useEffectরেন্ডার প্রতিশ্রুতিবদ্ধ হওয়ার পরে এবং ডম পরিবর্তনগুলি প্রয়োগ করার পরে সর্বদা চলমান । প্রথম প্রভাব অগ্নি, পরিবর্তন bএবং একটি পুনরায় রেন্ডার কারণ। এই রেন্ডারটি সম্পন্ন হওয়ার পরে, দ্বিতীয় প্রভাব bপরিবর্তনের কারণে চলবে ।

কোড স্নিপেট দেখান

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>

স্নিপেট প্রসারিত করুন

? 4. স্ট্রাকচারিং কোডের মতো কোনও পারফরম্যান্স ডাউনসাইডস কি আছে?

হ্যাঁ. অবস্থা পরিবর্তন মোড়কে bএকটি পৃথক মধ্যে useEffectজন্য a, ব্রাউজার একটি অতিরিক্ত বিন্যাস / পেইন্ট ফেজ আছে - এইসব প্রভাব সম্ভাব্য ব্যবহারকারীর জন্য দৃশ্যমান। আপনি যদি useReducerচেষ্টা করার কোনও উপায় না পান তবে আপনি সরাসরি bএকসাথে রাষ্ট্র পরিবর্তন করতে পারেন a:

কোড স্নিপেট দেখান

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>

স্নিপেট প্রসারিত করুন