ImmutableJS用於React組件的狀態

Question

因此，我決定使用ImmutableJS與Redux一起使用。 現在我想知道使用它來管理React Component state是否方便。 我編寫了以下代碼：

class Navigation extends React.Component {
  constructor(props) {
    super(props);
    const $$fixedLinks = Immutable.fromJS(this.props.fixedLinks);
    const $$dynamicLinks = Immutable.fromJS(this.props.dynamicLinks);

    this.state = {
      fixedLinks: this.addHrefs($$fixedLinks),
      dynamicLinks: this.addHrefs($$dynamicLinks),
    };
  }

  // Given a list of shape (id, name) we need to
  // add href for the links
  addHrefs = list => list.map(item => item.set('href', toUnderscore(item.get('name'))))

  render() {
    const fixed = this.state.fixedLinks.map(
      link => (
        <Link key={link.get('id')} href={`#${link.get('href')}`} title={link.get('name')} />
      ),
    );
    const dynamic = this.state.dynamicLinks.map(
      link => (
        <Link key={link.get('id')} href={`#${link.get('href')}`} title={link.get('name')} />
      ),
    );
    return (
      <Anchor>
        {fixed}
        {dynamic}
      </Anchor>
    );
  }
}

如您所見， $$表示不可變的對象。 但是然后我想使用addHrefs向其添加一個新屬性並將其保存為state 。

它像魅力一樣運作。 但是以下內容有點笨拙：

<Link key={link.get('id')} href={`#${link.get('href')}`} title={link.get('name')} />

看到？ 使用get()從不可變對象獲取值。

現在，一些問題：

1. 使用ImmutableJS在React.Component管理狀態是一個好主意（或方法）嗎？
2. 如果可以為此目的使用ImmutableJS ，則this.state應該是不可變的對象嗎？ 如果是這樣，如何處理this.setState() ？
3. 如果不是這樣，我就不能使用loadash因為它不能與ImmutableJS ，如何處理React.Component不可變狀態？

Answer 1

1. 使用ImmutableJS在React.Component管理狀態是一個好主意（或方法）嗎？

我不明白為什么這是一個壞主意。 甚至在React docs中也提到過。

2. 如果可以為此目的使用ImmutableJS ，則this.state應該是不可變的對象嗎？ 如果是這樣，如何處理this.setState() ？

這真的取決於你。 使組件狀態不變是有好處的（例如能夠使用PureComponent並獲得優化的性能）。

我不確定“通過this.setState()交易”是什么意思。 您將繼續像往常一樣使用它：獲取狀態，更新狀態（從而獲得一個新對象），並使用新對象調用setState 。

3. 如果不是這樣，我就不能使用loadash因為它不能與ImmutableJS ，如何處理React.Component不可變狀態？

您可以調用const myState = this.state.toJS()並使用lodash。 只是不要嘗試更改組件的狀態，而要更改myState某些內容，因為這將無法工作。

如果我理解正確，我希望這能回答您的問題：）