止于至善

欢迎大家来到 Rattenking 的《Taro React 入门到实战系列》，开始前博主先列出 Taro React 入门到实战的大纲，同时包括遇到的一些常见报错。实战篇是实际开发中的组件的封装，部分比较有意思的效果，以及一些特殊实际问题的解决办法！入门篇介绍了从安装，开发中的配置问题，记录解决对应的问题。错误篇是在实际开发中遇到的一些错误的处理方法！问题篇是开发中遇到的一些问题的解决方法！...

其实之前实现过一个Taro React组件使用（11） —— RuiNoticebar 公告栏，这个是根据NUTUI实现的，但是最近不是写了一篇【CSS】---- 纯 CSS 实现无限滚动轮播，实现是简单了，但是如果能够将复制元素进行封装在组件内部，而不是直接展示在页面，就能更加完美，所以以【CSS】---- 纯 CSS 实现无限滚动轮播为基础，对 RuiNoticebar 公告栏进行封装组件。将滚动动画的元素和复制的元素放到一个盒子里；给盒子设置动画；

通过第三步和第四步的结果，可以看出 Swiper 组件的【衔接滑动模式】会导致复制的子组件在H5的时候，会导致子组件的事件失效。通过事件冒泡，在父元素事件统一管理子元素的点击事件；通过 id 来获取点击元素在列表中的索引；通过索引找到列表中对应的元素对象；最后执行原来的点击事件的跳转方法。

由于开发中数组的每个元素是对象，而不是测试时使用字符串和数字，因此发现在元素是对象时，你解析就会出现重复，因此需要进行结果的去重。

框架编译后我怀疑就生命周期的执行问题，导致出现了页面没有隐藏的问题，但是多人开发，你也不能修改taro的代码，所以只能在他实现的基础上补充；生命周期拦截的解决方案，这个要求页面必须是 class 组件，才能监听到对应的页面，进行设置，如果使用的 hooks 开发页面，那么这里的拦截不会生效，需要你手动添加页面的显示和隐藏设置代码，由于项目已经维护很久，所以工作量会比较大，因此增加了方案三，路由的监听；

Object.entries 方法在大多数浏览器是按照 Object 创建key顺序，但是也存在部分浏览器无序，所以不稳定；在构建验证规则的时候调用了一次方法，后边校验表单的时候调用了一次，然后返回的结果，可能个人不是很喜欢这种操作，所以诞生了在此基础上获取标签的属性。一步一步的完善，从方法一到方法四，基本都在优化完善，最后的使用习惯接近 elementui 的提交校验；功能目前也就只是满足现有需求，还可以添加其他的功能，在开发中遇到了再依次添加。

使用 alwaysEmbed 在安卓没有效果；使用 input 标签和 view 标签切换，存在抖动问题；使用 visibility: hidden 不能对 input 进行聚焦；使用 position: fixed 不能实现【键盘弹起时，是否自动上推页面】；使用 position: absolute 上边的问题都能解决，但是由于光标是使用 css 模拟的，因此高度和颜色不能根据字体颜色改变。

组件的实现其实没有太大的难度，就是最近看源码，看到了 React.Children.map 的实现，因此使用这个效果用一下；需要注意的是隐藏显示不要直接操作DOM的显示隐藏，因为DOM的改变会导致图片的重新加载，会出现闪动的效果，这是回流导致的图片重新加载；在组件内渲染子组件的时候依然需要使用 React.Children.map 来循环子组件。

需要做一个场次预定的小程序，需要H5和微信小程序两端。在开发中有很多时间需要进行计算处理。返回的时间格式多种多样，还有用作倒计时结束的时间戳等，如何进行统一处理，就是一个需要解决的问题。解决问题三的办法，就是由于只需要获取后边的小时和分，所以可以直接写死一个年月日，拼接一个完整的时间字符串，然后获取这个完整时间字符串的时分；解决办法主要是借助了固定年月日拼接一个完整的时间字符串，不会影响最后获取时分字符串。

