()는 예를 들어

나는 가게가 있습니다.()는 예를 들어

class MyView extends React.Component { 
    constructor() { 
    super(); 
    this.state = { 
     value: MyStore.getValue() 
    }; 
    }

을 그리고 변경 :

나는 그것을 할 수

userClick() { 
    this.setState({value: MyStore.changeValue('newValue')}); 
    }

을 또는 상점에서 value을 변경하고 방출 호출합니다.

render() { 
    const value = MyStore.value; 
    return (
     <div>{value}</div> 
    ) 
    }

을 그리고 변경 :

하지만 forceUpdate()와 함께 할 수

userClick() { 
    MyStore.value = 'newValue'; 
    this.forceUpdate(); 
    }

왜 나쁜?

출처

2016-10-20 Nick

에

var View = observer((props) => ( <div> <button onClick={()=>props.store.value = Math.random()}>Change</button> <p>{props.store.value}</p> </div> ) ) class MyStore { @observable value =1; get value() { return this._value; } set value(val) { this._value = val; } }

괜찮다 라이브 데모를 (이 상태를 필요로하지 않기 때문에, 기능적인 구성 요소를 사용하여)까지 boilds mobX으로

당신의 그 때 UI를 저장하고 업데이트 하시겠습니까? –

@ JohnF. 예,하지만'forceUpdate'로 더 쉬워 졌다고 생각합니다. 리스너 등을 추가 할 필요가 없습니다. – Nick

당신의 접근 방식은 효과적 일 것입니다 만,'render()'에서 항상'MyStore.value'를 사용하려면 로컬'state' 변수를 유지할 필요가 없습니다. 즉 render에서'state.value'를 사용하기로했다면, 첫 번째 접근 방식을 사용합니다. 여기서'MyStore'를 호출하여 값을 변경 한 다음 그에 맞게 setState를 호출합니다. – lux

나는 당신이하려는 것을 잘못 생각하지 않습니다. 당신은 기본적인 OO 규칙을 따르고 있으며 데이터를 캡슐화하고 있습니다.

실제로 왜 가장 기본적인 기본 예제가 데이터와 표현을 혼합하는 대신이 패턴을 도입하지 않는지 이해할 수 없습니다. 보통 점과 같은 항목이 보이지 않습니다. Flux, Redux 또는 MobX와 관련된 예가 있습니다.

getter와 setters를 사용하기 위해이 codepen에 예제를 다시 작성했으며 데이터가 변경되었을 때 관찰자 패턴을 사용하고 있습니다. 나는 이것을 (빠른 데모 인 것을 기억하자면) forceUpdate()을 사용할 수있는 완벽한 방법이라고 주장한다.

class MyView extends React.Component { 
    constructor(props) { 
    super(props); 
    this.props.store.setObserver(this); 
    } 
    changed(){ 
    this.forceUpdate(); 
    } 
    render() { 
    return (
     <div> 
      <button onClick={()=>this.props.store.value = Math.random()}>Change</button> 
      <p>{this.props.store.value}</p> 
     </div> 
    ) 
    } 
} 

class MyStore { 
    constructor() { 
    this._value = 1; 
    } 

    get value() { 
    return this._value; 
    } 
    set value(val) { 
    console.log(val); 
    this._value = val; 
    this._observer.changed(); 
    } 
    setObserver(observer){ 
    this._observer = observer; 
    } 
}

사실 이것은 mobX library이 표면 아래에서 무엇을하는지입니다. 자동 청취자 용량을 제공하며, 이것이 내가 계획하고있는 방식이라면 분명히이 도서관을 살펴보아야합니다.

forceUpdate()를 포함하여 모든 "관찰자"세부 정보를 자동으로 처리합니다 (forceUpdate는 사용하지 않고 updata가 필요할 때 render() 메서드를 호출 함). 예제가 발생 변화를 듣고 당신이 시도하고 있습니까 codepen.io

출처

2017-04-26 14:47:58 Plaul

()는 예를 들어

답변

관련 문제