উপাদানগুলিতে ব্যবহারকারীর স্টেট থেকে একাধিক কল স্টেট আপডেটেটরে একাধিক পুনঃ-রেন্ডার কারণ

Question 1

আমি প্রথমবারের জন্য রিয়েক্ট হুকগুলি চেষ্টা করছি এবং যতক্ষণ না বুঝেছি যে আমি যখন তথ্য পেয়েছি এবং দুটি পৃথক রাষ্ট্রীয় ভেরিয়েবল (ডেটা এবং লোডিং পতাকা) আপডেট করি তখন আমার উপাদান (একটি ডাটা টেবিল) দু'বার রেন্ডার করা হয়, যদিও উভয় কল রয়েছে রাষ্ট্র আপডেটে একই ফাংশন ঘটছে। এখানে আমার এপিআই ফাংশন যা আমার উপাদানগুলিতে উভয় ভেরিয়েবল ফিরিয়ে দিচ্ছে।

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

একটি সাধারণ শ্রেণীর উপাদানগুলিতে আপনি রাষ্ট্রকে আপডেট করার জন্য একক কল করতে পারেন যা একটি জটিল বিষয় হতে পারে তবে "হুক্স ওয়ে" বলে মনে হয় রাষ্ট্রকে ছোট ইউনিটে বিভক্ত করা হবে, যার একটি পার্শ্ব প্রতিক্রিয়া মনে হয় একাধিক পুনরায়- তারা পৃথকভাবে আপডেট করা হলে রেন্ডার দেয়। কোন ধারণা কীভাবে এটি প্রশমিত করবেন?

Question 2

আপনি loadingরাষ্ট্র এবং dataরাষ্ট্রকে একটি রাষ্ট্রের বস্তুর সাথে সংযুক্ত করতে পারেন এবং তারপরে আপনি একটি setStateকল করতে পারেন এবং কেবলমাত্র একটি রেন্ডার থাকবে।

দ্রষ্টব্য:setState শ্রেণীর উপাদানগুলির বিপরীতে , setStateথেকে useStateপ্রাপ্তরা বিদ্যমান অবস্থার সাথে বস্তুগুলিকে একীভূত করে না, এটি বস্তুকে পুরোপুরি প্রতিস্থাপন করে। আপনি যদি একীভূত করতে চান তবে আপনাকে পূর্বের অবস্থাটি পড়তে হবে এবং নতুন মানগুলির সাথে নিজেই এটি মার্জ করতে হবে। দস্তাবেজগুলি পড়ুন ।

যতক্ষণ না আপনি নির্ধারণ করে ফেলেছেন যে আপনার পারফরম্যান্স সমস্যা আছে ততক্ষণ অতিরিক্ত রেন্ডারদের কল করার বিষয়ে আমি খুব বেশি চিন্তা করব না। রেন্ডারিং (প্রতিক্রিয়া প্রসঙ্গে) এবং আসল ডিওমে ভার্চুয়াল ডোম আপডেটগুলি করা বিভিন্ন বিষয়। এখানে রেন্ডারিংটি ভার্চুয়াল ডিওএম উত্পাদন করার কথা উল্লেখ করছে এবং ব্রাউজার ডিওএম আপডেট করার বিষয়ে নয়। প্রতিক্রিয়া setStateকলগুলি ব্যাচ করতে পারে এবং চূড়ান্ত নতুন রাষ্ট্রের সাথে ব্রাউজার ডিওএম আপডেট করতে পারে ।

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>

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

বিকল্প - আপনার নিজের রাজ্যের মার্জার হুক লিখুন

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>

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

Question 3

এটি ব্যবহার করে আরও একটি সমাধান রয়েছে 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
}

Question 4

প্রতিক্রিয়া-হুকগুলিতে ব্যাচিংয়ের আপডেট https://github.com/facebook/react/issues/14259

প্রতিক্রিয়া-ভিত্তিক ইভেন্টের মধ্যে থেকে বাটন ক্লিক বা ইনপুট পরিবর্তনের মতো ট্রিগার করা হলে বর্তমানে রাষ্ট্রীয় আপডেটগুলি ব্যাচ করবে। এটি ব্যাচ আপডেটগুলি যদি অ্যাসিঙ্ক কলের মতো প্রতিক্রিয়া ইভেন্ট হ্যান্ডলারের বাইরে ট্রিগার করা হয় তবে তা তা করবে না।

Question 5

এটি করবে:

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

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

Question 6

যদি আপনি তৃতীয় পক্ষের হুক ব্যবহার করছেন এবং রাষ্ট্রকে একটি বস্তু বা ব্যবহারে মার্জ করতে না পারেন useReducer, তবে সমাধানটি হ'ল:

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

এখানে ড্যান আব্রামভ প্রস্তাবিত

এই উদাহরণটি দেখুন

Question 7

প্রতিলিপি নির্মাণের জন্য this.setStateবর্গ উপাদানগুলো থেকে একত্রীকরণ আচরণ, প্রতিক্রিয়া ডক্স সুপারিশ কার্যকরী ফর্ম ব্যবহার করার জন্য 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একটি হ্রাসকারক মধ্যে encapsulate রাষ্ট্র যুক্তিবিজ্ঞান করুন:

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>

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

দ্রষ্টব্য: নিশ্চিত করুন উপসর্গ সাথে কাস্টম হুক্স use( useDataপরিবর্তে getData)। এছাড়াও পাস করা কলব্যাক হতে useEffectপারে না async।

Question 8

Https://stackoverflow.com/a/53575023/121143 উত্তর দেওয়ার জন্য একটি সামান্য সংযোজন

কুল! যারা এই হুক ব্যবহারের পরিকল্পনা করছেন তাদের পক্ষে এটি যুক্তি হিসাবে ফাংশন নিয়ে কাজ করার জন্য কিছুটা শক্ত ভাবে লেখা যেতে পারে যেমন:

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

Question 9

আপনি useEffectএকটি রাষ্ট্র পরিবর্তন সনাক্ত করতে এবং সেই অনুযায়ী অন্যান্য রাষ্ট্রীয় মান আপডেট করতেও ব্যবহার করতে পারেন