注意在请求订阅发布中，我把第一次的请求并没有放入订阅中，因此在请求成功或者失败的时候，需要单独调用 resolve，reject。针对上边的问题，我想到的解决办法是单独申明一个 eventNames 的存储空间，记录事件名，不记录回调事件，两个分开存储。const ev = new EventEmitter() 可以和状态管理一样，声明一个全局事件存储空间，其他页面引入就好，这样有个优势就是在其他异步防重复请求，和防重复点击事件时，使用全局的事件存储，不用每个页面都进行申明。

修改后发现并没有那么麻烦，所以不要自己设置心理障碍，遇到需求要有研究的欲望；多研究大佬的框架代码，学习大佬的开发习惯，我发现随着时间越来越开发的没有欲望，在混日子一样；不断的激发自己的兴趣，学习开发更多的东西。

虽然这个方式可以打开腾讯文档，但是这里不保证一直有效，因为此方法参考了微信小程序使用腾讯文档打开文档，里边获取文档地址已经失效；方案一我想到的办法就是后端接口中转一次，通过爬虫将企业微信文档页面我们需要的信息爬取过来返回给前端，前端写界面代码渲染，提交后后端将数据提交给企业微信文档，此方法弊端一个是登录信息，一个是通过了后端开发，还不如自己开发一个简单的问卷文档；优势就是数据都给了创建文档的企业微信那个人，方便查询了。

由于网络安全扫描的高危漏洞，要求用户信息【用户手机号、用户名称、用户的userId】等不能明文传给第三方【大数据埋点】。但是埋点的用户信息，厅店信息，分享人信息等很多，字段不统一，如果单独处理，比较麻烦，而且处理的信息会比较多，因此在拦截器中统一对数据拦截处理。当然这么判断肯定是不准确的，但是可以将是手机号的信息进行判断！

配合 Jenkins 发布，每次代码不需要我们在自己去多文件维护版本号和环境变量，只需要修改 node_num.js 的版本号和版本描述，就可以维护所有配置文件；查找和替换文本中的字段其实可以采用GoGoCode，但是由于本文的操作比较简单，因此自己写了两个比较简单的正则完成该功能；当我们需要维护大量重复的文件或工作时，我们就应该考虑是不是有更加简便快捷的方式，让我们从重复的劳动中脱离出来。学习、思考、总结输出。是一个很重要的过程。

功能越全的库，会越大，因此开发中需要根据实际需求，找一个合适当前需求的库引入；简单的功能，尽量不要再调用后端接口，资源的浪费。

由于使用地方框架，不清楚底层的打包编译逻辑，导致不知道那些语法或者字符串编译后会出现问题；

在密码登陆时，有显示和隐藏密码的功能，实现方式很简单，直接对输入 input 的 type 进行 password 和 text 值进行切换，就可以实现密码的显示和隐藏。】，当然这是2018年官方的回答，目前2023年了，这个问题依然存在。不清楚这个组件的 type 切换如果是销毁为什么在不同系统的机子表现不一样。在 type 值切换过程中，会导致 input 的 value 丢失。导致切换后 value 值就被清空。

定义默认参数的值 defaultProps；使用 Object.assign 合并传入的 opts 和 defaultProps；使用 useMask 的 show 传入构建的 content 结构！

因为【AJ-Captcha行为验证码】前端提供了Android、iOS、Futter、Uni-App、ReactNative、Vue、Angular、Html、Php等多端示例，发现并没有 taro react 的示例，因此决定根据他的 uni-app 示例开发一个 taro react 的示例！为什么要选用【AJ-Captcha行为验证码】呢？因为我们管理后台使用的是 pigx ，它在后端采用的是【AJ-Captcha行为验证码】，因此移动端也采用了【AJ-Captcha行为验证码】！

虽然完善补充的问题还有很多，但是我觉得实现思路解决了我在开发中遇到的痛点；由于 maskHtml 这样是放在 UI 界面的第一层，避免了 IOS 使用 ScrollView 时遮罩层显示补全。

1. 第一次动画结束，将判断第一次动画的变量设置为 false；2. 异步设置计算动画的时间；3. 设置无限循环移动的动画className。

