React'te useState () nedir?

Şu anda React'te kanca kavramını öğreniyorum ve aşağıdaki örneği anlamaya çalışıyorum.

import { useState } from 'react';

function Example() {
    // Declare a new state variable, which we'll call "count"
    const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

Yukarıdaki örnek, işleyici işlevi parametresinin kendisindeki sayacı artırır. Olay işleyici işlevi içindeki sayma değerini değiştirmek istersem ne olur?

Aşağıdaki örneği düşünün

setCount = () => {
  //how can I modify count value here. Not sure if I can use setState to modify its value
  //also I want to modify other state values as well here. How can I do that
}

<button onClick={() => setCount()}>
  Click me
</button>

React kancaları , statesınıfları kullanmak zorunda kalmadan react'in temel özelliklerine erişmenin yeni bir yoludur (hala geliştirilmektedir); örneğinizde, bir sayacı doğrudan onClickprop içinde belirtmeden doğrudan eylemci işlevinde arttırmak istiyorsanız , siz şöyle bir şey yapabilirdi:

...
const [count, setCounter] = useState(0);
const [moreStuff, setMoreStuff] = useState(...);
...

const setCount = () => {
    setCounter(count + 1);
    setMoreStuff(...);
    ...
};

ve onClick:

<button onClick={setCount}>
    Click me
</button>

Bu satırda neler olup bittiğini hızlıca açıklayalım:

const [count, setCounter] = useState(0);

useState(0)İlk parametrenin countsayacın mevcut durumu olduğu ve sayacın durumunu setCountergüncellememize izin verecek yöntem olduğu bir demet döndürür . setCounterYöntemi countherhangi bir yerin durumunu güncellemek için kullanabiliriz - Bu durumda onu setCountdaha fazla şey yapabileceğimiz fonksiyonun içinde kullanıyoruz ; kancalı fikir, kodumuzu daha işlevsel tutabilmemiz ve istenmiyorsa / gerekmiyorsa sınıf tabanlı bileşenlerden kaçınabilmemizdir .

Birden örneklerle kanca hakkında tam bir makale yazdı gibi (sayaçları dahil) codepen bu , ben kullandı useState, useEffect, useContext, ve özel kancalar . Bu cevapta kancaların nasıl çalıştığı hakkında daha fazla ayrıntıya girebilirim, ancak belgeler durum kancasını ve diğer kancaları ayrıntılı olarak açıklayan çok iyi bir iş çıkarıyor , umarım yardımcı olur.

güncelleme: Hook'lar artık bir teklif değil , 16.8 sürümü artık kullanıma hazır olduklarından, React'in sitesinde bazı SSS'leri yanıtlayan bir bölüm var .

useState0.16.7versiyonda bulunan yerleşik tepki kancalarından biridir .

useStatesadece fonksiyonel bileşenlerin içinde kullanılmalıdır. useStatedahili bir duruma ihtiyaç duyduğumuzda ve yaşam döngüsü yöntemleri gibi daha karmaşık mantık uygulamamız gerekmediğinde bu yoldur.

const [state, setState] = useState(initialState);

Durum bilgisi olan bir değer ve onu güncellemek için bir işlev döndürür.

İlk oluşturma sırasında, döndürülen durum (durum), ilk bağımsız değişken (initialState) olarak iletilen değerle aynıdır.

SetState işlevi, durumu güncellemek için kullanılır. Yeni bir durum değerini kabul eder ve bileşenin yeniden işlenmesini sıralar.

Unutmayın o useStatedevlet güncellenmesi için kanca geri arama farklı davranır bileşenleri daha this.setState. Sizlere farkı göstermek için iki örnek hazırladım.

class UserInfoClass extends React.Component {
  state = { firstName: 'John', lastName: 'Doe' };
  
  render() {
    return <div>
      <p>userInfo: {JSON.stringify(this.state)}</p>
      <button onClick={() => this.setState({ 
        firstName: 'Jason'
      })}>Update name to Jason</button>
    </div>;
  }
}

// Please note that new object is created when setUserInfo callback is used
function UserInfoFunction() {
  const [userInfo, setUserInfo] = React.useState({ 
    firstName: 'John', lastName: 'Doe',
  });

  return (
    <div>
      <p>userInfo: {JSON.stringify(userInfo)}</p>
      <button onClick={() => setUserInfo({ firstName: 'Jason' })}>Update name to Jason</button>
    </div>
  );
}

ReactDOM.render(
  <div>
    <UserInfoClass />
    <UserInfoFunction />
  </div>
, document.querySelector('#app'));

<script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script>

<div id="app"></div>

setUserInfoGeri arama kullanıldığında yeni nesne oluşturulur . lastNameAnahtar değerini kaybettiğimize dikkat edin . İşlevi içeri aktarabileceğimizi düzeltmek için useState.

setUserInfo(prevState => ({ ...prevState, firstName: 'Jason' })

Örneğe bakın:

// Please note that new object is created when setUserInfo callback is used
function UserInfoFunction() {
  const [userInfo, setUserInfo] = React.useState({ 
    firstName: 'John', lastName: 'Doe',
  });

  return (
    <div>
      <p>userInfo: {JSON.stringify(userInfo)}</p>
      <button onClick={() => setUserInfo(prevState => ({
        ...prevState, firstName: 'Jason' }))}>
        Update name to Jason
      </button>
    </div>
  );
}

ReactDOM.render(
    <UserInfoFunction />
, document.querySelector('#app'));

<script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script>

<div id="app"></div>

Sınıf bileşenlerinde bulunan setState yönteminin aksine, useState güncelleme nesnelerini otomatik olarak birleştirmez. İşlev güncelleyici formunu nesne yayma sözdizimi ile birleştirerek bu davranışı çoğaltabilirsiniz:

setState(prevState => {
  // Object.assign would also work
  return {...prevState, ...updatedValues};
});

Daha fazla bilgi useStateiçin resmi belgelere bakın .

Hook'un sözdizimi useStatebasittir.

const [value, setValue] = useState(defaultValue)

Bu sözdizimine aşina değilseniz, buraya gidin .

Belgeleri okumanızı tavsiye ederim . Makul miktarda örnek içeren mükemmel açıklamalar var.

import { useState } from 'react';

function Example() {
    // Declare a new state variable, which we'll call "count"
    const [count, setCount] = useState(0);
  
  // its up to you how you do it
  const buttonClickHandler = e => {
   // increment
   // setCount(count + 1)
   
   // decrement
   // setCount(count -1)
   
   // anything
   // setCount(0)
  }
  

  return (
       <div>
          <p>You clicked {count} times</p>
         <button onClick={buttonClickHandler}>
             Click me
         </button>
      </div>
   );
 }

useStateReact v16.8.0'da bulunan kancalardan biridir. Temel olarak, aksi takdirde durum bilgisi olmayan / işlevsel bileşenlerinizi kendi durumuna sahip olabilecek bir bileşene dönüştürmenize izin verir.

En temel düzeyde şu şekilde kullanılır:

const [isLoading, setLoading] = useState(true);

Bu daha sonra setLoadingbir boole değeri geçirmenizi çağırmanıza izin verir . "Durum bilgisi olan" işlevsel bileşene sahip olmanın harika bir yolu.

useState()bir React kancasıdır. Kancalar, işlev bileşenlerinin içinde durum ve değişkenliği kullanmayı mümkün kılar.

Sınıflar içinde kanca kullanamasanız da, sınıf bileşeninizi bir işlevle sarabilir ve ondan kancalar kullanabilirsiniz. Bu, bileşenleri sınıftan işlev biçimine taşımak için harika bir araçtır. İşte eksiksiz bir örnek:

Bu örnek için bir sayaç bileşeni kullanacağım. Budur:

class Hello extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: props.count };
  }
  
  inc() {
    this.setState(prev => ({count: prev.count+1}));
  }
  
  render() {
    return <button onClick={() => this.inc()}>{this.state.count}</button>
  }
}

