用于 React 组件状态的不可变 JS

Question

所以我决定使用 ImmutableJS 来处理 Redux。现在我想知道用它来管理 React 组件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 中也提到过。

1. 如果我可以为此目的使用ImmutableJS，那么this.state 应该是一个不可变对象吗？如果是，如何处理this.setState()？

这完全取决于您。让组件状态不可变有很多好处（比如能够使用PureComponent 并获得优化的性能）。

我不确定您所说的“处理this.setState()”是什么意思。你继续像往常一样使用它：获取你的状态，更新它（从而获得一个新对象），用新对象调用setState。

1. 如果不是这样，我不能使用loadash，因为它不适用于ImmutableJS，我该如何处理React.Component 中的不可变状态？

您可以致电const myState = this.state.toJS() 并使用 lodash。只是不要尝试更改组件的状态来更改 myState 中的某些内容，因为那是行不通的。

如果我理解正确的话，我希望这能回答你的问题:)