React Uygulamaları için Bilmeniz Gereken 8 Faydalı Hile – JSManifest

React Uygulamaları için Bilmeniz Gereken 8 Faydalı Hile – JSManifest

React, hayranlarını şaşırtmayı asla başaramayan birçok aşamadan geçti.

İlk başta, biz vardı karışımlar arayüzümüzü oluşturmak ve yönetmek için, ardından kavramı geldi sınıf bileşenlerive şimdi tepki kancaları bu da tepki olarak uygulamalarımızı oluşturma şeklimizi değiştirdi.

Başka ne harika biliyor musun? Tepki olarak yapabileceğiniz ve uygulamalarınızı daha iyi geliştirmenize yardımcı olacak bazı düzgün numaralar bilmek (tabii ki bilmediğiniz bir şeyle karşılaştıysanız).

Bu makale, her tepki geliştiricisinin bilmesi gereken tepki olarak 8’in üzerinde düzgün numarayı ele alacaktır. Şimdi, bu listedeki her bir öğenin sizin için yeni olmasını beklemiyorum, ancak bu listede şimdiye kadar yapabileceğinizi bilmediğiniz sizin için yararlı en az bir öğe bulacağınızı umuyorum.

İşte tepki olarak bilmeniz gereken 8 püf noktası:

1. Dizelerle tepki öğeleri oluşturun

Bu listedeki ilk öğe, bir HTML DOM öğesi etiketini temsil eden basit dizelerle normal bir tepki DOM öğesi oluşturmaya devam edecektir. Daha doğrusu, bir DOM öğesini temsil eden bir dize.

Örneğin, dizeyi atayarak tepki bileşenleri oluşturabilirsiniz. 'div' şöyle bir değişkene:

import React from 'react'

const MyComponent = 'div'

function App() {
  return (
    <div>
      <h1>Hello</h1>
      <hr />
      <MyComponent>
        <h3>I am inside a {'<div />'} element</h3>
      </MyComponent>
    </div>
  )
}

React sadece arayacak React.createElement ve öğeyi dahili olarak oluşturmak için bu dizeyi kullanın. Güzel değil mi?

Gibi bileşen kitaplıklarında yaygın olarak kullanılır Malzeme-UIbeyan edebilirsiniz component arayanın bileşenin kök düğümünün değeri olacağına karar verebileceği prop props.component şöyle:

function MyComponent({ component: Component = 'div', name, age, email }) {
  return (
    <Component>
      <h1>Hi {name}</h1>
      <div>
        <h6>You are {age} years old</h6>
        <small>Your email is {email}</small>
      </div>
    </Component>
  )
}

Bunu şu şekilde kullanabilirsiniz:

function App() {
  return (
    <div>
      <MyComponent component="div" name="George" age={16} email="george@gmail.com">
    </div>
  )
}

Kök düğüm olarak kullanılacağı özel bileşeninizi de iletebilirsiniz:

function Dashboard({ children }) {
  return (
    <div style={{ padding: '25px 12px' }}>
      {children}
    </div>
  )
}

function App() {
  return (
    <div>
      <MyComponent component={Dashboard} name="George" age={16} email="george@gmail.com">
    </div>
  )
}

2. Hata Sınırlarını Kullanın

JavaScript’te, işlemeye alışkınız çoğu ile kodun yürütülmesi içindeki hatalar try/catch— olabilecek kod bloğu “tutmak” oluşan hatalar. Bu hatalar catch bloğunda yakalandığında, uygulamanızın kod sınırları içinde çökmesini önleyebilirsiniz.

Bunun bir örneği şöyle görünecektir:

function getFromLocalStorage(key, value) {
  try {
    const data = window.localStorage.get(key)
    return JSON.parse(data)
  } catch (error) {
    console.error
  }
}

React nihayetinde sadece JavaScript’tir, bu nedenle aynı stratejiyi kullanarak hataları yakalayabileceğimizi ve işleyebileceğimizi varsayabiliriz. Ancak, tepkinin doğası gereği, bileşenlerin içindeki JavaScript hataları, tepkinin dahili durumunu bozar ve tepki vermesine neden olur. şifreli yaymak hatalar gelecekteki renderlar hakkında.

