React Higher Order Component 래핑 된 구성 요소의 재 렌더링을 강제 수행합니다.

Question

상위 구성 요소에서이 유효성 검사 동작을 올바르게 구현하는 방법을 이해하는 데 어려움을 겪고 있습니다.

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

편집 : TLDR : user @ noa-dev의 훌륭한 제안 덕분에 React Fiddle을 만들었습니다 : https://jsfiddle.net/8nLumb74/1/ 문제를 표시합니다.

간단히 말해서 :이 HOC로 감싸는 경우 내 텍스트 상자가 편집에 집중하지 않는 이유는 무엇입니까?

내가 뭘 잘못하고 있니?

텍스트 상자 구성 요소 :

는

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} />) 
    } 
}) 

유효성 검사기 구성 요소 :

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 
} 

부모 폼 구성 요소 다음 Form 구성 요소의 render 방법에서

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

, 당신은 만들 매번 새로운 ValidatingTextBox :

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

대신 구성 요소를 만든 다음 인스턴스를 유지 관리해야합니다. 난 당신이 반응하는 기본 문서의 고급 성능 https://facebook.github.io/react/docs/advanced-performance.html에보고 추천 할 것입니다

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} />) 
    } 
})