React-Kotlin包装器setState方法

时间:2017-05-03 20:26:13

标签: kotlin

在这里的反应文件:

https://facebook.github.io/react/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous

它表示以下代码使用起来不安全,因为状态是异步更新的:

this.setState({
  counter: this.state.counter + this.props.increment,
});

而是传递以前的状态和这样的道具:

this.setState(function(prevState, props) {
  return {
    counter: prevState.counter + props.increment
  };
});

然而,React-Kotlin包装器位于此处:

https://github.com/Kotlin/kotlin-fullstack-sample/tree/master/frontend/src/org/jetbrains/react

状态更改是否作为状态的扩展函数传入,它修改状态对象上的变量:

//Located in the ReactComponent class in ReactComponent.kt
fun setState(builder: S.() -> Unit) {
    ...
}

如果我在Kotlin中调用setState这样的函数:

setState {
    counter: state.counter + props.increment
}

这不等同于上面的不安全方法吗?难道不需要像React-Kotlin包装器那样实现吗?

fun setState(builder: S.(prevState: S, props: P) -> Unit) {
    ...
}

然后这样打电话?

setState { prevState, props ->
    counter: prevState.counter + props.increment
}

2 个答案:

答案 0 :(得分:0)

如果要获取setState的结果,则必须调用setState(newState,callback)。

可能这个React绑定不仅仅是一个响应包装器。我认为反应是对真实反应的立场。

答案 1 :(得分:0)

如果您查看create-react-kotlin-app源代码,则会在setState调用之前找到此注释: “实际上,该操作是在状态的副本上执行的,因此它实际上保持不变”。

https://github.com/JetBrains/create-react-kotlin-app/blob/master/packages/react-scripts/template/src/ticker/Ticker.kt

就是这样,kotlin复制状态并将副本作为接收者传递给setState方法。因此,您应该写“ counter = counter + props.increment”代替“ counter:state.counter + props.increment”。