Nautil 中使用双向数据绑定的实现

2023-08-13 01:44:03 61

虽然是基于react的框架，但是在nautil中可以使用双向数据绑定，这得益于基于观察者模式的开发思路。在react中使用双向绑定并非没有需求，react严格的单向数据流，严重影响了开发者的发挥空间，特别是在表单组件的使用中，很容易陷入回调地狱，即使redux也无法避免。

现有状态管理的问题

我们都知道，react是单向数据流的，数据只能从外部通过props传入，再通过props上面传入的回调函数再传出去，直接修改props或者上面的对象，不会带来界面的更新，而且会导致数据不可预期。

基于这种单向数据流的flux思想，redux还遵循了函数式编程的规范，保证了数据的干净。同时，它提供了自顶向下的分发机制，修改reduxstore中的数据，会触发所有connected的组件。而触发过程是，调用connected组件props.dispatch方法。

虽然单向数据流的方式保证了数据流干净，但redux的编程方式太复杂了。它不仅增加了数据构造本身的逻辑代码，而且action代码也是分散的，当你需要进行修改时，有的时候会在好几个文件之间转晕。虽然有很多优化redux样板代码的库，但受限于它的编程思想，仍然不好在项目中节省更多时间。

新的思维方式

出于节省更多时间成本的目的，我在开发nautil中没有使用flux那一套，而是另辟蹊径，做了很像mobx但又更简单的事。

我们来看一下如何在nautil中创建一个store：

import{Store}from'nautil'
conststore=newStore({
some:123,
})

这样我们就创建了一个store，非常简单，只传入了默认值。而没有各种reducer的样板代码。

Store实例是一个可观察的对象，通过watch方法，可以监听store中数据的变化。但凡能监听到数据变化，我们就可以在数据变化时，更新界面渲染。所以，在nautil中，观察者模式是核心思想，是实现nautil中各种响应式效果的前提条件。

如果你用过vue的话，你一定喜欢vue中操作数据的方式。在vue中要将输出框组件和数据绑定非常容易：

当用户在输入框中输入内容时，this.name也会随之变化。而由于vue的响应式是自主绑定的，this.name发生变化的同时，也会触发vue内部对整个组件的重新渲染机制。这种将数据映射到视图，再由视图重新映射会数据的编程方式，在angular1.x中随处可见。

在angular中，通过ng-click等事件绑定，或者控制器中调用$http实现数据请求，在响应结束的时候，都会自动触发angular内部的digest，并通过脏检查机制，从顶至底的去完成界面重新渲染，由于脏检查的特质，根本不需要react那种要求数据是immutable的，即使原始数据被修改，新的界面也会被按照新的数据进行渲染。

我并不是说angular这种直接修改数据的方式更好，但起码，在面对开发者时，它更直接，更容易理解，更符合编程习惯。

双向绑定

从某些角度讲，vue是很容易让人费解的。在vue的组件里，需要在组件内内置很多状态来控制，这里的状态指通过data()绑定到this上的各种响应式属性。在组件内部，修改this.name可以触发组件的重新渲染。但是，奇怪的是，vue不能通过这种方式修改props中传入的数据。

这一点很让人费解，对比react，react虽然支持组件内state，但是比较强调组件的可控性，通过props来完全掌控UI界面的展示，也就是一个状态对应一个UI界面。因此，react提供了函数式组件，这种组件没有自己的state，这种组件最符合react主流思想的口味，而且，整个react编程也一以贯之，遵循这种props控制一切的理念。

但是，vue明显更强调this上面属性的响应式特性。却又不提供props反写的能力，让人百思不解。另一个让人百思不解的是，既然vue推崇它的属性响应式特点，为何vuex却要像redux那样编程？甚至还要分state,mutaion,action三种东西，却不继续发挥属性更新形式的响应式编程特点。

Nautil在这条路上一走到底，将响应式编程发挥到极致。

简单的讲，“双向绑定”是要做到组件内和组件外数据的双向修改，外部修改数据时，组件内部即时响应变化，组件内部修改数据时，外部整个应用的对应部分也随即发生更新。这一点在angular1.x中已经实现了，为何新的框架反而不实现呢？

因此，我要在nautil实现的双向绑定方案，更加彻底，更符合开发者想要的方式。

但是，如何在react里面实现双向绑定呢？

vue的v-model给了我启示。我们去看v-model指令，实质上，它是一个将v-bind和v-on动作简化的语法糖。

一个双向绑定的语法，实际上是一个数据绑定和一个事件响应的结合体。不过vue有一个优势，它是基于模板解析的，所以写法上非常有优势。而react如果要依靠编译的话，非常不稳定，因为不知道其他人打算怎么用。最后，我找到一种特别的语法，用来表达双向绑定这种数据传递方式。

