TIL : React Hooksの主要な「useほにゃらら」について

2019/11/26(Tue) - 18:52

useStateとは

  • コンポーネントの各種状態を定義できるもの
  • 下記の場合 const が実行前の値、setCount(hoge)で実行後の値を反映できる。また、useState(0)0は初期値となる
  • イベントハンドラーで実行された際、setCount({実行したい処理})で実行後の値を反映して、再Renderが走る。
function hoge() {
	const [count, setCount] = useState(0);

	return (
		<div>
			<p>You clicked {count} times</p>
			<button onClick={() => setCount(count + 1)}>Click me</button>
		</div>
	);
}
  • renderはそれぞれのStateを持っているので、呼び出した時点のStateが呼び出される
    • 下記の例だと「alertはbuttonを押した時点でのStateをキャプチャー」する
function hoge() {
	const [count, setCount] = useState(0);

	function handleAlertClick() {
		setTimeout(() => {
			alert("You clicked on: + count");
		}, 3000)	
	}

	return (
		<div>
			<p>You clicked {count} times</p>
			<button onClick={() => setCount(count + 1)}>Click me</button>
			<button onClick={handleAlertClick}>Show alert</button>
		</div>
	);
}

useEffectとは

  • Render後に、何らかの処理を実行させることができるもの
    • Class Componentを活用したコードの場合、各種ライフサイクルを制御していたメソッド(componentDidMount と componentDidUpdate と componentWillUnmount)がまとまったもの
function hoge() {
  const [count, setCount] = useState(0);

  // DOMをレンダーする際に下記のHooksを記憶して、DOMの更新後に都度実行する
  useEffect(() => {
    document.title = `You clicked ${count} times`;
	return () => {
		// クリーンアップの必要がある場合はこちらに処理を記載する
	};
  });
}

参考

useRefとは

書き換え可能な値を.currentプロパティ内に保持する事ができる箱のようなもの

const refContainer = useRef(initialValue);
  • useRef はミュータブルな(変更可能な変数)refオブジェクトを返却して、.currentプロパティは渡された引数(initialValue)に初期化されている。
    • 返却されるオブジェクトはコンポーネントの存在期間全体にわたり存在し続ける
const { useRef } = React;

function TextInputWithFocusButton() {
  //"inputEL"に、nullというref Objectを返却
  const inputEl = useRef(null); 
  const onButtonClick = () => {
	// イベントが呼ばれた際、指定されているテキスト入力要素にフォーカス
    inputEl.current.focus();
  };
  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}

ReactDOM.render(<TextInputWithFocusButton />, document.getElementById('root'));

注意

  • アプリケーションの内で「なにかを起こす」ために使いがちになってしまうが、コンポーネントの階層のどこで状態を保持すべきか考える
    • 適切な箇所が見つかった場合はStateのリフトアップを行うこと

参考

カテゴリ