Reactフック入門チュートリアル

'react' から useState をインポートします。

関数の例() {
 定数[count, setCount] = useState(0);
//count: 宣言された変数; setCount: カウント値を変更する関数; 0: カウントの初期値 return (
  <div>
   <p>クリック回数は {count} 回です</p>
   <ボタンのクリック時={() => setCount(count + 1)}>
    クリックしてください
   </ボタン>
  </div>
 );
}

関数 ExampleWithManyStates() {
 定数[年齢、年齢の設定] = useState(42);
 const [フルーツ、setFruit] = useState('バナナ');
 const [todos, setTodos] = useState([{ text: 'フックを学ぶ' }]);
}

//最初のレンダリング useState(42); //年齢を42に初期化
 useState('banana'); // fruit を banana に初期化します
 useState([{ text: 'フックを学ぶ' }]); //...

 // 2 回目のレンダリング useState(42); // 状態変数 age の値を読み取る (このとき渡されたパラメータ 42 はそのまま無視されます)
 useState('banana'); //状態変数 fruit の値を読み取ります (この時点ではパラメータ banana は無視されます)
 useState([{ text: 'フックを学ぶ' }]); //...

'react' から useState、useEffect をインポートします。

関数の例() {
 定数[count, setCount] = useState(0);

 // componentDidMount および componentDidUpdate と同様:
 使用効果(() => {
  // ドキュメントのタイトルを更新します document.title = `${count} 回クリックしました`;
 });

 戻る （
  <div>
   <p>クリック回数は {count} 回です</p>
   <ボタンのクリック時={() => setCount(count + 1)}>
    クリックしてください
   </ボタン>
  </div>
 );
}

クラスExampleはReact.Componentを拡張します{
 コンストラクタ(props) {
  スーパー(小道具);
  この状態 = {
   カウント: 0
  };
 }

 コンポーネントマウント() {
  document.title = `${this.state.count} 回クリックしました`;
 }

 コンポーネントを更新しました() {
  document.title = `${this.state.count} 回クリックしました`;
 }

 与える（） {
  戻る （
   <div>
    <p>{this.state.count} 回クリックしました</p>
    <ボタンのonClick={() => this.setState({ count: this.state.count + 1 })}>
     クリックしてください
    </ボタン>
   </div>
  );
 }
}

'react' から useState、useEffect をインポートします。

関数FriendStatus(props) {
 const [isOnline、setIsOnline] = useState(null);

 関数handleStatusChange(ステータス) {
  setIsOnline(ステータスがオンライン)。
 }

 使用効果(() => {
  ChatAPI.subscribeToFriendStatus(props.friend.id、handleStatusChange);
  // この順序に注意してください: コンポーネントの次の再レンダリング後、ChatAPI.subscribeToFriendStatus の次の呼び出しの前にクリーンアップを実行するように react に指示します。
  関数 cleanup() を返す {
   ChatAPI.unsubscribeFromFriendStatus(props.friend.id、handleStatusChange);
  };
 });

 if (isOnline === null) {
  '読み込み中...' を返します。
 }
 isOnline を返します? 'オンライン' : 'オフライン';
}

使用効果(() => {
 document.title = `${count} 回クリックしました`;
}, [count]); // countの値が変わったときのみ、文`document.title`が再実行されます

'react' から useState、useEffect をインポートします。

関数 useFriendStatus(friendID) {
 const [isOnline、setIsOnline] = useState(null);

 関数handleStatusChange(ステータス) {
  setIsOnline(ステータスがオンライン)。
 }

 使用効果(() => {
  ChatAPI.subscribeToFriendStatus(友人ID、handleStatusChange);
  戻り値 () => {
   ChatAPI.unsubscribeFromFriendStatus(友人ID、handleStatusChange);
  };
 });

 isOnline を返します。
}

関数FriendStatus(props) {
 const isOnline = useFriendStatus(props.friend.id);

 if (isOnline === null) {
  '読み込み中...' を返します。
 }
 isOnline を返します? 'オンライン' : 'オフライン';
}

関数FriendListItem(props) {
 const isOnline = useFriendStatus(props.friend.id);

 戻る （
  <li style={{ color: isOnline ? 'green' : 'black' }}>
   {props.friend.name}
  </li>
 );
}

import { usePageScroll, useReachBottom } from '@tarojs/taro' // Taro固有のフック
import { useState, useEffect } from 'react' // フレームワークフック（基本フック）