UseState bileşeninden durum güncelleyiciye yapılan birden çok çağrı birden çok yeniden işlemeye neden oluyor

React kancalarını ilk kez deniyorum ve her şey iyi görünüyordu, ta ki verileri aldığımda ve iki farklı durum değişkenini (veri ve yükleme bayrağı) güncellediğimde, bileşenimin (bir veri tablosu) her iki çağrıya rağmen iki kez işlendiğini fark edene kadar durum güncelleyiciye aynı işlevde oluyor. İşte her iki değişkeni de bileşenime döndüren api fonksiyonum.

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

Normal bir sınıf bileşeninde, durumu güncellemek için tek bir çağrı yaparsınız, bu karmaşık bir nesne olabilir, ancak "kancalı yol" durumu daha küçük birimlere bölmek gibi görünür, bunun bir yan etkisi birden fazla yeniden görünür. ayrı olarak güncellendiğinde oluşturulur. Bunu nasıl azaltacağınıza dair bir fikriniz var mı?

Durum loadingve datadurumu tek bir durum nesnesinde birleştirebilir ve sonra bir setStatearama yapabilirsiniz ve yalnızca bir render olacaktır.

Not:setState Sınıf içi bileşenlerden farklı olarak , setStatedöndürülen öğe useStatenesneleri mevcut durumla birleştirmez, nesneyi tamamen değiştirir. Birleştirme yapmak istiyorsanız, önceki durumu okumanız ve yeni değerlerle kendiniz birleştirmeniz gerekir. Dokümanlara bakın .

Bir performans sorununuz olduğunu belirleyene kadar renderları aşırı derecede aramak konusunda fazla endişelenmem. Gerçek DOM'a sanal DOM güncellemelerinin oluşturulması (React bağlamında) ve işlenmesi farklı konulardır. Buradaki oluşturma, sanal DOM'lar oluşturmaya atıfta bulunuyor ve tarayıcının DOM'unu güncellemeyle ilgili değil. React, setStateçağrıları toplu işleyebilir ve tarayıcı DOM'u son yeni durumla güncelleyebilir.

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>

Alternatif - kendi devlet birleşme kancanızı yazın

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>

Bunun başka bir çözümü var useReducer! önce yenimizi tanımlıyoruz setState.

const [state, setState] = useReducer(
  (state, newState) => ({...state, ...newState}),
  {loading: true, data: null, something: ''}
)

bundan sonra onu eski güzel sınıflar gibi kullanabiliriz this.setState, sadece this!

setState({loading: false, data: test.data.results})

Yenimizde de fark edebileceğiniz setStategibi (tıpkı daha önce sahip olduğumuz gibi this.setState), tüm durumları birlikte güncellememiz gerekmez! örneğin, durumlarımızdan birini şu şekilde değiştirebilirim (ve diğer durumları değiştirmez!):

setState({loading: false})

Harika, Ha ?!

Öyleyse tüm parçaları bir araya getirelim:

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
}

React-hook'larda toplu güncelleme güncellemesi https://github.com/facebook/react/issues/14259

React şu anda, bir düğme tıklaması veya giriş değişikliği gibi React tabanlı bir olaydan tetiklenirlerse, güncellemeleri toplu olarak işler. Zaman uyumsuz çağrı gibi bir React olay işleyicisinin dışında tetiklenirlerse güncellemeleri toplu olarak yapmaz.

Bu yapacak:

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

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

Üçüncü taraf kancaları kullanıyorsanız ve durumu tek bir nesnede birleştiremiyorsanız veya kullanamıyorsanız useReducer, çözüm şunları kullanmaktır:

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

Dan Abramov tarafından burada önerildi

Bu örneğe bakın

Çoğaltmak için this.setStatesınıf bileşenlerden birleştirme davranışı, dokümanlar tepki tavsiye fonksiyonel formunu kullanmak için useStatenesne yayıldı - gerek için useReducer:

setState(prevState => {
  return {...prevState, loading, data};
});

İki durum artık tek bir durumda birleştirildi, bu da size bir işleme döngüsünden tasarruf etmenizi sağlayacak.

Orada bir devlet nesnesi ile başka bir avantajdır: loadingve dataolan bağımlı devletler. Durum bir araya getirildiğinde geçersiz durum değişiklikleri daha belirgin hale gelir:

setState({ loading: true, data }); // ups... loading, but we already set data

Hatta daha iyi olabilir tutarlı durumları sağlamak yapma) 1 ile durumu - loading, success, errorvb - açık kullanarak devlet ve 2.) 'de useReducerbir redüktör içinde kapsülü devlet mantığına:

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>

Not: emin olun önek ile özel Hooks'un use( useDatayerine getData). Ayrıca useEffectolamaz için geri arama geçti async.

Https://stackoverflow.com/a/53575023/121143'e cevap vermek için küçük bir ekleme

Güzel! Bu kancayı kullanmayı planlayanlar için, argüman olarak işlevle çalışmak için biraz sağlam bir şekilde yazılabilir, örneğin:

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

Güncelleme : optimize edilmiş sürüm, gelen kısmi durum değiştirilmediğinde durum değiştirilmeyecektir.

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

Ayrıca useEffectbir durum değişikliğini algılamak ve diğer durum değerlerini buna göre güncellemek için de kullanabilirsiniz .