React 16.6 React.memo() 无状态组件的渲染控制

原文地址:

作者:

React.memo()是什么?

React.memo()和PureComponent很相似,都用来帮助管理组件重新渲染的时机。

组件只在它的props发生改变的时候重新渲染。一般情况下,当发生改变时组件树中的所有组件都会渲染。使用PureComponent和React.memo(),可以只渲染其中的一部分组件。

const ToTheMoonCompo......

重新审视Css Shapes

原文地址:

CSS Shape Level 1规范在Chrome和Safari浏览器上获得支持已经有许多年了,本周(2018/9/4那周)Firefox发布的生产版本Firefox 62中添加了对它的支持,并让我们能在Firefox开发者工具中更好的使用它。 在本文中,我将介绍一些CSS Shapes的使用示例。或许,是时候给你的设计中添加一些弯曲形状了?

CSS Shapes是什......

使用css grid实现github贡献图

原文地址:

图表分为四个部分

整体图形网格

"days"列

“month”行

图形方格

整体网格

贡献图可以分为三部分 - 星期列,月份行,和独立的方格

在主要的 .grid元素中,有三个元素

<div class="graph">

<ul class="months">......

[译]Using a React 16 Portal to do something cool

原文:

作者:

React 16版本中增加了一个很有意思的功能“Portals”传送门。

Portals允许你将一小部分React管理的DOM放在父组件之外。使用一个模态框的例子很好的解释了这个属性。它也能很好的用在tooltips上(这里是我之前写的)。

但是这些都不是非常的有意思,让我们做一些更奇妙的事情……

因为传送门所做的事情是获得一个元素并将它添加到其他元素中去,你......

[译]避免在React render方法中使用箭头函数和函数绑定

原文:

作者:

在之前的文章中,我有讲到如何。但是我并没举例有说明为什么这么做。

这里是一个简单的栗子。

在这个例子中,我在render方法中使用箭头函数给每个删除按钮绑定了用户ID。

在35行,我使用了一个箭头函数向deleteUser函数传递了参数。这是问题所在。

来看一看为什么这么说,切换到User.js(点击左上角的汉堡图标来选择不同的js......

[译]React生命周期方法

原文地址:

作者:

上面的图描绘了一个React组件的一生,从生(pre-mounting)到死(unmounting)。

React的美好之处在于她把复杂的UI颗粒化。这样我们不仅可以分割应用,并且可以按需求自定义分割的每一部分。

通过使用生命周期方法,我们可以控制UI渲染、更新的每一个小阶段,考虑如何重新渲染,以及最终的展示效果。

好了,快上车。

co......

[译]React组件最佳实践

原文:

作者:

当我第一次开始写React的时候,见到过很多种不同的写组件的方式,相关的教程之间有着很大的差异。尽管这个框架日益成熟,但是好像还是没有特别‘正确’的方法。

过去几年间在,我们的团队写了很多的React组件。我们逐渐的完善了我们的方法直到满意。

这篇指南代表了我们建议的最佳实践。我希望它能有所帮助,无论是对刚入门的新人,还是经验丰富的老手。

......

[译]Flexbox十分钟入门

原文地址:

Flexbox是什么?

,“弹性盒子”(flexible box)的简称,是 引入的一种布局模式,它决定了元素在页面里是如何排列的,以便预测在不同的屏幕尺寸和设备下的展示样式。

之所以称为Flexbox是因为它可以让元素在flex盒子里伸展或者收缩来更好的填充可用空间。与传统的布局方式比如展示成表格和行内浮动相比,Flexbox在以下方面更有优势:

在......