React JS 상태 vs 프로펠러

React JS 상태 vs 프로펠러

이는 답변 가능성과 독단성 사이의 경계를 넘어서는 것일 수 있지만, 저는 리액트를 구축하는 방법에 대해 왔다 갔다 하고 있습니다.JS 컴포넌트는 복잡성이 증가함에 따라 어느 정도 방향을 사용할 수 있습니다.

AngularJS에서 온 저는 제 모델을 속성으로 컴포넌트에 전달하고 컴포넌트가 모델을 직접 수정하도록 하고 싶습니다. 모델을 여러 로 요?state속성을 컴파일하여 업스트림으로 반송할 때 다시 컴파일할 수 있습니까? JS웨이?

블로그 투고 에디터의 예를 들어보겠습니다.모델을 직접 수정하려고 하면 다음과 같이 됩니다.

var PostEditor = React.createClass({
  updateText: function(e) {
    var text = e.target.value;
    this.props.post.text = text;
    this.forceUpdate();
  },
  render: function() {
    return (
      <input value={this.props.post.text} onChange={this.updateText}/>
      <button onClick={this.props.post.save}/>Save</button>
    );
  }
});

그건 잘못된 것 같아.

'리액트'는 '가 더 요?text 속성 '''」state이치노

var PostEditor = React.createClass({
  getInitialState: function() {
    return {
      text: ""
    };
  },
  componentWillMount: function() {
    this.setState({
      text: this.props.post.text
    });
  },
  updateText: function(e) {
    this.setState({
      text: e.target.value
    });
  },
  savePost: function() {
    this.props.post.text = this.state.text;
    this.props.post.save();
  },
  render: function() {
    return (
      <input value={this.state.text} onChange={this.updateText}/>
      <button onClick={this.savePost}/>Save</button>
    );
  }
});

하면 이 필요 this.forceUpdate()그러나 모델이 성장함에 따라 (게시글에 작성자, 제목, 태그, 댓글, 평가 등이 포함될 수 있음) 컴포넌트는 매우 복잡해집니다.

ReactLink를 사용한 첫 번째 방법은 무엇입니까?

2016년 업데이트 : 리액션이 변경되어 "제안 vs 상태"라는 설명이 매우 간단해졌습니다.컴포넌트가 데이터를 변경해야 하는 경우 - 컴포넌트를 상태로 하고, 그렇지 않은 경우에는 소품 상태로 합니다.왜냐하면 소품들은 이제 읽기 전용이기 때문이다.

소품과 주(州)의 정확한 차이점은 무엇입니까?

자세한 설명은 이쪽(풀버전)에서 확인하실 수 있습니다.

두 번째 접근법이 더 낫습니다.React는 모델에는 신경을 쓰지 않고 가치와 앱에서 어떻게 흘러가는지에 신경을 씁니다.포스트 모델은 루트의 단일 컴포넌트에 저장하는 것이 이상적입니다.그런 다음 각각 모델의 일부를 사용하는 하위 구성 요소를 생성합니다.

데이터를 수정해야 하는 자녀에게 콜백을 전달하고 자녀 구성 요소에서 콜백을 호출할 수 있습니다.

이.props 또는 this.state를 직접 수정하는 것은 권장되지 않습니다.이는 React가 변경 내용을 인식할 수 없기 때문입니다.그 이유는 React가 포스트 프로포트를 얄팍하게 비교하여 변경 여부를 판단하기 때문입니다.

데이터가 외부 컴포넌트에서 내부 컴포넌트로 어떻게 흐를 수 있는지 보여주기 위해 jsfiddle을 만들었습니다.

