小白小白从不日别的博客

通过分析不能发现，我们不用去管里面到底是什么内容，我们只需关注最外层的滚动区域，然后将其抽离成一个滚动组件即可。：实现一个水平滚动视图，左右两侧有箭头按钮，可以根据内容动态调整滚动位置，同时在滚动到两端时隐藏相应的按钮。对于滚动这里我们利用css3的transform的translate来实现在x轴上进行滚动。这种效果就是只有但左或者右有足够的数据/元素时，就会出现箭头，点击点头后会进行切换。这里的样式我们用的是 styled-components 样式库。那么有了上面的基础后，下面我们就来着手实现了。

每次看 Github 仓库的时候，总感觉有些不顺眼。原来是提交附带的信息乱糟糟的，都是"新增xx功能"，"修复xxBUG"，非常的不工整，看着太不舒服啦🤯。不要慌，我们可以使用 CommitLint 对提交的信息进行规范。在 package.json 里增加以下配置},在项目根目录下新建以下配置文件types: [{ value: "feat", name: "✨ feat: 一个新的特性" },{ value: "fix", name: "🐛 fix: 修复一个Bug" },

一种具备响应式的useState通过 setCount 来进行设置，count 来获取，使用这种方式才能够渲染视图来看看正常的操作，像这样count = 7;此时count的值就是7，也就是说数据是响应式的。那么我们可不可以将 useState 也写成响应式的呢？我们可以自由设置count的值，并且可以随时获取到count的最新值，而不是通过setCount来设置那么，我们来想想怎么去实现一个具备响应式特点的useState也就是useRactive这个钩子的出入参如何设定。

网页开发时，常常需要了解某个元素是否进入了"视口"（viewport），即用户能不能看到它。上图的绿色方块不断滚动，顶部会提示它的可见性。传统的实现方法是，监听到scroll事件后，调用目标元素（绿色方块）的方法，得到它对应于视口左上角的坐标，再判断是否在视口之内。这种方法的缺点是，由于scroll事件密集发生，计算量很大,容易造成。目前有一个新的，可以自动"观察"元素是否可见，Chrome 51+ 已经支持。