jQuery에서 React.js로 이동하는 방법은 무엇입니까?

jQuery에서 React.js로 이동하는 방법은 무엇입니까?

---

나는 며칠 동안 React에 대해 읽고 있습니다. 나는 내가보고있는 내용의 대부분을 이해할 수 있지만 그것을 쓰는 능력에 대해 전적으로 확신하지는 못합니다. 저는 jQuery를 통해 모든 html 생성을 수행하고 요소를 서로 추가하는 작은 웹 앱을 개발하고 있습니다. 나는 그것이 더 빠를 것이라고 믿기 때문에 React로 이것을 시도하고 재 구축하고 싶습니다. 이 JSFiddle 은 제가 작업하고있는 일종의 작은 예입니다. React로 어떻게 작성 하시겠습니까?

JS :

function remove() {
    this.remove();
}

function timed_append_new_element() {
    setTimeout(function () {
        var added_content = $("<span />", {
            class: "added_content",
            text: "Click to close",
            click: remove
        });
        container.append(added_content);
    }, 3000);
}

function append_new_element() {
    var added_content = $("<span />", {
        class: "timed_added_content",
        text: "Click to close",
        click: remove
    });
    container.append(added_content);
}


var container = $("<div />", {
    class: "container"
});
var header = $("<span />", {
    class: "header",
    text: "jQuery to React.js Header"
});
var add_button = $("<button />", {
    class: "add_button",
    text: "Add Element",
    click: append_new_element
});
var timed_add_button = $("<button />", {
    class: "add_button",
    text: "Add Element in 3 seconds",
    click: timed_append_new_element
});
container.append(header);
container.append(add_button);
container.append(timed_add_button);
$("body").append(container);

---

좋은 React 애플리케이션을 구축하는 데 도움이 될 수있는 몇 가지 기본 원칙이 있습니다.

UI는 데이터의 기능이어야합니다.

많은 "jQuery 수프"스타일 애플리케이션에서 애플리케이션의 비즈니스 로직, 앱의 데이터 및 UI 상호 작용 코드가 모두 섞여 있습니다. 이로 인해 이러한 종류의 애플리케이션은 디버깅하기 어렵고 특히 성장하기 어렵습니다. 많은 최신 클라이언트 측 애플리케이션 프레임 워크와 마찬가지로 React는 UI가 데이터의 표현 일 뿐이라는 생각을 강요합니다. UI를 변경하려면 데이터를 변경하고 프레임 워크가 UI를 업데이트하는 데 사용하는 바인딩 시스템을 허용해야합니다.

React에서 각 구성 요소는 (이상적으로) 두 가지 데이터의 함수입니다 . 구성 요소 인스턴스에 전달 되는 속성 과 구성 요소가 내부적으로 관리 하는 상태 입니다. 동일한 속성 (또는 "props") 및 상태가 주어지면 구성 요소도 동일한 방식으로 렌더링되어야합니다.

이것은 구체적인 예가없는 추상적 인 아이디어 일 수 있으므로 지금 진행하면서 명심하십시오.

DOM을 만지지 마십시오

React에서는 다른 데이터 바인딩 프레임 워크보다 훨씬 더 그렇기 때문에 가능하면 DOM을 직접 조작하지 않도록해야합니다. React의 많은 성능 및 복잡성 특성은 React가 실제 DOM에서 작동하기 위해 내부적으로 diffing 알고리즘이있는 가상 DOM을 사용하기 때문에 가능합니다. DOM 조작을 수행하는 컴포넌트를 빌드 할 때마다 React의 가상 DOM 기능을 사용하여 동일한 기능을 더 관용적으로 빌드 할 수 있는지 자문해야합니다.

물론 때로는 DOM에 액세스해야하거나 React에서 재 빌드하지 않고 jQuery 플러그인을 통합하고 싶을 수도 있습니다. 이와 같은시기에 React는 React의 성능이 너무 많이 저하되지 않도록 (또는 경우에 따라 구성 요소가 깨지지 않도록) 사용할 수있는 좋은 구성 요소 수명주기 후크 를 제공합니다 .

DOM을 조작하지 않는 것은 위의 "데이터의 기능으로서의 UI"와 함께 진행됩니다.

데이터 흐름 반전

대규모 React 애플리케이션에서는 특정 애플리케이션 데이터를 관리하는 하위 구성 요소를 추적하는 것이 어려울 수 있습니다. 이러한 이유로 React 팀은 데이터 조작 로직을 중앙 위치에 보관할 것을 권장합니다. 이를 수행하는 가장 간단한 방법은 콜백을 하위 구성 요소에 전달하는 것입니다. 자체 웹 사이트 가 있는 Flux라는 Facebook에서 개발 한 아키텍처도 있습니다 .

