.toJS()를 Unmutable.js 및 Flux와 함께 사용하는 경우

.toJS()를 Unmutable.js 및 Flux와 함께 사용하는 경우

불변 사용하려고 합니다.리액트 / 플럭스 어플리케이션의 JS.

가게는 ★★★★★★★★★★★★★★★★★★★.Immutable.Map★★★★★★★★★★★★★★★★★★.

하고 있습니다..toJS()가 ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★..get(id)에 환이 포함되어 ? 또는 다음 컴포넌트에 있습니다..get('member')

이상적으로는 절대 안 돼!

Flux 스토어에서 Unmutable.js를 사용하고 있는 경우는, 끝까지 유지하도록 해 주세요.React.addons를 사용합니다.리액트 컴포넌트WithPureRenderMixin을 통해 메모화 퍼포먼스가 향상됩니다(wooseComponentUpdate 메서드가 추가됩니다).

때는, 「어느 쪽인가」라고 하는 호출이 한 경우가 .toJS()는 React v0.12.x만을 때문에Array★★★★★★★★★★★★★★★★★★:

render: function () {
  return (
    <div>
      {this.props.myImmutable.map(function (item) {
        <div>{item.title}</div>
      }).toJS()}
    </div>
  );
}

는 React 되었습니다. 는 v0 React v0.13이 모든 .X자형 구성 요소에서는 모든 반복 가능 항목(Itherable)을 하위 항목으로만 받아들이는 것이 아니라Array는 Itable을 구현하기 에 Imputable.js는 할 수 .toJS():

render: function () {
  return (
    <div>
      {this.props.myImmutable.map(function (item) {
        <div>{item.title}</div>
      })}
    </div>
  );
}

오래된 질문이지만 최근에는 리셀렉트 및 로다쉬 메모 기능을 사용하여 비슷한 오브젝트를 React's Components로 되돌리기 위해 이 접근 방식을 실험하고 있습니다.

다음과 같은 매장이 있다고 상상해 보십시오.

import { List, Map } from 'immutable';
import { createSelector } from 'reselect';
import _ from 'lodash'; 

const store = {
    todos: List.of(
        Map({ id: 1, text: 'wake up', completed: false }), 
        Map({ id: 2, text: 'breakfast', completed: false })
    )
};

const todosSelector = state => state.todos;

function normalizeTodo(todo) {
    // ... do someting with todo
    return todo.toJS();
}

const memoizeTodo = _.memoize(normalizeTodo);

export const getTodos = createSelector(
    todosSelector,
    todos => todos.map(memoizeTodo)
);

나서 나는 리고로로 로로 then 로 then then 。TodoList컴포넌트 요 componenttodos두의 소품, 즉 두 개의 , 즉 두 개의 소품, 두 의 소품, 두 의 소품.TodoItem★★★★★★★★★★★★★★★★★★:

class TodoList extends React.Component {
    shouldComponentUpdate(nextProps) {
         return this.props.todos !== nextProps.todos;
    }

    render() {
       return (<div>
           {this.props.todos.map(todo => <TodoItem key={todo.id} todo={todo} />)}
       </div>);
    }
}

class TodoItem extends React.Component {
    shouldComponentUpdate(nextProps) {
        return this.props.todo !== nextProps.todo;
    }

    // ...
}

이렇게 해서 토도 스토어에서 아무것도 바뀌지 않았다면getTodos()오브젝트를 되지 않습니다

ID가 "인 경우 ID가 "to"인 경우2완료로 됩니다.todosSelector는 토도하다, 토도하다, 토도하다로 memoizeTodo이 함수는 todo가 변경되지 않은 경우(불변의 맵이므로) 동일한 객체를 반환해야 합니다. ★★★★★★★★★★★★★★★★★★.TodoList소품을 , 소품을 받고, 새로운 소품을 받고, 새로운 소품을 받고, 새로운 소품을 합니다.todos 두 요.TodoItemID가 1인 ToDo를 나타내는 객체가 변경되지 않았기 때문에 재실행되었습니다.

특히 저희 매장에 물건이 많으면 성능 저하로 이어질 수 있습니다만, 미디엄 사이즈의 앱에서는 전혀 문제가 없었습니다. Javascript와 할 수 입니다.PureRenderMixin따라서 스토어에서 오브젝트를 어떻게 반환하는지는 컴포넌트의 업무가 아닙니다.

@이 말했듯이 @LeeByron을 할 필요는 toJS 0에서 를 합니다. 0.14 반응.* ★★★★★map불변으로Map는 올바르게 동작하고 렌더링되지만, 다음과 같은 경고가 표시됩니다.

지도를 자녀로 사용하는 것은 아직 완전히 지원되지 않습니다.이는 제거될 수 있는 실험적인 기능입니다.대신 키를 가진 ReactElements의 시퀀스/반복 가능한 것으로 변환하십시오.

이 문제를 해결하려면toArray()에Map예를 들어 다음과 같습니다.

render () {
  return (
    <div>
      {this.props.immutableMap.toArray().map(item => {
        <div>{item.title}</div>
      })}
    </div>
  )
}

반복 가능한 어레이로 변환하여 React에 필요한 기능을 제공합니다.

@Hummlas가 제기한 좋은 점.

컬렉션에서 반복하여 하위 구성요소 배열을 렌더링할 때 개인적으로 React 구성요소에서 사용합니다.

this.props.myImmutableCollection.map(function(item, index) {
    React.DOM.div null, item.get('title');
}).toJS();

.toJs()를 사용하지 않으면 React는 매핑된 요소를 컴포넌트 배열로 인식하지 않습니다.

--더 이상 권장하지 않습니다 --
Redx를 사용할 때는 connects의 mapStateToProps 함수가 toJS()를 사용하여 불변의 구조를 변환하고 리액트 컴포넌트가 javascript 객체로 소품을 소비하도록 하는 경향이 있습니다.

언급URL : https://stackoverflow.com/questions/27864706/when-to-use-tojs-with-immutable-js-and-flux