Bu nedenle tepki ekibi tanıtıldı hata sınırlarıve her tepki geliştiricisi, bunları tepki uygulamalarında kullanabilmeleri için bunları bilmelidir.

Hata sınırlarından önce meydana gelen hatalarla ilgili sorun, bu şifreli hataların önceki oluşturmalarda meydana geldikten sonra gelecekteki oluşturmalarda yayıldığında, tepkinin bileşenlerde bunları işlemek veya kurtarmak için bir yol sağlamamasıydı. Bu yüzden hepimizin hata sınırlarına ihtiyacı var!

Hata sınırları, bileşen ağacında herhangi bir yerde hataları yakalayan, bunları günlüğe kaydeden ve çöken bileşen ağacı yerine bir geri dönüş UI görüntüleyebilen tepki bileşenleridir. Oluşturma sırasında, yaşam döngüsü yöntemlerinin içinde ve altındaki tüm ağacın yapıcılarının içinde hataları yakalarlar (bu nedenle, bunları uygulamamızın en üstünde bir yerde beyan etmemizin ve oluşturmamızın nedeni budur).

İşte siteden bir örnek tepki belgeleri:

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props)
    this.state = { hasError: false }
  }

  static getDerivedStateFromError(error) {
    
    return { hasError: true }
  }

  componentDidCatch(error, errorInfo) {
    
    logErrorToMyService(error, errorInfo)
  }

  render() {
    if (this.state.hasError) {
      
      return <h1>Something went wrong.</h1>
    }

    return this.props.children
  }
}

Sonra normal bir bileşen olarak kullanabilirsiniz:

<ErrorBoundary>
  <MyWidget />
</ErrorBoundary>

3. Önceki Değerleri Koru

Propları veya durumu güncellerken, sadece kullanarak önceki değerlerini koruyabilirsiniz. React.useRef

Örneğin, bir dizi öğenin mevcut ve önceki değişikliklerini izlemek için bir React.useRef hangi önceki değere atanır ve bir React.useState mevcut değer için:

function MyComponent() {
  const [names, setNames] = React.useState(['bob'])
  const prevNamesRef = React.useRef([])

  React.useEffect(() => {
    prevNamesRef.current = names
  })

  const prevNames = prevNamesRef.current

  return (
    <div>
      <h4>Current names:</h4>
      <ul>
        {names.map((name) => (
          <li key={name}>{name}</li>
        ))}
      </ul>
      <h4>Previous names:</h4>
      <ul>
        {prevNames.map((prevName) => (
          <li key={prevName}>{prevName}</li>
        ))}
      </ul>
    </div>
  )
}

Bu işe yarıyor çünkü React.useEffect çalıştırılıyor bileşenler oluşturmayı bitirdikten sonra.

Ne zaman setNames çağrılır, bileşen yeniden oluşturulur ve prefNamesRef önceki isimleri tutacak çünkü React.useEffect tarafından yürütülen son koddur önceki render. Ve yeniden atandığımızdan beri prevNamesRef.current içinde useEffectbir sonraki oluşturma aşamasında önceki adlar olur çünkü en son önceki oluşturma aşamasındaki adlara atanır.

4. Kullanım React.useRef esnek, eskimeyen değer kontrolleri için

Reaksiyon kancaları reaksiyona girmeden önce, componentDidMount veri alma gibi işlemlerin gerçekleşmesini sağlamak istiyorsak, sınıf bileşenlerinin statik yöntemi sonrasında DOM’a monte edilen bileşen.

Reaksiyon kancaları ortaya çıktığında, sınıf bileşenlerini kullanmak yerine bileşenlerimizi yazmanın en popüler yolu oldu. Bileşen ayrıldıktan sonra durumun ayarlanmasını önlemek için bir bileşenin monte edilip edilmediğini izlemek istediğimizde şöyle bir şey yapardık:

import React from 'react'
import axios from 'axios'

