React Hooks 〜 使用 Effect Hook 的方式 〜

2 年 ago
科, 颖
1 minute

Effect Hook 是什么

这是用于控制渲染后的DOM更改、状态更新和对其他组件产生影响的处理（效果）的Hooks API。

基本的写法如下，在函数组件内引入和 useState 相似的函数，并进行编写。

import React, { useEffect } from "react"

// 関数コンポーネント内で下記を記述する
useEffect(() => {
  // 処理をここに書く

  // 【option】関数を返すようにすると、アンマウントされる前に関数が実行される。
  return () => console.log('クリーンアップを実行');
}, []);

Effect Hook 会在以下时间点执行。

    • レンダリング後に必ず実行する。

 

    • 初回のレンダリング後だけ実行する。

 

    • 指定したデータに変更があった場合のみ実行する。

例で示した文の[]のところに、何の変更をトリガーにするかを書くことができる。

作为优点，Effect Hook的函数内部可以使用React的功能，例如State等。

Effect 的使用情况

    • APIとの通信

State を設定して、レンダリング後に API からデータを取得してセットする。

Stateを変更させたときに、他に影響を与える場合

例えばチャットアプリで相手から返信が来た時に、タイトルに未読件数を表記するとか

样本

根据状态的变化，实现修改页面标题的 Effect Hook。我想象它类似于一篇文章发布网站。

import React, { useState, useCallback, useEffect } from "react";
import { InputForm } from "./InputForm";
import "./styles.css";

export default function App() {
  const [content, setContent] = useState<string>("test");

  const onChangeContent = useCallback(
    (event: React.ChangeEvent<HTMLInputElement>) => {
      setContent(event.target.value);
    },
    []
  );

  useEffect(() => {
    document.title = `${content} が入力されている。`;
    console.log("content が変更された");
  }, [content]);

  return (
    <div className="App">
      <InputForm content={content} onChange={onChangeContent} />
      <div>
        <span>content の値は、"{content}"</span>
      </div>
    </div>
  );
}

import React from "react"

interface Props {
  content: string;
  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
}

export const InputForm = (props: Props) => {
  return <input defaultValue={props.content} onChange={props.onChange}></input>
}

这虽然很简单，但我在codesandbox上上传了一些示例代码。为了防止不必要的函数执行和DOM被无意中重写，我想最好还是尽量在第二个参数中放入一些东西。

其他

    • useEffect は1つのコンポーネント内で複数設定が可能

異なる変数を第二引数に設定するなどもできる

bannerAds