ReactNativeでhooksを利用する最低限過ぎるメモ。
4760 ワード
React 16.8から導入されたHook。
関数コンポートにおいて、state管理やcomponentDidMount等と同等の機能を利用するためのもの。
代表的なものはstate hooksとeffect hooks。
ステートフック
ステートを管理するためのもので下記の構文で利用できる。
const [変数,関数] = useState(初期値);
副作用(effect)フック
componentDidMount()等と同等の機能を提供する。下記のような構文で利用する。
どういう動きをするかは引数で決まる（制御できる）。
componetDidMount風
下記のように書くと1回だけ実行。
useEffect(()=>{},[]);
変化があるか
countが変化してるいるかどうか。
useEffect(()=>{},[count]);
サンプル
とりあえず。
App.js
import React, { useState, useEffect } from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
export default function App() {
//state hook
const [count, setCount] = useState(0);
//effect hook
useEffect(() => {
console.log('you clicked ' + count + 'times');
});
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>You clicked {count} times.</Text>
<Button
title="click me"
onPress={() => setCount(count + 1)}
/>
</View>
);
}
Author And Source
この問題について(ReactNativeでhooksを利用する最低限過ぎるメモ。), 我々は、より多くの情報をここで見つけました https://qiita.com/zaburo/items/3f57d42d954ad9970f98著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .