कंपोनेंट में यूजर्स से स्टेटटर को मल्टीपल कॉल मल्टीपल री-रेंडरर्स का कारण बनता है

Question 1

मैं पहली बार रिएक्ट हुक की कोशिश कर रहा हूं और जब तक मुझे एहसास नहीं हुआ कि मुझे दो अलग-अलग स्टेट वैरिएबल (डेटा और लोडिंग फ्लैग) मिलते हैं, तब तक मेरा कंपोनेंट (डेटा टेबल) दो बार रेंडर हो जाता है, भले ही दोनों कॉल एक ही समारोह में राज्य updater हो रहे हैं। यहाँ मेरा एपी फंक्शन है जो दोनों चर को मेरे घटक पर लौटा रहा है।

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मौजूदा राज्य के साथ वस्तुओं विलय नहीं है, यह पूरी तरह से वस्तु बदल देता है। यदि आप मर्ज करना चाहते हैं, तो आपको पिछली स्थिति को पढ़ना होगा और इसे नए मूल्यों के साथ स्वयं मर्ज करना होगा। डॉक्स का संदर्भ लें ।

जब तक आपने निर्धारित नहीं किया है कि आपको प्रदर्शन समस्या है, तब तक मैं अत्यधिक कॉल करने वालों के बारे में बहुत अधिक चिंता नहीं करूंगा। (प्रतिक्रिया के संदर्भ में) प्रतिपादन और वास्तविक डोम के लिए आभासी डोम अद्यतन अलग-अलग मामले हैं। यहाँ रेंडरिंग वर्चुअल DOM जनरेट करने की बात कर रहा है, और ब्राउज़र DOM को अपडेट करने के बारे में नहीं। प्रतिक्रिया 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

यदि वे प्रतिक्रिया-आधारित घटना के भीतर से एक बटन क्लिक या इनपुट परिवर्तन की तरह ट्रिगर हो जाते हैं, तो प्रतिक्रिया वर्तमान में बैच अपडेट अपडेट करेगी। अगर वे एक रिएक्ट इवेंट हैंडलर के बाहर ट्रिगर कर रहे हैं, तो यह async कॉल की तरह, बैच अपडेट नहीं करेगा।

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>

स्निपेट का विस्तार करें

पुनश्च: (के बजाय ) के साथ कस्टम हुक को उपसर्ग करना सुनिश्चित करें । साथ ही कॉलबैक पास नहीं किया जा सकता है ।useuseDatagetDatauseEffectasync

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एक राज्य परिवर्तन का पता लगाने के लिए भी उपयोग कर सकते हैं, और तदनुसार अन्य राज्य मूल्यों को अपडेट कर सकते हैं