class MyComponent extends React.Component {
  mounted = false

  state = {
    frogs: [],
    error: null,
  }

  componentDidMount() {
    this.mounted = true
  }

  componentWillUnmount() {
    this.mounted = false
  }

  async fetchFrogs = (params) => {
    try {
      const response = await axios.get('https://some-frogs-api.com/v1/', { params })
      if (this.mounted) {
        this.setState({ frogs: response.data.items })
      }
    } catch (error) {
      if (this.mounted) {
        this.setState({ error })
      }
    }
  }

  render() {
    return (
      <div>
        <h4>Frogs:</h4>
        <ul>
        {this.state.frogs.map((frog) => <li key={frog.name}>{frog.name}</li>
        )}
        </ul>
    </div>
    )
  }
}

Kancalar yoktu componentDidMount kancalara tepki vermek için geçiş yaptıktan sonra ve sökme işleminden sonra meydana gelen durum güncellemelerinden bellek sızıntıları kavramı hala kancalarla geçerlidir.

Ancak buna benzer bir yol componentDidMount tepki kancalarını kullanmak kullanmaktır React.useEffect yürütüldüğünden beri sonrasında bileşenlerin işlenmesi tamamlandı. Eğer kullanırsan React.useRef buraya monte edilen değerin değerini atamak için sınıf bileşeni örneğiyle aynı etkiyi elde edebilirsiniz:

import React from 'react'
import axios from 'axios'

function MyComponent() {
  const [frogs, setFrogs] = React.useState([])
  const [error, setError] = React.useState(null)
  const mounted = React.useRef(false)

  async function fetchFrogs(params) {
    try {
      const response = await axios.get('https://some-frogs-api.com/v1/', {
        params,
      })
      if (mounted.current) {
        setFrogs(response.data.items)
      }
    } catch (error) {
      if (mounted.current) {
        setError(error)
      }
    }
  }

  React.useEffect(() => {
    mounted.current = true

    return function cleanup() {
      mounted.current = false
    }
  }, [])

  return (
    <div>
      <h4>Frogs:</h4>
      <ul>
        {this.state.frogs.map((frog) => (
          <li key={frog.name}>{frog.name}</li>
        ))}
      </ul>
    </div>
  )
}

Yeniden oluşturmalara neden olmadan en son değişiklikleri takip etmek için iyi bir kullanım örneğinin bir başka örneği, onu aşağıdakilerle birlikte kullanmaktır. React.useMemo bunun gibi (kaynak):

function setRef(ref, value) {
  
  if (typeof ref === 'function') {
    ref(value)
    
  } else if (ref) {
    ref.current = value
  }
}

function useForkRef(refA, refB) {
  return React.useMemo(() => {
    if (refA == null && refB == null) {
      return null
    }
    return (refValue) => {
      setRef(refA, refValue)
      setRef(refB, refValue)
    }
  }, [refA, refB])
}

Bu, ref props değişir ve tanımlanırsa yeni bir işlev yaratacaktır. Bu, tepkinin eski çatallı referansı ile çağıracağı anlamına gelir. null, ve mevcut referans ile yeni çatallı referans. Dan beri React.useMemo kullanılırsa, ref’ler, ref’lerin ref’lerine kadar not edilecektir refA veya refB değişiklik–bu davranıştan doğal temizleme meydana gelir.

5. Kullanım React.useRef diğer öğelere bağlı öğeleri özelleştirmek için

React.useRef düğümlere tepki vermek için kendisini ref prop’a atamak da dahil olmak üzere birkaç faydalı kullanım durumu vardır:

function MyComponent() {
  const [position, setPosition] = React.useState({ x: 0, y: 0 })
  const nodeRef = React.useRef()

  React.useEffect(() => {
    const pos = nodeRef.current.getBoundingClientRect()
    setPosition({
      x: pos.x,
      y: pos.y,
    })
  }, [])

  return (
    <div ref={nodeRef}>
      <h2>Hello</h2>
    </div>
  )
}

