Question

在某些情况下，反应项目需要immutableJS以加快其性能。但它会搞砸组件代码的反应，如下面的代码所示。我们必须使用不可变的实例方法（ get，getIn，set，setIn ），而不是原生的 dot 运算符，这将使代码膨胀并失去了benfefit的功能。来自 IDE 或 Typescript 的智能感知和静态检查。

我知道有一个替代的lib seamless-immutable 可以挽救我的生命。

但是在我们编写本机javascript普通对象的方式中，在 react组件中使用 immutableJS 还有其他方法吗？

＆＃13;

/*Redux part is ommitted and assumed to be all converted to immutable  structure */

class Exam extends Component {
  constructor() {
    super(...arguments);
  }

  componentDidMount() {
    this.props.fetchHomeWorkList(); // ajax fetch data
  }

  render() {
    return this.props.loading || !this.props.homeWorkList ? (
      <Load />
    ) : (
      this.props.homeWorkList.map(homework => (
         <li>{homework.get("title")}</li>
          {homework.get("subHomeWorkList").map(homeWorkEntity => (
            <span>{homeWorkEntity.get("subTitle")}</span>
            <span>{homeWorkEntity.get("content")}</span>
          ))}
        
      ))
    );
  }
}

const mapStateToProps = (state, ownProps) => ({
  homeWorkList: state.getIn(["exam", "homeWorkList"]),
  loading: state.getIn(["exam", "loading"])
});

＆＃13;

Answer 1

您可以使用记录，但它需要比地图更多的工作：

使用地图

import { fromJS } from 'immutable';

const user = fromJS({
    firstName: "John",
    lastName: "Snow",
});

使用记录

import { Record } from 'immutable';

const userFactory = Record({
    firstName: "",
    lastName: "",
});

const user = userFactory({
    firstName: "John",
    lastName: "Snow",
});

要使用记录，您应该为商店中每种类型的叶节点定义记录工厂。这是Record()构造函数的用途。

要创建记录，请将JSON对象传递给记录工厂。记录实例类似于Map，但除其他外，它允许您直接访问其字段而无需调用get()

user.get('firstName') === user.firstName

在React组件中使用ImmutableJS

1 个答案:

使用地图

使用记录