handleClick를 (.

var Outer = React.createClass({

  getInitialState: function() {
    return {data: {value: 'at first, it works'}};
  },

  handleClick: function () {

    // 1. This doesn't work, render is not triggered.
    // Never set state directly because the updated values
    // can still be read, which can lead to unexpected behavior.

    this.state.data.value = 'but React will never know!';

    // 2. This works, because we use setState

    var newData = {value: 'it works 2'};
    this.setState({data: newData});

    // 3. Alternatively you can use React's immutability helpers
    // to update more complex models.
    // Read more: http://facebook.github.io/react/docs/update.html

    var newState = React.addons.update(this.state, {
      data: {value: {$set: 'it works'}}
    });
    this.setState(newState);
 },

  render: function() {
      return <Inner data={this.state.data} handleClick={this.handleClick} />;
  }
});

React 문서에서

소품은 불변의 것이다: 소품은 부모로부터 물려받아 부모에 의해 "소유"된다.상호작용을 구현하기 위해 컴포넌트에 가변 상태를 도입합니다.this.state는 컴포넌트 전용으로 호출함으로써 변경할 수 있습니다.setState() 입니다.상태가 갱신되면 컴포넌트는 스스로 재렌더됩니다.

TrySpace에서: 소품(또는 상태)이 업데이트되면(setProps/setState 또는 부모로부터) 컴포넌트도 다시 렌더링됩니다.

반응으로 생각하는 것:

하나씩 살펴보고 어떤 게 주(州)인지 알아봅시다각 데이터에 대해 세 가지 질문을 하면 됩니다.

1. 부모로부터 소품을 통해 전달되는 건가요?만약 그렇다면, 그것은 주가 아닐 것이다.

2. 시간이 지남에 따라 변하나요?그렇지 않다면, 아마 주정부가 아닐 겁니다.

3. 컴포넌트 내의 다른 상태나 소품을 기준으로 계산할 수 있습니까?그렇다면 국가가 아닙니다.

제가 당신의 질문에 대답하고 있는지는 잘 모르겠지만, 특히 크고 성장하는 어플리케이션에서는 컨테이너/컴포넌트 패턴이 놀라울 정도로 잘 작동한다는 것을 알게 되었습니다.

기본적으로 다음 두 가지 React 구성 요소가 있습니다.

• 스타일링과 DOM 상호작용을 다루는 "순수한" 디스플레이 구성 요소
• 컨테이너 구성 요소 - 외부 데이터 액세스/저장, 상태 관리 및 디스플레이 구성 요소 렌더링을 처리합니다.

예

N.B. 이 예는 아마도 너무 단순해서 이 패턴의 이점을 설명하기 어려울 것입니다. 이렇게 간단한 경우에는 상당히 장황하기 때문입니다.

/**
 * Container Component
 *
 *  - Manages component state
 *  - Does plumbing of data fetching/saving
 */

var PostEditorContainer = React.createClass({
  getInitialState: function() {
    return {
      text: ""
    };
  },

  componentWillMount: function() {
    this.setState({
      text: getPostText()
    });
  },

  updateText: function(text) {
    this.setState({
      text: text
    });
  },

  savePost: function() {
    savePostText(this.state.text);
  },

  render: function() {
    return (
      <PostEditor
        text={this.state.text}
        onChange={this.updateText.bind(this)}
        onSave={this.savePost.bind(this)}
      />
    );
  }
});


/**
 * Pure Display Component
 *
 *  - Calculates styling based on passed properties
 *  - Often just a render method
 *  - Uses methods passed in from container to announce changes
 */

var PostEditor = React.createClass({
  render: function() {
    return (
      <div>
        <input type="text" value={this.props.text} onChange={this.props.onChange} />
        <button type="button" onClick={this.props.onSave} />
      </div>
    );
  }
});

혜택들

디스플레이 로직과 데이터/상태 관리를 분리함으로써 다음과 같은 재사용 가능한 디스플레이 컴포넌트를 얻을 수 있습니다.

• 리액트 컴포넌트 놀이터와 같은 것을 사용하여 다른 소품 세트로 쉽게 반복할 수 있다.
• 다른 동작을 위해 다른 컨테이너로 포장할 수 있습니다(또는 다른 컴포넌트와 조합하여 어플리케이션의 큰 부분을 빌드할 수도 있습니다).

모든 외부 통신을 처리하는 컨테이너 구성 요소도 있습니다.이것에 의해, 나중에 중대한 변경을 가할 경우에 데이터에의 액세스 방법을 유연하게 할 수 있게 됩니다*.

이 패턴은 또한 쓰기 및 구현 단위 테스트를 훨씬 더 쉽게 만듭니다.

대형 리액트 앱을 여러 번 반복해 본 결과, 특히 계산된 스타일을 가진 대형 컴포넌트나 복잡한 DOM 상호 작용이 있는 경우, 이 패턴은 비교적 쉽게 문제를 해결할 수 있다는 것을 알게 되었습니다.

* 플럭스 패턴을 읽고 확인하세요 Marty.js는 이 답변에 큰 영감을 주었습니다(요즘 많이 사용하고 있습니다). Redux(및 react-redux)는 이 패턴을 매우 잘 구현합니다.

2018년 이후에 이 내용을 읽으신 분들을 위해 참고하시기 바랍니다.

특히 Hooks의 도입으로 인해 이 답변이 작성된 이후 리액트는 상당히 발전했습니다.단, 이 예의 기본 상태 관리 로직은 동일하며, 보다 중요한 것은 상태와 프레젠테이션 로직을 분리함으로써 얻을 수 있는 이점이 여전히 동일한 방식으로 적용됩니다.

페이스북이 이미 이 링크에서 설명한 안티패턴을 사용하고 계신 것 같습니다.

다음은 여러분이 찾으시는 사항입니다.

React.createClass({
  getInitialState: function() {
    return { value: { foo: 'bar' } };
  },

  onClick: function() {
    var value = this.state.value;
    value.foo += 'bar'; // ANTI-PATTERN!
    this.setState({ value: value });
  },

  render: function() {
    return (
      <div>
        <InnerComponent value={this.state.value} />
        <a onClick={this.onClick}>Click me</a>
      </div>
    );
  }
});

내부 컴포넌트가 처음 렌더링되면 {foo: 'bar' }가 값 지지대로 사용됩니다.사용자가 앵커를 클릭하면 상위 구성 요소의 상태가 { value: { foo: 'bar' } 로 업데이트되고 내부 구성 요소의 재렌더링 프로세스가 트리거되며, 이 프로세스는 { foo: 'bar' }을(를) 프로포트의 새 값으로 수신합니다.

문제는 부모 컴포넌트와 내부 컴포넌트가 같은 오브젝트에 대한 참조를 공유하기 때문에 onClick 함수의 라인 2에서 오브젝트가 변환되면 내부 컴포넌트의 프로포트가 변경된다는 것입니다.따라서 재렌더링 프로세스가 시작되고 ComponentUpdate가 호출되면 this.props.value가 지정됩니다.foo는 nextProps.value와 동일합니다.foo.실제로 this.props.value는 nextProps.value와 동일한 개체를 참조하기 때문입니다.

따라서 프롭의 변경을 놓치고 재렌더링 프로세스를 단락시키므로 UI가 '바'에서 '바'로 업데이트되지 않습니다.

언급URL : https://stackoverflow.com/questions/23481061/reactjs-state-vs-prop