datagridview 绑定list 不能刷新界面_UFlux篇（2）：Props，Component和值绑定

本系列基于：BDFramework 、Unity3D 2018.4.0

BDFramework：Simple! Easy! Beautiful! This is a powerful Unity3d game workflow!

框架地址：

GayHub: yimengfan/BDFramework.Core，

码云 ： yimengfan/BDFramework.Core，欢迎赏星。

第九艺术 、第十艺术讨论群 : 763141410

先回顾下我们框架的目标：
1.我们要减少拼图仔的工作量，减少他操作各种ui加载，赋值，等琐碎的工作。把精力花在业务逻辑上
2.我们要帮助拼图仔快速debug
3.我们要在框架层进行设计约束，帮拼图仔合理的组织管理逻辑…
4.减少每次ui迭代的修改成本，只需要变动少量配置或者渲染层即可…

本章节内容：

1. State和Props

2.自动赋值

3.组件值绑定（更新数据，组件数据自动更新）

0x001： State和Props

State：逻辑状态，我们说的状态管理是管得State.[现在这里不懂没关系]

Props：渲染状态，组件根据Props进行渲染。[这个必须懂]

我们先来看一个Props：

喏，这就是一个props 和对应Tansform的结构 ~

我们看下props是怎么进行定义的，这里我们优先看下流程，不讨论细节实现，

细节再下一篇中再讲

1.【TransformPath】 节点信息，描述这个字段是哪个Transform
2.【ComponentValueBind】组件值绑定，Type：该节点上哪个组件，FieldName：给组件哪个属性赋值

好了，我们先缓一缓，我们要继续讲跟Props相关的Component。毕竟 Props只是渲染状态，Component才是需要渲染的..

0x010: Component

先看一个Component的结构

这就是一个最简单的Component:

首先看标签：

1.【Component】 这个标签描述 当前Component的Prefab路径，
当你new一个Component的时候，会根据这个加载具体的Prefab
2.【TransformPath】 节点信息，描述这个字段是哪个节点，如果是继承了UIBehavior的UI组件，还会进行一次自动赋值

再看继承：

1.Component<T> ：所有的Component 必须继承Component
2. Props：当继承Component<T>的时候，必须有一个Props跟该Component进行绑定

这下你应该清楚了吧：

首先Props是每个Component<T>必须的渲染状态，用以做自动赋值用。

其次Props和Component <T>有很多标签，用以做值绑定。

0x011: 自动赋值

emmm，我们还要看一个例子,对刚才的Props进行改写

首先我们看看后面实现的效果

这是个很简单的例子，只是为了演示怎么进行值绑定 和刷新。

看看代码:

很简单，我们是开了个协程，每隔2s进行一次赋值操作，所以我们才能看到蜡笔小新说骚话。

这里重点关注一点，我们怎么进行值刷新的。

我们只是对this.Props 改变了属性，

然后this.SetProps()，提交属性，整个渲染界面就刷新了。

是不是很酷~

我们再回顾下，我们的Props怎么定义的，这样你是不是理解了~

0x100：再探值绑定

有人说，刚才的例子过于简单了。那我们来个复杂的！

老规矩，先看效果：

这个时候，又会有老哥说：这个我也能弄啊，一把梭多快。

这个时候我们再回想下本节的内容：值绑定，自动赋值，数据流

我们一切的组件，都是通过SetProps的方式进行更新渲染的 。

不多说，我们看下实现：

这里的实现稍微复杂了点，我们是一个组件，嵌套另一个组件。

所以我们有2个组件：1.Item 2.ScrollReact

先看Item：

老样子了吧，小case不用多说了吧，不过这个有2个需要注意

1.是我们Button的Action，也是可以当成数据进行赋值的哦

2.是这个Component基本就是个光杆司令，但是这个Component 构造的时候，会自动加载Prefab。

再看ScrollRect：

这里开始，就稍微复杂了点，有一个嵌套结构：

也就是ScrollRect的 Props中，有list<props_item>,这也描述我们当前有多少个item的数据。

当我们增减item的个数的时候，实际上 就是操作这个List。

再看渲染：

细心的朋友会发现，这个是个AWindows。实际上没得差啦 ，

Awindows 也是个Component，只不过继承AWindows后，我们可以进行其他的操作。

这个不在本节描述。

我们重点看AddItem这个函数：

看，我们其实 增加的时候，是new 一个 Props_Item002,

然后往当前Props的ContentList中添加即可。

看就是我们定义的这个Props类。

然后移除的时候就更简单了：

移除末尾，SetProps之，爽歪歪。

小结一下，我们做了什么：

1.Component和Props 2.标签，使用标签可以绑定组件和值，也用作加载，也可以对组件赋值 3.SetProps（）, 当我们希望修改一个界面值，只需要修改Props，即可。 再也不需要翻箱倒柜寻找各个节点了。 4.数据流，每次我们更新Props 并且提交，可以视为1次数据流更新。 5.然后我们可以统一管理维护Props，甚至于可以状态回溯，有些时候查Bug我们可以先查Props。 6.谨记Props只是渲染的状态，我们后面还要做状态管理，管理的是逻辑状态State.

好奇的朋友，可能已经会发现了，我们做值绑定用了大量的 ComponentValueBind

[ComponentValueBind(typeof(Text), nameof(Text.text))]//数据赋值对象
[ComponentValueBind(typeof(Image), nameof(Image.overrideSprite))]//数据赋值对象
[ComponentValueBind(typeof(Button), nameof(Button.onClick))]//数据赋值对象
[ComponentValueBind(typeof(DemoScrollRect), nameof(DemoScrollRect.Contents))]//数据赋值对象

此时，好奇的同学会问：

这个怎么实现的？

到底我们能用多少个组件？

每个属性都能自动绑定么？

我的自定义组件怎么办？

我们现在有的组件，需要大量更改么？

给你们提前透露下，其实ComponentValueBind就是个体力活，也不需要你动已经有的组件

这就要轮到，下一篇了说了，你们给的star越多，我更新的越快..

下回书：性感程序在线改代码，UGUI为之动容 自动值绑定.

UGUI组件，数据驱动化修改~