gitee.com
kaka重名了76357
获得徽章 11
- React前端状态管理心得
1. 没有银弹，redux也好，mobx也好，react-easy-state也好，能力加强的同时，学习成本，浏览器兼容成本也加大
2. 绝大大数页面的状态理清后，其实也想象中不那么复杂，首要的应该是注意以下几点：
（1）尽可能减少所需的状态（哪些才是真正需要的），很多数据了包含多维度的状态，不要制造状态(混乱)，真正重要的是数据，而非状态。深入理解，吃透你的数据。
（2）哪些是计算属性，计算属性（仅get，非set）尤其要提出来，不应该set的一定不要set的，逻辑上可能是同样的状态，但搞好两个状态，并同时去set，会导致真实世界混乱。
3. 组件拆分、属性的传递的逻辑性、正确性和清晰性也是状态管理的一部分，而且其重要性丝毫不亚于纯数据的状态。
（1）正确决定组件的从属关系，并尽量减少不必要的组件。（如同节约dom标签一样）
（2）在上面的前提下，属性的传递可以尽量控制在不要超过2层，这样props的数据流向也一目了解
（3）在jsx里，属性传递的写法应采取始终解构的写法，这样最接近函数参数传递的感觉，如：
<BtnGroup$ {...{ pageTitle, survey }} />
const BtnGroup$ = ({ pageTitle, survey }) => {})
（4）计算属性应尽量由上级组件传给下级，从而使尽可能多的组件成为仅接受props并渲染的纯函数组件。
（5）函数属性传递时有意义的命名至关重要。
4. 勿过度追求完美，尤其是在UI与交互上（最难处理的是动画），要做到完美，需要极其复杂的状态管理，应先有一些效果，在保证不至于把状态搞得一团糟，在完全想清楚了数据的逻辑后，逐步加强。
5. react-global-state-hook的非reducer的用法，细粒度的get、set其实基本够用，尤其对状态变化的跟踪（从代码层面跟踪，选中所有get或set）比redux并不差。
6. 一个应用程序，最最核心的，最最复杂的逻辑，就那么几个，绝不会多，所以对这部分页面代码一定要精益求精，逻辑、结构一定要优雅如水。展开316 - 明天4月4，快把公司网站变成黑白色！
<script>
(function () {
var body = document.body;
body.style['filter'] = 'progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)';
if (!body.style['filter']) {
body.style['-webkit-filter'] = 'grayscale(1)';
body.style['filter'] = 'grayscale(1)';
}
}());
</script>
或者
<style>
body {
/* IE */
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
/* Chrome, Safari */
-webkit-filter: grayscale(1);
/* Firefox */
filter: grayscale(1);
}
</style>展开313 - 原来爬虫也没有我想得那么高深，主要还是发请求，解析dom，获取数据，统计分析。然后我用node写了一个爬虫，也是人生中第一个爬虫。出于学习的目的，爬了一下掘金热门推荐里面的前100篇文章，并统计出了每篇文章的阅读量和所包含的标签数字，再通过这个数字累计出每个标签对应的阅读量，最后使用chartJS制成表格。
然后发现，掘金果然对前端很友好啊。哈哈数据比较片面，也就是前100篇文章，大佬不要打我
展开1114 
element-tiptap 更新至v1.14.0
一款配合 Element UI 的 Vue 的富文本编辑器
有幸被 awesome-vue 和 tiptap 的官方仓库收录，改版了一下 demo 页，还新增了 code sandbox 线上体验哦
过去 5 个版本主要更新内容:
1.新增菜单栏操作按钮：打印、预览、全屏、全选
2.点击链接弹出菜单栏：打开链接、修改链接、取消链接
3.图片可拖拽改变大小
4.编辑器底部新增字数统计
5.重新设计了 menubar 的样式
6.修复若干小问题
Github:
github.com
README 中附带 Demo 页和 code sandbox 链接，欢迎体验
喜欢的同学可以 star 下仓库支持一下我，也欢迎贡献你的想法和代码，提 issue，pr 什么的都行
，有兴趣的可以一起学习讨论一起加油呀～，谢谢啦😆。 展开2752- xgplayer：由字节跳动西瓜视频开源的带解析器、能节省流量的 HTML5 视频播放器。可以作为 H5 组件、Vue、React 组件单独使用。它根据组件化的原则设计了一个独立的、可分离的 UI 组件。更重要的是，它不仅在 UI 层具有灵活性，而且在功能上也很大胆：它摆脱了视频加载、缓冲和格式支持。在播放器端加载视频、解析视频、转换格式，让不支持分段播放的 MP4 动态支持，这样就无须转换源视频的格式，服务器端也无其他开销。
「来自 HelloGitHub 第 37 期 JS 分类」：github.com 展开8141
，全程小干货喔
：
：