React の共通 API とライフサイクル関数

useState

useState は、関数コンポーネントに状態を追加するための React のフックです。useState を使用すると、関数コンポーネントで状態変数を作成および管理でき、状態変数が更新されるたびに、コンポーネントが再レンダリングされて最新の状態が表示されます。

useEffect

useEffect は、副作用を処理するための React のもう 1 つのフックです。副作用とは、DOM へのアクセス、ネットワークリクエストの開始、イベントのサブスクライブなど、コンポーネントのレンダリング中に発生する可能性のある操作を指します。useEffect を使用すると、コンポーネントのレンダリング後にこれらの操作を実行できます。

useRef

useRef は、関数コンポーネント内で変更可能な参照を作成するために使用されます。これは、レンダリング間でデータを保存したりアクセスしたりできるようにする永続的な参照を提供します。上の例では、useRef を使用して divRef、inputRef、buttonRef を作成し、それぞれ div、input、button 要素を参照しました。

コード例

import {Ref, useEffect, useRef} from "react";
// @ts-ignore
import React from "react";

const Demo=React.forwardRef((props:any,ref:Ref<HTMLInputElement>)=>{
 return (
     <>
        <input type="text" ref={ref}/>
     </>
 )
})
function Contact() {
    const divRef=useRef<HTMLDivElement>(null);
    const inputRef=useRef<HTMLInputElement>(null);
    const buttonRef=useRef<HTMLButtonElement>(null);
    useEffect(()=>{
        console.log(inputRef.current)
      if(inputRef.current) {
          inputRef.current.focus()
      }
        console.log(buttonRef.current)
    })
    function changeContent(){
        if(divRef.current){
            divRef.current.innerHTML="<h1>hello</h1>"
        }
    }
  return (
    <div>
      <h1>Contact</h1>
        <br/>
        <Demo ref={inputRef}/>
        <button onClick={()=>{
            if(inputRef.current){
                inputRef.current.focus()
            }
        }}>focus</button>
        <div ref={divRef} onClick={changeContent}>click</div>
        <div dangerouslySetInnerHTML={
   
   {__html:"<h1>hekko</h1>"}}></div>
        <input type="text" ref={inputRef}/>
        <button ref={buttonRef}>button</button>
    </div>
  );
}
export default Contact;

dangerouslySetInnerHTML

危険なほどSetInnerHTMLは、HTML文字列をコンポーネントに挿入するために使用されるReactのプロパティです。これは React のデフォルトのエスケープメカニズムをバイパスする方法を提供しますが、潜在的なセキュリティリスクも引き起こすため、注意して使用する必要があります。

生命周期函数

constructor

これはコンポーネントのコンストラクターであり、コンポーネントの作成時に呼び出されます。コンストラクターでは、通常、初期状態の設定、イベントハンドラーのバインドなど、いくつかの初期化操作を実行します。コンストラクターでは、コンポーネントの状態は this.state を通じて初期化できます。

componentDidMount

これはコンポーネントのライフサイクル関数であり、コンポーネントがレンダリングされた後に呼び出されます。通常、componentDidMount では、データリクエスト、サブスクリプションイベントなどの非同期操作を実行します。この関数では、コンポーネントの状態を変更することができ、これによりコンポーネントが再レンダリングされます。

static getDerivedStateFromProps

これは、渡された props と現在の状態に基づいて新しい状態を計算して返す静的関数です。getDerivedStateFromProps は、コンポーネントが作成および更新されるときに呼び出され、渡された props に従ってコンポーネントの状態を更新するために使用されます。

shouldComponentUpdate

これは、コンポーネントを再レンダリングする必要があるかどうかを判断するために使用されるライフサイクル関数です。shouldComponentUpdate では、受信した nextProps と nextState に従ってコンポーネントを再レンダリングするかどうかを決定できます。true を返した場合、コンポーネントは再レンダリングされます。false を返した場合、コンポーネントは再レンダリングされません。

コンポーネントDidUpdate

これはコンポーネントのライフサイクル関数であり、コンポーネントが更新された後に呼び出されます。通常、componentDidUpdate では、DOM の更新、データのリクエストなどのいくつかの副作用を実行します。この関数では、prevPropsとprevStateによっていくつかの条件を判断し、対応する操作を実行できます。

コンポーネントはアンマウントします

これはコンポーネントのライフサイクル関数であり、コンポーネントがアンマウントされようとしているときに呼び出されます。通常、componentWillUnmount では、購読解除やタイマーのクリアなど、いくつかのクリーンアップ操作を実行します。コンポーネントはアンマウントされようとしており、状態を更新する必要がなくなったため、この関数では setState 操作を回避する必要があります。

上記は、React のいくつかの一般的な API とライフサイクル関数の紹介です。これらの API とライフサイクル機能を合理的に使用することで、React アプリケーションをより柔軟かつ効率的に構築できます。ただし、React の継続的な開発に伴い、一部のライフサイクル機能が廃止または置き換えられる可能性があることに注意してください。特定の React バージョンと要件に従って、対応する選択を行ってください。このブログが React の学習と使用に役立つことを願っています。

コード例:

import {Component} from "react";
import {Button} from "antd";

interface IState{
    counter:number
}
export default class Index extends Component <any,any>{
    constructor(props: any, context: any) {
        super(props, context);
        this.state={
            counter:0
        }
        console.log("constructor")
    }
    componentDidMount() {
        console.log("componentDidMount")
    }
    static getDerivedStateFromProps(props: any, state: any) {
        console.log("getDerivedStateFromProps")
        return null
    }
    shouldComponentUpdate(nextProps: Readonly<any>, nextState: Readonly<any>, nextContext: any): boolean {
        console.log("shouldComponentUpdate")
        return nextState.counter!<=5
    }

    add=()=>{
        this.setState({
            counter:this.state.counter+1
        })
    }
    componentDidUpdate(prevProps: Readonly<any>, prevState: Readonly<any>, snapshot?: any) {
        console.log("componentDidUpdate")
    }

    componentWillUnmount() {
        console.log("componentWillUnmount")
    }

    render(){
        console.log("render")
        return(
            <>
                <div>{this.state.counter}</div>
                <Button onClick={this.add}>add</Button></>
        )
    }
}