pozisyonunu almak isteseydik div elemanın koordinatları için bu örnek yeterlidir. Ancak, uygulamanın herhangi bir yerindeki başka bir öğe aynı anda kendi konumlarını güncellemek isterse position buna göre bazı koşul mantığını değiştirir veya uygular, bunu yapmanın en iyi yolu ref callback function pattern. Geri çağırma işlevi modelini kullanırken, ilk argüman olarak ya tepki bileşeni örneğini ya da HTML DOM öğesini alırsınız.

Aşağıdaki örnek sadece basit bir örneği göstermektedir. setRef bir geri arama işlevi uygulanıyor mu? ref pervane. bunu içeride görebilirsin setRef doğrudan uygulamak yerine, ihtiyacınız olan her şeyi yapma yeteneğine sahipsiniz. React.useRef DOM öğesinin sürümü:

const SomeComponent = function({ nodeRef }) {
  const ownRef = React.useRef()

  function setRef(e) {
    if (e && nodeRef.current) {
      const codeElementBounds = nodeRef.current.getBoundingClientRect()
      
      console.log(`Code element's bounds: ${JSON.stringify(codeElementBounds)}`)
      ownRef.current = e
    }
  }

  return (
    <div
      ref={setRef}
      style={{ width: '100%', height: 100, background: 'green' }}
    />
  )
}

function App() {
  const [items, setItems] = React.useState([])
  const nodeRef = React.useRef()

  const addItems = React.useCallback(() => {
    const itemNum = items.length
    setItems((prevItems) => [
      ...prevItems,
      {
        [`item${itemNum}`]: `I am item # ${itemNum}'`,
      },
    ])
  }, [items, setItems])

  return (
    <div style={{ border: '1px solid teal', width: 500, margin: 'auto' }}>
      <button type="button" onClick={addItems}>
        Add Item
      </button>
      <SomeComponent nodeRef={nodeRef} />
      <div ref={nodeRef}>
        <pre>
          <code>{JSON.stringify(items, null, 2)}</code>
        </pre>
      </div>
    </div>
  )
}

6. Yüksek Dereceli Bileşenler

Güçlü yeniden kullanılabilir işlevler oluşturmak için düz JavaScript’te yaygın bir kalıp, üst düzey fonksiyon. Tepki nihai olarak JavaScript olduğundan, tepki içinde daha yüksek dereceli işlevleri de kullanabilirsiniz.

Yeniden kullanılabilir bileşenlerhile kullanmaktır daha yüksek dereceli bileşenler.

A daha yüksek dereceli bileşen bir bileşeni bağımsız değişken olarak alan ve bir bileşen döndüren bir işleve sahip olduğunuz zamandır. Mantığı soyutlamak ve uygulamadaki diğer işlevler arasında paylaşılmak için daha yüksek dereceli işlevlerin nasıl kullanılabileceği gibi, yüksek dereceli bileşenler de mantığı bileşenlerden soyutlamamızı ve diğer bileşenler arasında paylaşmamızı sağlar. Bu, uygulamanızda yeniden kullanmak için bir dizi yeniden kullanılabilir bileşen kullanabileceğiniz anlamına gelir.

İşte daha yüksek dereceli bir bileşen örneği. Bu snippet’te, daha yüksek dereceli bir bileşen withBorder özel bir bileşen alır ve gizli bir bileşen döndürür “Orta tabaka” bileşen. Daha sonra, ebeveyn döndürülen bu yüksek dereceli bileşeni işlemeye karar verdiğinde, bileşen olarak adlandırılır ve “orta katman bileşeninden” geçirilen props’ları alır:

import React from 'react'


const withBorder = (Component, customStyle) => {
  class WithBorder extends React.Component {
    render() {
      const style = {
        border: this.props.customStyle
          ? this.props.customStyle.border
          : '3px solid teal',
      }
      return <Component style={style} {...this.props} />
    }
  }

  return WithBorder
}

function MyComponent({ style, ...rest }) {
  return (
    <div style={style} {...rest}>
      <h2>This is my component and I am expecting some styles.</h2>
    </div>
  )
}