구성 가능한 구성 요소 만들기

많은 경우 여러 상태 또는 여러 UI 논리를 관리하는 큰 구성 요소를 작성하고 싶을 수 있습니다. 가능한 경우 (그리고 합리적인 범위 내에서) 큰 구성 요소를 단일 데이터 또는 UI 논리에서 작동하는 작은 구성 요소로 분할하는 것을 고려해야합니다. 이렇게하면 응용 프로그램의 일부를 확장하고 이동할 수 있습니다.

변경 가능한 데이터주의

구성 요소 상태는 구성 요소 this.setState내에서 호출을 통해서만 업데이트되어야하므로 변경 가능한 데이터에주의하는 것이 좋습니다. 이는 여러 함수 (또는 구성 요소!)가 동일한 틱에서 변경 가능한 객체를 업데이트 할 수있는 경우 두 배로 사실입니다. React는 일괄 상태 변경을 시도 할 수 있으며 업데이트를 잃을 수 있습니다! Eliseu Monar의 주석에서 언급했듯이 변경 가능한 객체를 변경하기 전에 복제하는 것을 고려하십시오. React에는 도움 이 될 수있는 불변성 도우미 가 있습니다.

또 다른 옵션은 변경 가능한 데이터 구조를 상태에 직접 유지하지 않는 것입니다. 위에서 언급 한 Flux 패턴은이 아이디어에 대한 흥미로운 해석입니다.

---

React 사이트에는 Thinking in React 라는 훌륭한 기사가 있는데 , 아이디어 나 모형을 어떻게 가져 와서 React 애플리케이션으로 바꿀 수 있는지에 대해 다루고 있습니다. 구체적인 예로서 제공하신 코드를 살펴 보겠습니다. 본질적으로 관리 할 데이터는 container요소 내에 존재하는 콘텐츠 목록입니다 . UI의 모든 변경 사항은 해당 데이터의 추가, 제거 및 변경으로 나타낼 수 있습니다.

위의 원칙을 적용하면 최종 애플리케이션이 다음과 같이 보일 수 있습니다.

/** @jsx React.DOM */

var Application = React.createClass({
  getInitialState: function() {
    return {
      content: []
    };
  },

  render: function() {
    return (
      <div className="container">
        <span className="header">jQuery to React.js Header</span>
        <button className="add_button"
                onClick={this.addContent}>Add Element</button>
        <button className="add_button"
                onClick={this.timedAddContent}>Add Element in 3 Seconds</button>
        {this.state.content.map(function(content) {
          return <ContentItem content={content} removeItem={this.removeItem} />;
        }.bind(this))}
      </div>
    );
  },

  addContent: function() {
    var newItem = {className: "added_content", text: "Click to close"},
        content = this.state.content,
        newContent = React.addons.update(content, {$push: [newItem]});
    this.setState({content: newContent});
  },

  timedAddContent: function() {
    setTimeout(function() {
      var newItem = {className: "timed_added_content", text: "Click to close"},
          content = this.state.content,
          newContent = React.addons.update(content, {$push: [newItem]});
      this.setState({content: newContent});
    }.bind(this), 3000);
  },

  removeItem: function(item) {
    var content = this.state.content,
        index = content.indexOf(item);
    if (index > -1) {
      var newContent = React.addons.update(content, {$splice: [[index, 1]]});
      this.setState({content: newContent});
    }
  }
});

var ContentItem = React.createClass({
  propTypes: {
    content: React.PropTypes.object.isRequired,
    removeItem: React.PropTypes.func.isRequired
  },

  render: function() {
    return <span className={this.props.content.className}
                 onClick={this.onRemove}>{this.props.content.text}</span>;
  },

  onRemove: function() {
    this.props.removeItem(this.props.content);
  }
});

React.renderComponent(<Application />, document.body);

이 JSFiddle 에서 작동중인 코드를 볼 수 있습니다 . http://jsfiddle.net/BinaryMuse/D59yP/

The application is made of two components: a top-level component called Application, which manages (in its state) an array called content, and a component called ContentItem, which represents the UI and behavior of a single item from that array. Application's render method returns a ContentItem element for each item in the content array.

One thing to notice is that all of the logic for managing the values inside the content array are handled in the Application component; the ContentItem components are passed a reference to Application's removeItem method, which the ContentItem delegates to when clicked. This keeps all the logic for manipulating state inside the top-level component.

참고URL : https://stackoverflow.com/questions/23585765/how-to-go-from-jquery-to-react-js