React：render（）またはcomponentDidMount（）で値を開始しますか？

Question

反応コンポーネントで計算された値をどこから開始するのかはわかりません。

render() { 
    const { foo } = this.props 
    const { bar } = this.state 

    const calculatedValue = bar ? foo * bar : foo 

    return (
    <div>{calculatedValue}</div> 
) 
} 

または私はcomponentDidMount()

Answer 1

これは、計算された値がアプリケーションでどのように変更されるかによって異なります。もし変化しない値があれば、コンポーネントの最初のレンダリング（あなたはおそらくそうではないでしょう）、ちょうどcomponentDidMountで計算して、プロパティ（this.calculatedValue = ...）に割り当てて、this.calculatedValueでレンダリングにアクセスしてください。 「反応する方法」ではない。

stateを使用していて、アプリケーションで変更されるものがある場合は、計算を別の場所に置く必要があります。あなたのrenderメソッドで

1.あなたがやったように、：：ここで

は、あなたの計算値を維持するためにあなたにいくつかのオプションがあり、単純な計算のための

ファインが、私を信じて、これは缶を思います... getterメソッドで

render() { 
    const { foo } = this.props 
    const { bar } = this.state 

    const calculatedValue = bar ? foo * bar : foo 

    return (
     <div>{calculatedValue}</div> 
    ) 
} 

2を成長：

計算は、あなたのレンダリング方法のために分離保つ

getCalculatedValue() { 
    const { foo } = this.props 
    const { bar } = this.state 

    return bar ? foo * bar : foo 
} 

render() { 
    return (
     <div>{ this.getCalculatedValue() }</div> 
    ) 
} 

3.ゲッタープロパティで[ES6]：

上記のオプションのためだけの変化が、あなたではないので、もう少しクリーナーメソッドを呼び出し、プロパティにアクセスするだけで、関数は "テーブルの下で"実行されています。ただ値を表示するには、この1を作る

親コンポーネントで

get calculatedValue() { 
    const { foo } = this.props 
    const { bar } = this.state 

    return bar ? foo * bar : foo 
} 

render() { 
    return (
     <div>{ this.getCalculatedValue }</div> 
    ) 
} 

4.：

この1つは少し複雑ですが、通常は成長しているプロジェクトのために良いです。ここでは、コンポーネントを2つに分けることができます。最初のものが計算されます（ここではAPIにアクセスできます）。このようにして、ロジックとUIをさまざまなコンポーネントに保持して、プロジェクト間でのコードの再利用を改善できます。状態のない機能コンポーネントにUIコンポーネント（子コンポーネント）を保持するための良いパターンですが、これは別の質問のためのものです。

/* A functional component. Is just like a class, but without state */ 
const MyUIComponent = props => <div>{ props.value }</div> 


class MyLogicalComponent extends React.Component { 
    render(){ 
     /* you can choose any of the options above to calculate */ 
     const computedValue = 5 + 8; 

     return (
      <div> 
       <MyUIComponent value={ computedValue } /> 
      </div> 
     ) 
    } 
} 

希望します。

Answer 2

でcalculatedValueを開始する必要があり、私はそれが本当にあなたがやっているどのくらいの計算に依存だと思う：これは、私は今それをやっている方法です。上の例のような単純なものについては、通常はrender()でそれを行います。

非常に基本的な機能の上にあるものはすべて、getFooBarCalcValue()などの別の機能に分割します。

この方法では、レンダリング方法が他の場所にあるかもしれないものであまりにも煩雑になることはありません。

Answer 3

calculatedValueは、Render関数のブロックスコープを持つconst変数です。 Render機能で値を使用する必要がある場合は、オプションはありませんが、Render関数でのみ計算することができます。

componentDidMount =() => { 
    const { foo } = this.props 
    const { bar } = this.state 

    const calculatedValue = bar ? foo * bar : foo //block scope 
} 

上記のように、あなたが変数calculatedValuecomponentDidMount()で関数を宣言する場合、それはreactJsコンポーネントのライフサイクルの後半で呼び出さRender機能にアクセスすることはできません。

render =() => { 

    //calculatedValue will give undefined error. calculatedValue is not known to render function 
    return (
    <div>{calculatedValue}</div> 
) 
}