Languages
[Edit]
PL

React - optymalny sposób inicjalizacji stanu

0 points
Created by:
Maison-Humphries
311

W tym artykule chcieliby┼Ťmy pokaza─ç Ci optymalny spos├│b inicjalizacji stanu w Reakcie.

Kiedy inicjalizacja stanu w komponencie wymaga skomplikowanych operacji, jako argument useState┬ámo┼╝emy przekaza─ç funkcj─Ö┬ástrza┼ékow─ů (zamiast typowego argumentu jakim jest obiekt).
To podej┼Ťcie zapobiega wykonywaniu┬áskomplikowanych operacji┬áza ka┼╝dym razem, gdy komponent jest ponownie renderowany z takimi samymy parametrami.

W naszym przypadku zapobiegamy parsowaniu jsonOrData┬áprzy ka┼╝dym ponownym renderowaniu┬áApp, przekazuj─ůc funkcj─Ö┬ástrza┼ékow─ů jako argument useState.

Dobre podejscie:

const [data, setData] = React.useState(() => createData(jsonOrData));

Z┼ée podej┼Ťcie:┬á

const [data, setData] = React.useState(createData(jsonOrData));

Uruchamialny przykład:

// ONLINE-RUNNER:browser;

// import React from 'react';
// import ReactDOM from 'react-dom';

const createData = (jsonOrData) => {
    if (typeof jsonOrData === 'string') {
      	return JSON.parse(jsonOrData);
    }
    return jsonOrData;
};

const User = ({jsonOrData}) => {
  // Kiedy utworzenie stanu jest utrudnione powinni┼Ťmy u┼╝y─ç useState(() => ...)
  const [data, setData] = React.useState(() => createData(jsonOrData));

  // Kiedy zmiana stanu jest utrudniona powinni┼Ťmy u┼╝y─ç useEffect(() => ..., [...])
  React.useEffect(() => createData(jsonOrData), [jsonOrData]);
  return (
    <div>
      {data.name} {data.age}
    </div>
  );
};

const App = () => {
  	const user = {
        name: 'John',
        age: 25,
        // jakie┼Ť inne w┼éa┼Ťciwo┼Ťci...
    };
  	return (
      <div>
        <User jsonOrData={user} />
      </div>
    );
};

const root = document.querySelector('#root');
ReactDOM.render(<App />, root );

ReactJS (PL)

React - optymalny sposób inicjalizacji stanu
Native Advertising
­čÜÇ
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

ÔŁĄ´ŞĆ­čĺ╗ ­čÖé

Join