ReactDOM.render(<Hello count={0}/>, document.getElementById('root'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id='root'></div>

Sayma durumuna sahip basit bir sınıf bileşenidir ve durum güncellemesi yöntemlerle yapılır. Bu, sınıf bileşenlerinde çok yaygın bir modeldir. İlk şey, tüm özelliklerini sarılmış bileşene atayan, aynı ada sahip bir işlev bileşeniyle sarmalamaktır. Ayrıca, işlev dönüşünde sarmalanmış bileşeni de oluşturmalısınız. İşte burada:

function Hello(props) {
  class Hello extends React.Component {
    constructor(props) {
      super(props);
      this.state = { count: props.count };
    }

    inc() {
      this.setState(prev => ({count: prev.count+1}));
    }

    render() {
      return <button onClick={() => this.inc()}>{this.state.count}</button>
    }
  }
  return <Hello {...props}/>
}

ReactDOM.render(<Hello count={0}/>, document.getElementById('root'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id='root'></div>

Bu, aynı davranışa, aynı ada ve aynı özelliklere sahip, tamamen aynı bileşendir. Şimdi sayma durumunu fonksiyon bileşenine kaldıralım. Bu işler böyle yürür:

function Hello(props) {
  const [count, setCount] = React.useState(0);
  class Hello extends React.Component {
    constructor(props) {
      super(props);
      this.state = { count: props.count };
    }

    inc() {
      this.setState(prev => ({count: prev.count+1}));
    }

    render() {
      return <button onClick={() => setCount(count+1)}>{count}</button>
    }
  }
  return <Hello {...props}/>
}

ReactDOM.render(<Hello count={0}/>, document.getElementById('root'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js" integrity="sha256-3vo65ZXn5pfsCfGM5H55X+SmwJHBlyNHPwRmWAPgJnM=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js" integrity="sha256-qVsF1ftL3vUq8RFOLwPnKimXOLo72xguDliIxeffHRc=" crossorigin="anonymous"></script>
<div id='root'></div>

Yöntemin inchala orada olduğunu, kimseye zarar vermeyeceğini, aslında ölü kod olduğunu unutmayın. Fikir bu, sadece durumu yukarı kaldırmaya devam et. Bitirdikten sonra sınıf bileşenini kaldırabilirsiniz:

function Hello(props) {
  const [count, setCount] = React.useState(0);

  return <button onClick={() => setCount(count+1)}>{count}</button>;
}

ReactDOM.render(<Hello count={0}/>, document.getElementById('root'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js" integrity="sha256-3vo65ZXn5pfsCfGM5H55X+SmwJHBlyNHPwRmWAPgJnM=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js" integrity="sha256-qVsF1ftL3vUq8RFOLwPnKimXOLo72xguDliIxeffHRc=" crossorigin="anonymous"></script>

<div id='root'></div>

Bu, sınıf bileşenlerinin içinde kancaların kullanılmasını mümkün kılarken, bu örnekte yaptığım gibi geçiş yapmadığınız sürece bunu yapmanızı tavsiye etmem. İşlev ve sınıf bileşenlerini karıştırmak, durum yönetimini bir karmaşa haline getirecektir. Umarım bu yardımcı olur

Saygılarımla

useState (), işlevsel bileşenlerinizde durumları kullanmanıza izin veren yerleşik bir React kancasıdır. Bu, React 16.7'den önce mümkün değildi.

UseState işlevi, react paketinden içe aktarılabilen yerleşik bir kancadır. Fonksiyonel bileşenlerinize durum eklemenizi sağlar. Bir işlev bileşeni içindeki useState kancasını kullanarak, sınıf bileşenlerine geçmeden bir durum parçası oluşturabilirsiniz.

Kancalar React v16.7.0-alpha useState, "Kanca" da yeni bir özelliktir . useState()herhangi bir değişkenin varsayılan değerini ayarlayın ve işlev bileşeninde yönetin (PureComponent işlevleri). ex : const [count, setCount] = useState(0);sayımı 0. varsayılan değerini ayarlamak ve u kullanabilirsiniz setCountiçin incrementveya decrementdeğer. onClick={() => setCount(count + 1)}sayma değerini artırın. DOC

Teşekkürler loelsonk, öyle yaptım

const [dataAction, setDataAction] = useState({name: '', description: ''});

    const _handleChangeName = (data) => {
        if(data.name)
            setDataAction( prevState  => ({ ...prevState,   name : data.name }));
        if(data.description)
            setDataAction( prevState  => ({ ...prevState,   description : data.description }));
    };
    
    ....return (
    
          <input onChange={(event) => _handleChangeName({name: event.target.value})}/>
          <input onChange={(event) => _handleChangeName({description: event.target.value})}/>
    )

useState, işlevsel bir bileşene durum eklemenizi sağlayan bir kancadır. State özelliğinin başlangıç ​​değeri olan bir argümanı kabul eder ve durum özelliğinin geçerli değerini ve bu durum özelliğini güncelleyebilen bir yöntemi döndürür.
Aşağıda basit bir örnek verilmiştir:
import React, {useState} from react
function HookCounter {
const [count, stateCount]= useState(0)
return(
<div>
<button onClick{( ) => setCount(count+1)}> count{count} </button>
</div>
)
}

useState, bu durumda sıfır olan durum değişkeninin başlangıç ​​değerini kabul eder ve bir değer çifti döndürür. Durumun mevcut değeri count olarak adlandırıldı ve durum değişkenini güncelleyebilen bir yöntem setCount olarak adlandırıldı.