Reactで状態を更新するエレガントなES6方法

Question

Reactのstateを更新する構文は大きく変更されています。私はそれを開始し、更新する最もシンプルでエレガントな方法を見つけることを試みています。

は、このRNコードを手に入れた：

const { quotes } = require('./quotes.json') 

class QuoteScreen extends Component { 
    state = { 
    QuoteIndex: 0 
    } 
    render() { 
    return (
     <Image ...> 
     <View ...> 
      ... 
      <ButtonNextQuote 
      onPress={() => { 
       this.setState((prevState, props) => { 
       return { 
        QuoteIndex: (prevState.QuoteIndex + 1) % (quotes.length - 1) 
       } 
       }) 
      }} 
      /> 
     </View> 
     </Image> 
    ) 
    } 
} 

onPressにstateの更新を低減することが可能でしょうか？

匿名関数を2回呼び出すことは避けたいですが、ハンドラを参照してバインドする必要はありません。また、returnの使用を避けたいですか？

Answer 1

これは私がそれをする方法です。私はobject destructuringをsetStateのコールバック（prevState）の最初の引数に使用しました。パフォーマンス上の理由から、匿名の代わりに別の関数を使用しました。また、矢印関数を使用しているため、関数を手動でthisにバインドする必要はありません。

const { quotes } = require('./quotes.json') 
 

 
class QuoteScreen extends Component { 
 
    state = { 
 
    QuoteIndex: 0 
 
    } 
 

 
    handleUpdateState =() => { 
 
    this.setState(({ QuoteIndex }) => ({ 
 
     QuoteIndex: (QuoteIndex + 1) % (quotes.length - 1) 
 
    })); 
 
    } 
 

 
    render() { 
 
    return (
 
     <Image ...> 
 
     <View ...> 
 
      ... 
 
      <ButtonNextQuote 
 
      onPress={this.handleUpdateState} 
 
      /> 
 
     </View> 
 
     </Image> 
 
    ) 
 
    } 
 
}

Answer 2

私はクラス外の変数に更新関数を格納します。

const newState = ({QuoteIndex: i}) => ({QuoteIndex: (i + 1) % nQuotes}); 

（もちろん、あなたはそれがインライン化されていない場合は、多分「簡潔さ」はもうあなたにそれほど重要ではない、あなたが好きなように関数を定義することを選んだことができます）

そして、あなたができますちょうどthis.setState(newState)に電話：

onPress={() => this.setState(newState)} 

Answer 3

私はこれを行うには人気があり、良い方法が

1. バッチ内のいくつかの奇妙なケースを避けるためにthis.setStateにコールバックを提供することにより、「機能SETSTATE」を使用することがあると思い状態更新

2. "コンポーネントクラスとは別に状態を宣言します"新しい状態を取得する関数では、別々に再利用してテストすることができます。

ダン・アブラモフ

例でツイートをフィーチャーし、このアプローチの偉大な説明のためのチェックthis article：

const { quotes } = require('./quotes.json') 

// keep pure function outside component to be reusable, testable 
const getQuoteIndex = ({ QuoteIndex }) => ({ 
    QuoteIndex: (QuoteIndex + 1) % (quotes.length - 1) 
}) 

class QuoteScreen extends Component { 
    state = { 
    QuoteIndex: 0 
    } 
    // arrow function will take care of this binding 
    handlePress =() => { this.setState(getQuoteIndex) } 
    render() { 
    return (
     <Image ...> 
     <View ...> 
      ... 
      <ButtonNextQuote 
      onPress={this.handlePress} 
      /> 
     </View> 
     </Image> 
    ) 
    } 
} 

Answer 4

あなたは次のように、たびrenderの実行をイベントハンドラを再定義しないようにしたいと思います他の人は言った。私の代わりに、コールバック関数のsetStateにオブジェクトを渡すことを好む：

_handlePress =() => { 
    this.setState({ 
    QuoteIndex: (this.state.QuoteIndex + 1) % (quotes.length - 1) 
    }); 
}; 

onPress={this._handlePress} 

状態がどこから来ている、それは明示的なのでこれは読みやすいです。また、追加のコールバック関数を追跡する必要もありません。