Lahendatud: kuidas paigaldada react native konksud

Kindlasti tuleb artikkel siit:

React Native on uuenduslik tehnoloogia, mida toetab Facebook ja mis võimaldab arendajatel luua JavaScripti kasutades mobiilirakendusi, pakkudes samas tõelist natiivset kasutajaliidest. See saavutatakse JavaScripti kontrollitavate natiivsete komponentide lisamisega. Üks oluline funktsioon on funktsionaalsete komponentide kasutamine klassipõhiste komponentide asemel React Native Hooksi kaudu, mis on Reacti võimas täiendus.

React Native Hooks võib muuta teie koodibaasi väiksemaks, lihtsamaks ja arusaadavamaks. See artikkel juhendab teid React Native Hooksi installimise ja oma rakenduses juurutamise kohta.

React Native Hookide paigaldamine

Hooksi kasutamise alustamiseks vajate Reacti ja React Native'i konkreetset versiooni. Reacti versioon peab olema 16.8 või uuem ja React Native versioon 0.59 või uuem.

npm install react@^16.8.3 react-native@^0.59.8 --save

Ülaltoodud käsk installib vajalikud React ja React Native versioonid ning salvestab need teie projekti sõltuvustena.

Tutvustame React Native Projecti konksu

React Native Hooks on funktsioonid, mis võimaldavad teil kasutada olekut ja muid Reacti funktsioone ilma klassi kirjutamata. Need lisati React 16.8 versioonis. Vaatame, kuidas neid teie React Native projekti kaasata.

import React, { useState } from 'react';
import { Button, Text, View } from 'react-native';

const App = () => {
  const [count, setCount] = useState(0);

  return (
    <View>
      <Text>You clicked {count} times</Text>
      <Button onPress={() => setCount(count + 1)} title="Click me!" />
    </View>
  );
}
export default App;

useState on konks, mis lisab teie funktsionaalsetele komponentidele reageerimisoleku. Ülaltoodud näites initsialiseerime uue olekumuutuja nimega count.

Teiste populaarsete konksude uurimine

React Native pakub palju konkse, nagu useState, useEffect, useContext, useReducer ja useCallback. Uurime siin funktsiooni useEffect, mis haldab funktsionaalsete komponentide kõrvalmõjusid.

import React, { useState, useEffect } from 'react';
import { Text, View } from 'react-native';

const App = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

  return (
    <View>
      <Text>You clicked {count} times</Text>
      <Button onPress={() => setCount(count + 1)} title="Click me!" />
    </View>
  );
}
export default App;

useEffect teenib sama eesmärki kui React-klassides komponentide DidMount, komponentDidUpdate ja komponentWillUnmount, kuid need on ühendatud üheks API-ks. See töötab pärast iga renderdust.

React Native Hooks võib teie koodi lihtsustada ning hõlbustada oleku ja kõrvalmõjude haldamist, mis võib viia lihtsamini hooldatava ja silutava koodi ja rakenduste loomiseni.