反応フックについての私の5セント

おい、人々、あなたはどうしていますか?
私はすぐに反応フックと私の経験について説明します.
時々、私は外部のプロジェクトを働かせます、そして、私は新しいものを学んで、新しいものをテストする機会としてそれを使用します.今、私はネイティブの反応を使用してモバイルプロジェクトに取り組んでいると私は反応のフックとコンテキストを学ぶために、この機会を使用しています.
初めてReact Hooks introductionを読んで、私はフックとどのように動作するかについて少し混乱しました.だから私はジャンプし、それを使用しようとすることを決めた.
私がそれについて学んだこと

反応フックは、あなたのコード

はより多くの機能部品とより少ないクラスを使用します

は、ステキトフルな論理

を共有して、再利用するのがより簡単です
現実の世界でそれらの点を見ましょう.

反応フックは、あなたのコード
あなたがフォームを持っていると言うと、フォームのデータを格納し、ユーザーがボタンをクリックすると、それを提出する必要があります.「反応しないフック」環境では、次のようになります.

import React from 'react'

class MyForm extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      data: {}
    }
  }

  handleChange = (name, value) => {
    const { data } = this.state

    this.setState({
      data: {
        ...data,
        [name]: value
      }
    })
  }

  handleSubmit = (e) => {
    e.preventDefault()
    const { data } = this.state

    MyAPI.doSomething(data)
  }

  render() {
    const { data } = this.state

    return (
      <form onSubmit={this.handleSubmit}>
        <input type="text" value={data.name} onChange={e => this.handleChange('name', e.target.value)} />
        <input type="text" value={data.email} onChange={e => this.handleChange('email', e.target.value)} />

        <button type="submit">Submit data</button>
      </form>
    )
  }
}

これはフックの使い方のようです.

import React, { useState } from 'react'

const MyForm = () => {
  const [data, setData] = useState({})

  handleChange = (name, value) => setData(prev => ({ ...prev, [name]: value }))

  handleSubmit = (e) => {
    e.preventDefault()

    MyAPI.doSomething(data)
  }

  return (
    <form onSubmit={this.handleSubmit}>
      <input type="text" value={data.name} onChange={e => handleChange('name', e.target.value)} />
      <input type="text" value={data.email} onChange={e => handleChange('email', e.target.value)} />

      <button type="submit">Submit data</button>
    </form>
  )
}

違いが見えますか.42行から22行まで.
基本的に、書くとき

const [data, setData] = useState({})

次のようにします.

constructor(props) {
  super(props)
  this.state = {
    data: {} // Initiating the data state as an empty object
  }
}
render () {
  const { data } = this.state // Getting the data key from state
}
AND
// Creating a kind of "helper" to set the state
const setData = data => this.setState({ data })

より多くの関数コンポーネントとより少ないクラスを使用する
あなたはクラスの多くを持っている必要はありませんフックを使用すると、すべての機能のコンポーネントを使用して行うことができます!
いくつかの小道具を追跡し、それが変更された場合何かを行う必要があるとしましょう.フックがなければ、次のようになります.

import React from 'react'

class MyComponent extends React.Component {
  componentDidUpdate(prevProps) {
    if (this.props.name !== prevProps.name) {
      console.log('NAME CHANGED')
    }
  }

  render() {
    const { name, email } = this.props

    return (
      <div>
        <p>Your name is: {name}</p>
        <p>Your email is: {email}</p>
      </div>
    )
  }
}

フックでは、useeffect関数を使用します.

import React, { useEffect } from 'react'

const MyComponent = ({ name, email }) => {
  useEffect(() => {
    console.log('NAME CHANGED')
  }, [name])

  return (
    <div>
      <p>Your name is: {name}</p>
      <p>Your email is: {email}</p>
    </div>
  )
}

私がここでやっていること

useEffect(() => { // useEffect needs to receive a function as param
  console.log(‘NAME CHANGED’) // Do something
}, [name]) // When the variable "name" changes.

別の変数を配列に追加することもできます.

useEffect(() => {
  console.log(‘NAME OR EMAIL CHANGED’)
}, [name, email]) // When the variable "name" OR "email" changes.

しかし、この場合、どちらが変わったかわかりません.したがって、フックを使用して分離することができます.

useEffect(() => {
  console.log(‘NAME CHANGED’)
}, [name])
useEffect(() => {
  console.log(‘EMAIL CHANGED’)
}, [email])

そして今、あなたは変数が変更されたものに応じて別々に物事を行うことができます.
フックを使用するもう一つの重要な変更は、コンポーネントdidmount機能です.通常、データをロードするか、初期のものを設定するのは、一度実行する関数です.
フックを使用するトリックです

useEffect(() => {
  console.log(‘I WILL APPEAR JUST ONCE’)
}, []) // Passing an empty array

空の配列を2番目のパームに渡します.これは一度だけ実行されます.

Statue論理の共有と再利用の容易化
フックを使用してカスタムフックにコンポーネントロジックを抽出することができますし、どこでもそれを使用する!
私はこのトピックについては、この記事については、非常に複雑なことができるので、私は別の記事でそれについて話すことを好むので、話をしません.
しかし、あなたがそれについてもっと知りたいならば、あなたはdocumentationをチェックすることができます.それは素晴らしいと非常に明確です!
私は今まで反応フックを使用して楽しんでいます.私は最初にそれを理解するいくつかのトラブルがあったが、今は私に明確に見えます.
私はあなたたちがフックと私の経験を楽しむとこれから何かを学ぶ願っています.
何か質問があれば下記コメントしてください!私は喜んで助けて!
それはすべて、人々!