Solved: Paano mag-install ng react native hooks gamit ang

Tiyak, narito ang artikulo:

Ang React Native ay isang makabagong teknolohiya, na pinapagana ng Facebook, na nagbibigay-daan sa mga developer na bumuo ng mga mobile app gamit ang JavaScript habang naghahatid pa rin ng tunay na native na user interface. Ito ay nakakamit sa pamamagitan ng pagsasama ng mga katutubong bahagi na kinokontrol ng JavaScript. Ang isang mahalagang tampok ay ang paggamit ng mga functional na bahagi sa mga bahaging nakabatay sa klase sa pamamagitan ng React Native Hooks, isang mahusay na karagdagan sa React.

Maaaring gawing mas maliit, mas simple, at mas madaling maunawaan ng React Native Hooks ang iyong codebase. Gagabayan ka ng artikulong ito kung paano i-install at ipatupad ang React Native Hooks sa iyong application.

Pag-install ng React Native Hooks

Upang simulan ang paggamit ng Hooks, kailangan mo ng partikular na bersyon ng React at React Native. Ang bersyon ng React ay dapat na 16.8 o mas bago, at ang React Native na bersyon ay dapat na 0.59 o mas bago.

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

Ang command sa itaas ay mag-i-install ng kinakailangang React at React Native na bersyon at i-save ang mga ito bilang mga dependency sa iyong proyekto.

Pagpapakilala ng Hooks sa React Native Project

Ang React Native Hooks ay mga function na nagbibigay-daan sa iyong gumamit ng estado at iba pang feature ng React nang hindi nagsusulat ng klase. Ang mga ito ay idinagdag sa React 16.8 na bersyon. Tingnan natin kung paano sila maisasama sa iyong React Native na proyekto.

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 ay isang Hook na nagdaragdag ng React state sa iyong mga functional na bahagi. Sa halimbawa sa itaas, sinisimulan namin ang isang bagong variable ng estado na tinatawag na count.

Paggalugad sa Iba Pang Mga Sikat na Hooks

Nag-aalok ang React Native ng maraming Hooks gaya ng useState, useEffect, useContext, useReducer, at useCallback. Tuklasin natin ang paggamit ng useEffect dito, na namamahala sa mga side effect sa mga functional na bahagi.

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;

gamitinEpekto nagsisilbi sa parehong layunin tulad ng componentDidMount, componentDidUpdate, at componentWillUnmount sa mga klase ng React, ngunit pinagsama sa isang API. Tumatakbo ito pagkatapos ng bawat pag-render.

Maaaring pasimplehin ng React Native Hooks ang iyong code at gawing mas madaling pamahalaan ang estado at mga side effect, na maaaring humantong sa mas diretsong code at mga application na mas madaling mapanatili at i-debug.