export default withBorder(MyComponent, {
  border: '4px solid teal',
})

7. Render Sahne

Tepki kitaplığında kullanmak için en sevdiğim hilelerden biri pervane deseni oluşturmak. Benzer bir sorunu çözecek şekilde daha yüksek dereceli bileşenlere benzer: Birden çok bileşen arasında kod paylaşımı. Render props, amacı dış dünyanın çocuklarına dönüştürmek için ihtiyaç duyduğu her şeyi geri vermek olan bir işlevi ortaya çıkarır.

Bileşenleri tepkime içinde oluşturmanın en temel yolu, onları şu şekilde oluşturmaktır:

function MyComponent() {
  return <p>My component</p>
}

function App() {
  const [fetching, setFetching] = React.useState(false)
  const [fetched, setFetched] = React.useState(false)
  const [fetchError, setFetchError] = React.useState(null)
  const [frogs, setFrogs] = React.useState([])

  React.useEffect(() => {
    setFetching(true)
    api
      .fetchFrogs({ limit: 1000 })
      .then((result) => {
        setFrogs(result.data.items)
        setFetched(true)
        setFetching(false)
      })
      .catch((error) => {
        setError(error)
        setFetching(false)
      })
  }, [])

  return (
    <MyComponent
      fetching={fetching}
      fetched={fetched}
      fetchError={fetchError}
      frogs={frogs}
    />
  )
}

Render props ile, çocuklarını oluşturan prop, konvansiyonel olarak adlandırılır. render şöyle:

function MyComponent({ render }) {
  const [fetching, setFetching] = React.useState(false)
  const [fetched, setFetched] = React.useState(false)
  const [fetchError, setFetchError] = React.useState(null)
  const [frogs, setFrogs] = React.useState([])

  React.useEffect(() => {
    setFetching(true)
    api
      .fetchFrogs({ limit: 1000 })
      .then((result) => {
        setFrogs(result.data.items)
        setFetched(true)
        setFetching(false)
      })
      .catch((error) => {
        setError(error)
        setFetching(false)
      })
  }, [])

  return render({
    fetching,
    fetched,
    fetchError,
    frogs,
  })
}

Örnekte, MyComponent olarak adlandırdığımız bir bileşen örneğidir. pervane bileşenini oluşturçünkü beklediği render bir pervane olarak ve çocuklarını işlemek için onu çağırır. Bu, bileşenin birden çok bileşende oluşturulmasına ve yeniden kullanılmasına izin vererek, oluşturma geri çağrısı yoluyla paylaşılan durumda ve verileri argüman olarak geçirmemize izin verildiğinden, tepki veren güçlü bir kalıptır:

function App() {
  return (
    <MyComponent
      render={({ fetching, fetched, fetchError, frogs }) => (
        <div>
          {fetching
            ? 'Fetching frogs...'
            : fetched
            ? 'The frogs have been fetched!'
            : fetchError
            ? `An error occurred while fetching the list of frogs: ${fetchError.message}`
            : null}
          <hr />
          <ul
            style={{
              padding: 12,
            }}
          >
            {frogs.map((frog) => (
              <li key={frog.name}>
                <div>Frog's name: {frog.name}</div>
                <div>Frog's age: {frog.age}</div>
                <div>Frog's gender: {frog.gender}</div>
              </li>
            ))}
          </ul>
        </div>
      )}
    />
  )
}

8. Not al

Bir tepki geliştirici olarak bilinmesi gereken en önemli şeylerden biri, aşağıdaki gibi bileşenlerinizden performansı optimize etmektir. React.memo. Bu, aşağıdaki gibi kötü hataların önlenmesine yardımcı olabilir: sonsuz döngüler Bu, uygulama çalışırken feci bir çökmeye neden olur.

Aşağıdaki tepki uygulamanızda not almanın çeşitli yollarından bazılarını okuyun:

Çözüm

Ve bu yazının sonu burada bitiyor! Umarım bunu değerli bulmuşsunuzdur ve gelecekte daha fazlasını ararsınız!

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.