1. 元素存在，判断使用对应环境获取元素信息；2. H5环境使用元素的获取元素信息方法；3. 微信小程序环境调用 boundingClientRect 获取元素信息；4. 返回默认值。

1. 由于使用的是上传 base64 字符串给后端，后端需要再次转换，两次转换，不建议采用此种方式上传；2. 上传图片过大，会导致转换和上传很慢，因此在头像等小图可以采用此方法上传。

请求订阅(设备)消息！

准备使用该 hook 开发一个贪吃蛇游戏，因此具体使用在贪吃蛇游戏中展示使用案例！注意：useTimeout 只会在 delay ms后执行一次就完成，不会再次执行。一个可以处理 setTimeout 计时器函数的 Hook。一个可以处理 setInterval 的 Hook。

用法与 React.useState 完全一样，但是在组件卸载后异步回调内的 setState 不再执行，避免因组件卸载后更新状态而导致的内存泄漏。管理 object 类型 state 的 Hooks，用法与 class 组件的 this.setState 基本一致。如果 effect 有返回一个函数，React 将会在执行清除操作时调用它。目前存在的问题，还没进行测试，只是一种解决思路。获取当前组件是否已经卸载的 Hook。在组件首次渲染时，执行的方法。在组件卸载时，执行的方法。

可以配置检测组件中未使用组件，进行删除；检测组件中未使用的方法，进行删除冗余的代码；检测整个程序未使用的css，进行删除。

如果该 module 被多个分包内的 page 引用，正常情况下会被提取到主包的公共模块中，这里为了保证主包的体积最优，则会先提取成一个公共模块，然后分别复制到对应分包的 sub-common 文件夹下（因为小程序无法跨分包引入文件，所以这里需要每个分包都复制一份），需要注意的是，这样会导致总包的体积变大一些。但是注意依赖被多个分包使用时，建议单独处理优化，如果依赖像 classNames 一样小，可以直接提取到主包，如果是像 im 的 UI 依赖一样大，建议还是提取到每个使用的分包中。

打包时自动删除console以及debugger。

1. 设置剩余时间；2. 根据剩余的毫秒时间，得出该有天，小时，分钟等的值，返回一个对象；3. 得出格式化后的时间；4. 更新格式化时间字符串，同时将字符串赋值给 timeData；5. 通过 onChange 将时间和格式化后的字符串返回给父组件；6. 如果时间已到，停止倒计时。

由于 Taro.uploadFile 只能每次对一个选择图片进行上传，所以对选择的第一个图片进行上传；使用 Taro.chooseImage 选择要上传的图片。注意由于api原因，因此实现单图上传。

暴露抽奖开始和结束方法，需要注意；动画执行阶段的判断和更新，防止重复点击和提前结束；执行结束函数时判断动画所处阶段，如果加速阶段，需要进行等待。

每次点击，必须更新 isStart 变量，防止用户二次或者连续点击；在倒计时完成时，更新 isStart 变量，允许用户再次进行短信验证码的发送。

初始化时，需要将传入的 value 赋值给当前组件的 value, 不能直接修改 props 的 value;在组件内输出组件内的变量时，最好先判断输出函数是否定义，再输出，否则很容易引起报错。

无法对已卸载的组件执行react状态更新。

注意，使用的input隐藏，view模拟输入框；注意，输入框模拟时需要知道是否已聚焦，所以需要使用css动画模拟聚焦样式；注意 className 使用 classNames 插件来判断样式的使用和不使用。

在 Taro 文件中引入组件，将组件放入src下的components文件夹中。提供一个简单的 Overlay 遮罩层，在页面上的层级为 1026;

【代码】Taro React组件开发（3） —— RuiRate 评论评分。

在react中是关键字，不能使用，只能用替代；添加允许子节点修改或复制；contenteditable 获得焦点后的边框设置 {outline: 0px solid transparent;}；此处只是实现了一个简单的富文本编辑器，其他功能可以根据此基础添加，比如字号，颜色，背景色等。

在react中【contenteditable】 替换为 【】！！！添加允许子节点修改或复制！！！获得焦点后的边框设置 {outline: 0px solid transparent;}！！！