レベル2:応答-学習ログの支払い

0.PRリンク

repository: bigsaigon333/react-payments

step 1: [1段階-演技任務]東東(金東熙)任務を提出する2

step 2: [2段階-演技任務]東東(金東熙)任務を提出する61

1.制御素子vs非制御素子

form elements: <input>, <textarea>, <select> ...

誰がform要素自身の状態に対する制御権を持っているかによって区分されます.

構成部品に制御権がありますか.制御素子

form要素は制御権を持っていますか?:非制御素子

制御素子とは?

HTMLフォーム要素は独自の内部状態を有し、ユーザー入力に基づいて更新することができる.逆に、Reactの変化状態は通常、setStateまたはusState hookのみで変更される構成部品の状態に保存されます.

制御素子は、この2つの特性を結合し、反応の状態を「単一の真実源」にする.したがって、formをレンダリングする構成部品は、後でユーザの入力に伴って状態を変更し、それに基づいてform elementの値を変更します.同様に、form要素の値がreactによって駆動される素子を駆動素子と呼ぶ.

は、要素に値を押すようにします.これにより、素子は常にinputの現在の値を有する.

        const Input = () => {
          const [value, setValue] = useState("");
        
          const handleChange = (event) => {
            setValue(event.target.value);
          }
        
          return <input type="text" value={value} onChange={handleChange}/>
        }

非制御構成部品とは?

制御要素とは対照的に、フォームデータはDOM自身によって制御される.非制御構成部品を作成するには、refを使用してDOMからform valueをインポートし、すべてのステータスの変化に対してイベントハンドラを作成するのではありません.

必要に応じてDOMから値を抽出する必要があります(インポートする必要があります).

    const Form = () => {
      const ref = useRef(null);
    
    	const handleSubmit = (event) => {
    		event.preventDefault();
    
    		console.log(ref.current.value);
    	}
    
      return (
    		<form onSubmit={handleSubmit}>
    			<input type="text" ref={ref}/>
    		</form>
    	);
    }

制御素子と非制御素子の長所と短所は?

制御素子は状態変化時にdiffアルゴリズムによってレンダリングがトリガーされるため、DOM操作方法は頻繁に実行されるが、DOM操作方法の実行頻度は性能に致命的ではないため、単一Truthの原則に従うことで得られる開発上のメリット(デバッグの利便性など)が大きいと考えられる.

の欠点は、html要素の自己状態をusStateで宣言し、関数で制御する必要があることであり、コード量が増加し、論理が複雑になることである.

非制御要素の利点は、反応コードと非反応コードが混合されると、容易に統合されることである.また、制御素子に比べてコード量が少なく、開発が容易で、迅速である(ただし、雑である).

個人的な好みは?

個人の好みは制御素子である.Truthの単一ソース原則に従うことが望ましいが,論理が複雑になるとformikなどのライブラリの使用が考えられる.

なぜfocusは非制御でしか制御できないのですか?

に集約された属性は、要素の状態ではありません.DOMオブジェクトには、唯一のフォーカス要素が存在します.DOMの状態(?)つまり、コンポーネントレベルで管理されていません.
document.ActiveElementは、どのhtmlElementがactive(フォーカス)であるかを決定できますが、read-only property(

)です.
非制御素子はrefを使用する必要がありますか?

の反応では、refとquerySelectorが実際のHTML要素にアクセスします.querySelectorを使用すると、コンポーネント化によるメリットは享受できません.class、id、tag nameは毎回考慮しますか?このため、リアクターはrefを使用して実際のHTML要素にアクセスすることができます.Reactは、コンポーネントのインストールが完了すると、ref.currentにHTML ElementのDOMオブジェクトが含まれます.

https://reactjs.org/docs/forms.html
https://reactjs.org/docs/uncontrolled-components.html
https://goshakkk.name/controlled-vs-uncontrolled-inputs-react/
2. createRef vs useRef
refとは?

refは、Reactが提供するDOMノードまたはReact Elements(インスタンス)へのアクセス方法である.

一般的なReactデータストリームでは、親コンポーネントはpropsのみでサブコンポーネントと対話します.子を変更するために新しい支柱を移動する方法.このような非典型的なデータストリームの特殊な場合、Reactは、サブストリームの変更を命令する手段としてrefを提供する.

refはreactです.createRefとして作成し、refプロパティに渡します.その後、ref.currentを介して反応ノードのレポートにアクセスできます.反応ノードがHTML Elementの場合はDOMオブジェクトです.クラス構成部品は、クラス構成部品がマウントされている例です.関数構成部品の場合、ref attributeはインスタンスがないため使用できません.→転送が必要(HOC)
ただし、refは、関数コンポーネントで他のHTML要素またはクラスコンポーネントに使用できます.

React.forwardRef accepts a rendering function as an argument. React will call this function with props and ref as two arguments. This function should return a React node.

propsをスキップできる場合はrefを使用しないでください.ただし、refを使用するべきだと思う場合は、ステータスを上げてステータスをより高いレベルに置くことで、この問題を解決できます.

CallbackRefとは?

createRefによって作成されたrefプロパティを渡すのではなく、関数をrefプロパティに渡すことができます.デバイスのマウントが完了すると、ResactはResact component instanceまたはHTML DOM要素をパラメータとしてコールバックrefを実行し、アンインストールするとnullをパラメータとして実行します.したがって、パラメータにアクセスしてDOM操作を実行したり、closureに保存したりすることができます.

createRefとuserRefの違いは?

this.inputRef = React.createRef();

const refContainer = useRef(initialValue);

createRefはレンダリングのたびに新しいrefを返し、userRefは毎回同じrefを返します.
クラス構成部品で、コンストラクション関数がcreateRefによってrefを作成する場合、その構成部品のライフサイクルはrefのライフサイクルと一致しますが、関数構成部品は1回実行した後に値を返して終了します.したがって、関数構成部品でcrateRefを実行し続けると、新しいrefオブジェクトの作成が続行されます.それは必要ない
useRef returns a mutable ref object whose .current property is initialized to the passed argument (initialValue). The returned object will persist for the full lifetime of the component.
This works because useRef() creates a plain JavaScript object. The only difference between useRef() and creating a {current: ...} object yourself is that useRef will give you the same ref object on every render.
Well, the difference is that createRef will return a new ref on every render while useRef will return the same ref each time.
インスタンスのない関数要素の場合、userefは値の永続化にも使用できます.useState hookはre-renderをトリガーしますが、不要な値はuseRefに入れることができます.

const usePrevious = (value) => {
  const ref = React.useRef();

  React.useEffect(() => {
    ref.current = value;
  }, [value]);

  return ref.current;
};

https://reactjs.org/docs/refs-and-the-dom.html
https://reactjs.org/docs/forwarding-refs.html
https://reactjs.org/docs/react-api.html#reactforwardref
https://reactjs.org/docs/hooks-reference.html#useref
https://dev.to/dinhhuyams/introduction-to-useref-hook-3m7n#:~:text=Well%2C the difference is that,full lifetime of the component .
https://stackoverflow.com/questions/54620698/whats-the-difference-between-useref-and-createref
https://woowacourse.github.io/javable/post/2021-05-15-react-ref/