React Higher Order Bileşen, sarılmış bileşenin yeniden oluşturulmasını zorlar

Question

Bu doğrulama davranışının daha yüksek bir sipariş bileşeninde nasıl doğru bir şekilde uygulanacağını anlamak için uğraşıyorum.

===========================================

DÜZENLEME: TLDR: Kullanıcı @ noa-dev 'nin önerisi sayesinde, bir Tepki Oluşturun burada oluşturdum: sorunu göstermek için https://jsfiddle.net/8nLumb74/1/.

Basitçe söylemek gerekirse: Neden bu HOC tarafından sarıldığında metin kutumu düzenleme odaklanmayı kaybediyor?

Neyi yanlış yapıyorum?

metin kutusu bileşeni:

import React from 'react' 

export default React.createClass({ 
    changeText(e) { 
     if (this.props.validate) 
      this.props.validate(e.target.value) 
     this.props.update(e.target.value) 
    }, 
    componentDidMount() { 
     console.log('should only be fired once') 
    }, 
    render() { 
     return (<input type="text" 
      value={this.props.text} 
      onChange={this.changeText} />) 
    } 
}) 

Doğrulayıcı bileşeni:

import React from 'react' 

export default function (WrappedComponent) { 
    const Validation = React.createClass({ 
     validate(text) { 
      console.log('validating', text) 
     }, 
     render() { 
      return (
       <WrappedComponent 
       {...this.props} 
       validate={this.validate} 
       /> 
      ) 
     } 
    }) 
    return Validation 
} 

ana formu bileşeni: Form bileşenin render yöntemde

import React from 'react' 
import TextBox from './text-box' 
import Validator from './validator' 

export default React.createClass({ 
    getInitialState() { 
     return ({text: 'oh hai'}) 
    }, 
    update(text) { 
     this.setState({text}) 
    }, 
    render() { 
     const ValidatingTextBox = Validator(TextBox) 
     return (<ValidatingTextBox 
      text={this.state.text} 
      update={this.update} />) 
    } 
}) 

Answer 1

, yaratmakta her yeni ValidatingTextBox her seferinde:

render() { 
     const ValidatingTextBox = Validator(TextBox) 
     return (<ValidatingTextBox 
      text={this.state.text} 
      update={this.update} />) 
    } 

Bunun yerine, bileşenini yapmalı ve ardından örneği koruyacak şekilde kullanmalısınız. Ben tepki yerli Dokümanlar Gelişmiş Performans https://facebook.github.io/react/docs/advanced-performance.html içine bakarak öneriyoruz

import React from 'react' 
import TextBox from './text-box' 
import Validator from './validator' 

const ValidatingTextBox = Validator(TextBox) 

export default React.createClass({ 
    getInitialState() { 
     return ({text: 'oh hai'}) 
    }, 
    update(text) { 
     this.setState({text}) 
    }, 
    render() { 
     return (<ValidatingTextBox 
      text={this.state.text} 
      update={this.update} />) 
    } 
})