我们先来看下一个实现的效果：

import{Component,Store}from'nautil'
import{createTwoWayBinding}from'nautil/utils'
import{initialize,pipe,observe}from'nautil/operators'
import{Section,Text,Input}from'nautil/components'

exportclassOneComponetextendsComponent{
staticprops={
store:Store,
}
render(){
const{store}=this.attrs
const{state}=store
const$state=createTwoWayBinding(state)//创建一个可用于双向绑定的宿主对象
return(

name:{state.name}


)
}
}

exportdefaultpipe([
initialize('store',Store,{name:'tomy'}),
observe('store'),
])(OneComponent)

上面的代码利用了比较多的东西，例如nautil中的Store和指令。但单纯双向绑定这个点，你只需要注意Input组件的$value属性。在nauti中，$开头的属性表示双向绑定属性，它的值必须是一个特定结构，而非普通值。

从原理上将，nautil中的双向绑定基于一个特定结构。在这个特定结构中，包含了值本身，和一个值改变时的回调函数，当组件内部的该值发生变化时，这个回调函数会被执行，更新界面的动作，在回调函数中被执行。而这个特定结构，被createTwoWayBinding抹平了结构在视觉上的差异。它的原始结构实际上是：

$value={[state.value,value=>state.value=value]}

之所以state.value=value可以更新界面的渲染，是因为我们通过observe指令观察了store的变化，从而在外层就让界面可以根据store的变化而更新。

利用双向绑定

对于组件本身而言，如何利用双向绑定完成一些事情呢？我们来看Input组件的源码:

exportclassInputextendsComponent{
render(){
const{type,placeholder,value,...rest}=this.attrs

constonChange=(e)=>{
constvalue=e.target.value
this.attrs.value=value//主要是这一句
this.onChange$.next(e)
}

returnthis.onFocus$.next(e)}
onBlur={e=>this.onBlur$.next(e)}
onSelect={e=>this.onSelect$.next(e)}

className={this.className}
style={this.style}
/>
}
}

对于Input组件而言，中间比普通react组件多了一句this.attrs.value=value，这句话利用了双向绑定特殊结构的第二个值，进行值的回传和反写。也就是说，在nautil中，双向绑定具有兼容性，你可以这样写：

state.value=e.target.value}/>

也可以这样写（标准写法）：

state.value=value]}

当然，如果你知道nautil里面的内置规则，甚至还可以这样写：

或者也可以利用前面提到的createTwoWayBinding函数（推荐用法）：

const$state=createTwoWayBinding(state)

这样写可能更容易理解一些。

Input,Textarea等表单组件都有双向绑定功能。但是，假如现在你自己想写一个组件，使用双向绑定功能，你需要怎么写？其实很简单，只需要直接操作this.attrs上的属性即可：

import{Component}from'nautil'
import{Button}from'nautil/components'

exportclassSomeextendsComponent{
staticprops={
$age:Number,
}
render(){
return(
this.attrs.age++}>grow
)
}
}

这样的写法比较严格，要求外部传入的时候，必须传入$age这个属性，而不允许传入age属性。为了兼容，你可以学习Input组件的做法，在onHint的回调函数中，增加一个回调函数的调用。

需要注意，this.attrs.age++这个语句，不会真的修改this.attrs.age的值，这个修改动作会被拦截，它只是在编程上顺延了js语法，但实际上，它的效果是调用双向绑定特定结构的第二个参数，至于this.attrs.age的值是否真的变化，取决于双向绑定特定结构第二个参数是否修改外部传入的age值发生变化。

组件内直接使用this.attrs.age++修改外部传来的属性，目标是反写外部数据
外部组件在往子组件传递双向绑定属性时，需要传入一个特定结构

createTwoWayBinding

该函数用于基于传入的对象，创建一个用于双向绑定的对象。它的传入参数是任意的，但是我推荐使用store或model的state，这样就不用自己构造第二个参数。

但是，如果你想让一个普通对象也可以实现响应式，你可以利用第二个参数：

const{state}=this//react的state本质上是一个普通对象
const$state=createTwoWayBinding(state,([state,keyPath,value],[target,key])=>{
this.setState({[key]:value})
})

目的上，createTwoWayBinding最终是为双向绑定服务的，所以不应该用它所创建的对象去读取值。

小结

本文主要介绍了为什么要在Nautil中实现双向绑定，怎么实现，以及如何使用的问题。虽然本文主要是介绍Nautil中的双向数据绑定，但是也讨论了react,vue,angular的一些数据状态管理的东西，如果你对这些问题也有自己的想法，不妨在下方给我留言一起讨论。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

Nautil 中使用双向数据绑定的实现

热门推荐

随机推荐