レンダリング機能が提供されているときに小道具を再レンダリングしないでください

Question

レンダリング機能が提供されているにもかかわらず、JSXを直接返す代わりにレンダリングが行われない理由を理解することに問題があります。この場合、市の

export default React => { 
    const InputBox = ({ city, setCity, setTime }) => { 
    const onInputEnter = createOnInputEnter({ city, setCity, setTime, getCityTime }) 

    return (
     <div className='InputBox'> 
      <input 
      defaultValue={city} 
      onKeyPress={onInputEnter} 
      onFocus={moveFocusAtEnd} 
      autoFocus /> 
     </div> 
    ) 
    } 

    return InputBox 
} 

私は街のReduxの状態を変更するたびに再レンダリングされます。

はここでInputBox関数コンポーネントの私の例です。

export default React => { 
    const InputBox = ({ city, setCity, setTime }) => { 
    const onInputEnter = createOnInputEnter({ city, setCity, setTime, getCityTime }) 

    const componentDidMount = async() => { 
     const { city: resultCity, time: resultTime } = await getCityTime(city) 

     setCity(resultCity) 
     setTime(resultTime) 
    } 

    const render =() => { 
     return (
     <div className='InputBox'> 
      <input 
      defaultValue={city} 
      onKeyPress={onInputEnter} 
      onFocus={moveFocusAtEnd} 
      autoFocus /> 
     </div> 
    ) 
    } 

    return { render, componentDidMount } 
    } 

    return InputBox 
} 

この例では、都市は1回だけ渡され、還元状態が変化すると再レンダリングされません。

初期化にcomponentDidMountメソッドを使用しているので、後者の例を使用したいと思います。

この例では、ReactとReact-Reduxを使用しています。私のInputBox関数のコンテナがどのように見えるか

は、これは次のとおりです。

import createInputBox from '../components/InputBox.js' 
import { connect } from 'react-redux' 

... 

export default React => { 
    const InputBox = createInputBox(React) 

    const InputBoxWithReduxStore = connect(
    ({ city }) => ({ city }), 
    mapDispatchToProps 
)(InputBox) 

    return InputBoxWithReduxStore 
} 

EDIT：

function createOnInputEnter ({ city, setCity, setTime, getCityTime }) { 
    return async ({ key, target }) => { 
    if (key === 'Enter') { 
     try { 
     const inputCity = target.value 

     setTime('...') 

     const { city: resultCity, time: resultTime } = await getCityTime(inputCity) 

     setCity(resultCity) 
     setTime(resultTime) 
     } catch (err) { 
     const { city: resultCity, time: resultTime } = await getCityTime(city) 

     setCity(resultCity) 
     setTime(resultTime) 
     } 
    } 
    } 
} 

@zarcodeが反応使用して示唆したように、私はcreateOnInputEnter機能の実装を表示するためのコードスニペットを含めています

.Component、それは私の要件に合っていません。私はClass-lessコンポーネントを使用しているからです。ミックスインの詳細：https://gist.github.com/jquense/47bbd2613e0b03d7e51c

Answer 1

componentDidMountは一度だけ呼び出され、ボトムアップでも動作します。 すべての状態のレンダリングでは、componentWillReceievepropsを使用することができます。

Answer 2

最初の例は機能コンポーネントです。コンポーネントライフサイクルメソッド（componentDidMountなど）が不要な場合に使用できます。

2番目の例は、機能コンポーネントとライフサイクルメソッドが混在していて、うまく動作せず、試したことがないかどうかはわかりません。 代わりに、ライフサイクルメソッドをコンポーネントで使用する場合は、React.Componentを拡張するクラスコンポーネントを使用することをお勧めします。最初のケースconst onInputEnter = createOnInputEnter({ city, setCity, setTime, getCityTime })で

... 
import {Component} from "react"; 

export default class InputBox extends Component { 
    onInputEnter =() => { 
     const { city, setCity, setTime } = this.props; 
     createOnInputEnter({ city, setCity, setTime, getCityTime }) 
    } 

    async componentDidMount() { 
    const { city, setCity, setTime } = this.props; 
    const { city: resultCity, time: resultTime } = await getCityTime(city) 

    setCity(resultCity) 
    setTime(resultTime) 
    } 

    render(){ 
    return (
     <div className='InputBox'> 
     <input 
      defaultValue={city} 
      onKeyPress={onInputEnter} 
      onFocus={moveFocusAtEnd} 
      autoFocus /> 
     </div> 
    ) 
    } 

}

Answer 3

それが機能コンポーネントであるコンポーネントのrenderメソッド内にある：それは次のようになります。

私はあなたがこのような何かをする必要があります最初のものと同じであることをどのようにこのコンセプトの作品が、第二の例のためになっていない午前：

export default React => { 
    const InputBox = ({ city, setCity, setTime }) => { 

    const componentDidMount = async() => { 
     const { city: resultCity, time: resultTime } = await getCityTime(city) 

     setCity(resultCity) 
     setTime(resultTime) 
    } 

    const render =() => { 
    const { city, setCity, setTime } = this.props; 
    const onInputEnter = createOnInputEnter({ city, setCity, setTime, getCityTime }) 
     return (
     <div className='InputBox'> 
      <input 
      defaultValue={city} 
      onKeyPress={onInputEnter} 
      onFocus={moveFocusAtEnd} 
      autoFocus /> 
     </div> 
    ) 
    } 

    return { render, componentDidMount } 
    } 

    return InputBox 
} 

私は、これは仕方がアクセスするかどうかわからないのですが、内部の小道具がここにレンダリングされます。