反应性js中的双向数据流
反应性js中的双向数据流
提问于 2019-11-18 22:07:29
我在许多教程中看到，react有单向的dataflow.Is，是否有可能在reactjs中实现双向数据流？
回答 1
Stack Overflow用户
发布于 2019-11-18 23:53:28
让我们以类组件为例。内置的react输入组件的API如下所示：
class Demo extends React.Component {
state = { value: "foobar" }
render() {
return (
<input
value={this.state.value}
onChange={event => this.setState({ value: event.target.value })}
/>
)
}
}我们可以在此基础上构建具有API行为类似于双向组件的自定义组件：
<Input model={state} propName="value" />下面是操作步骤：
function Input(props) {
const { model, propName } = props
return <input
value={model[propName]}
onChange={event => model[propName] = event.target.value}
/>
}坏消息是，单靠这个组件做不到神奇的事情，我们需要消费者的一点努力。
让我们来做一个类属性装饰师来施展魔法咒语。
function bidirectional(target, key) {
Object.defineProperty(target, key, {
get() {
return this.state['__' + key]
},
set(val: any) {
const privateKey = '__' + key
if (!this.state) this.state = {}
if (this.state.hasOwnProperty(privateKey)) {
this.setState({ [privateKey]: val })
} else {
this.state[privateKey] = val
}
return true
}
})
}现在你可以：
class Demo extends React.Component {
@bidirectional
value = "foobar"
render() {
return (
<Input model={this} propName="value" />
)
}
}直接设置this.value = "whatever"也有效，就像大多数双向绑定视图模型一样。
就我个人而言，我站在单向的一边。不是说双向是错误的，但是仅仅是以单向的方式思考大多数时候都是有回报的，就像人们说的那样，可以帮助你清楚地对应用程序进行推理。 如果我觉得合适的话，我会时不时地切换到双向范式。正如在注释中提到的那样，MobX.js是一个优秀的库，它将双向思想扩展到了更远的范围，并且对react也非常有效。你应该调查一下。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/58927639
复制相关文章
相似问题
腾讯云开发者
