代码训练营1--checkbox

￡神魔★判官ぃ 2021-12-03 15:17 327阅读 0赞

总结问题：

1. componentWillReceiveProps（）\{\}

![1393741-20190715163300042-1634123973.png][]

2. 逻辑混乱

3.参数设计冗余，导致代码维护成本变高，

1) value/defaultValue 根本就是一个，不需要设置两个

2）基础组件不需要过于复杂的设计，（复选框组的接口option中，过度设计，考虑了options为字符串数组的情况，导致维护成本变高，若想增加字符串数组，可进行二次封装）

![1393741-20190715163514473-621237684.png][]

3）此处默认值并不能排除undefined情况

![1393741-20190715163722138-277717720.png][]

代码训练营中提出的问题：（本周三7.17以前全部解决）

1.  react组件什么时候render
2.  什么是生命周期函数？有什么用？
3.  组件什么时候会被销毁
4.  受控组件、非受控组件
5.  不可变数据
6.  React components 与React elements关系 
7.  JSX —> react.createElement 语法糖 
8.  Renderprops ，和函数组件有什么区别？
9.  Setstate之后发生了什么 官方文档->FAQ->组件状态

不可变数据（state、props，用新的覆盖旧的）\+单项数据流（数据向下，事件向上）

Render方法里不要写逻辑

初始化、setstate、组件自身update、挂载应用

checkbox-group

包括group-item（由checkbox进行了二次封装而来）和 checkAll（同样是由checkbox进行的二次封装）

checkbox-group接口设计

![1393741-20190715165928996-1255719988.png][]

**checkbox-group 如何实现**

点击checkbox，group 将该checkbox的value、 checked 以props传入 group-item， group根据props的checked对已选中的 checkList 进行添加或删除，将checkList通过onChange回调返回给父组件

**checkAll 如何实现**

点击checkAll，group根据checkall的状态（checked、unchecked）返回全部value或 空数组\[\]，

另外，当group-item被选中（或取消选中）时。在group中 根据value的长度和option的长度计算checkAll 的状态（全选／未选／半选），

![loading.gif][]

转载于:https://www.cnblogs.com/LXIN-Y/p/11191451.html

[1393741-20190715163300042-1634123973.png]: /images/20211203/70f7cf1bc1cf4e9ca29e03241ccf2274.png
[1393741-20190715163514473-621237684.png]: /images/20211203/fa1d626ed6bb4139accf72ababa3ccd8.png
[1393741-20190715163722138-277717720.png]: /images/20211203/0ffd97c35ea541cab5151fff4a11c154.png
[1393741-20190715165928996-1255719988.png]: /images/20211203/e7c9c0653e694a9c837e470fbd2e4471.png
[loading.gif]: /images/20211203/44b4d35c28a54fa1946edddeb65ce491.png