Skip to main content

Hook

Hook 是 function，他讓你可以從 function component「hook into」React state 與生命週期功能
Hook可以從 component 抽取 stateful 的邏輯，如此一來它就可以獨立地被測試和重複使用
不用建立Class就能使用React的state方法

useState

useState 是一個讓你增加 React state 到 function component 的 Hook
變數會在 function 結束時「消失」，但 state 變數會被 React 保留起來

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

const TextScreen = () => {
  const [name, setName] = useState('');
  return(
    <View>
      <TextInput value={name} onChangeText={(newValue) => setName(newValue)} />
    </View>
  );
}

const styles = StyleSheet.create({});

export default TextScreen;

useEffect

useeffect

在物件首次顯現時執行一次

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

useEffect( () => {
  searchApi('pasta');
},[]);

在物件首次顯現時執行一次然後條件成立時再執行一次

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

[date, setDate] = useState();

useEffect( () => {
  searchApi('pasta');
},[date]);

useState
useEffect