当我作为初级开发人员获得第一份工作时，我觉得已经达到终极目标：通过做我最喜欢的事来获得报酬。

我的技能得到认可真是令人兴奋不已，特别是在经过多年的理论学习和学术研究之后。

我被媒体热炒过了头。

不久之后，我在这个新领域领受了难得的一课。事实证明，我在攻读计算机科学学位期间的所学与现实世界的所用之间存在巨大差异。

从“我知道很多”到“我还有更多要学”，这样的落差令人不悦。

从了解框架到理解模式与工作流程，我距离应该到达的境界的确相去甚远。

我意识到，如果我想提高编码能力并作为开发人员不断成长，我必须不断地学习。我领悟到学习的过程实际上永无止境。

快速前行十年之后，我每天仍然在不断学习新技术，感觉棒极了。

但我最大的教训是，仅凭技术技能本身还远远不够。

技术技能只是故事的一半

我们花了很多时间来磨练自己的技术技能，我们学习新的语言、框架、方法和模式。我们投入大量时间，有时甚至会忘记我们日常工作的另一个方面：我们团队的成员。

无论是作为开发人员、团队领导、质量保证工程师、设计师还是产品经理，我们大多数人都在团队中工作。我们一同分享史诗般故事发布的时刻，一同承受令人沮丧的一次次纠错调试。

对于一个由个人组成的集体，每个人都有自己的特点（经验、想法和专长），有效地工作和协作并不总是那么容易，每个人都必须采用特定的技能才能成为最有价值的团队成员。

“团队的力量在于每个成员，每个成员的力量就是团队。“ - 菲尔杰克逊

因此，尽管技术技能至关重要，但这只是等式的一部分，另一部分在于尽你所能成为最好的团队成员。

如何成为更好的团队成员

说实话，这需要很多。但是，让我列出四个基本素质，你可以身体力行。

1.让自我留在门外

我们生活在一个充满竞争的世界，因此，随着时间的推移，我们养成了我们自以为能使自己脱颖而出并生存下来的习惯。

我们想证明自己比其他人更聪明、更强大、更优秀。我们希望我们的实力得到队友和经理的认可。

我们的自我通常被当作一种生存技能来帮助我们脱颖而出，我们常常盲目地相信自己解决问题的方法是最好的。我们断然拒绝其他人的意见和建议。

在最糟糕的情况下，我们甚至会让同事觉得他们不知道自己在说什么。

这种行为，虽然可以供养我们的自我，让我们感觉更好，但却是破坏性的。它从每次谈话中吸取空气，并造成挫折感和令人窒息的工作环境。

“自我可以成为成功的一大障碍，它可以扼杀机会，进而扼杀成功。”-德韦恩约翰逊

为了使团队有效地工作和协作，其成员必须互相尊重，倾听他人的声音并接受他人的意见，即使我们不完全同意。

通过这样做，我们促成一个安全的环境。当我们感到安全时，我们的自我就变得无关紧要了。

2.乐于接受反馈

持续的反馈，无论是积极的还是消极的，都是个人成长和团队合作的关键。没有它，我们就永远无法知道自己的弱点，也无法知道如何改进。

接受负面反馈很难。我们倾向于采取防御措施，可能会反击，试图为自己的行为或反应辩解。

给予负面反馈也同样困难，因为我们担心对方会做出怎样的反应，我们害怕它会给人居高临下的感觉，因此，我们往往会完全拒绝这样做。

“我们都需要有人给我们反馈意见，这样我们才能进步。” - 比尔盖茨

但是，反馈 -- 给予和接受反馈 -- 是我们理解需要什么以及如何改进的最有效的方法。

因此，我们应该学习如何给予建设性的反馈，同时也应该努力接受批评。这样，你就可以每天不断改进并成为更有价值的团队成员。

3.勇于承担责任

当我们发布一个很棒的专题，修复一个难以搞定的错误，或者进行一段鼓舞人心的讲话时，我们期望我们努力得到认可。对我们所做的好事负责很容易。

但我们是人，是人就会犯错误。我们可能会在生产过程中导入某个关键性的错误，说出一些被误解的话，或者做出冒犯他人的行为。

对我们的错误负责并非易事，感觉就像我们举着“我错了”的牌子示众，身后跟着一位女士高喊“丢人，丢人，丢人。”

首先要明白的是犯错是可以的。与其沉溺于错误本身，不如将其视为一次成长的机会。

所以要勇于负责任，负责任意味着成熟，这是在团队中建立信任的关键因素。当你说的话被人曲解，或者你的编码导致错误的产生 - 勇敢地面对失败并承担责任。

“ 善于找借口的人对任何事都很难有所作为。” - 本杰明富兰克林

你将在团队成员之间建立信任，而且他们知道即使在最具挑战性的情况下，他们依然可以指望你在那里。

4.不要成为知识囤积者

我们处在一个不断学习的过程中，无论是阅读StackOverflow上的答案、在线课程，还是自学一个新框架，您的大脑都在不停地消耗知识。

多年来，我们获得了大量知识，我们成为所在领域的专家，如果我们真的很出色，就会成为这个领域的万事通。

相信我们拥有的知识量使我们对公司如此宝贵，这种假想很容易愚弄我们，让我们自以为是不可替代的。为此，我们囤积这些知识，秘而不宣。

然而，知识囤积者对任何团队都具有破坏性。

当我们阻断我们在整个职业生涯中获取知识的通道时，我们不仅会损害团队的生产力和效率，而且还会形成一种“人人为自己”的文化。

这是有害的。

当你分享知识时，你就会赋予他人权力。你积极参与他人的成长，鼓励对话和创造性思维。

分享知识的最大好处是鼓励互惠互助：其他人更愿意与你分享他们的知识。你会惊喜地发现从坐在你身旁的人身上学到那么多东西。

“如果你有知识，让别人在里面点燃蜡烛。”——玛格丽特·富勒。

成为你所在领域的专家并不一定能让你成为一名出色的教育者; 在教与学中投入时间将使你成为一个更有价值的团队成员。

为团队合作腾出时间

在你需要不断打磨自己的技术技能来提高自己的技术水平时，为你的团队合作技能的提升腾出空间。拥有一个技术精湛的团队成员而没有良好的团队合作，没有比这种情况更糟糕的了。

这不仅仅是为了创造一个积极的环境，由具备这四项素质的个人作为团队成员，组成完美的团队，将为你带来更好的技术成果和非凡的效率。

这对每个人都适用。

原文：How to be a team player in the tech world，作者：Ofer Vugman

1、介绍回调函数, promises, async/await

2、开发实例--货币转换器，从两个 API 异步获取数据

在开始正文之前

在写这篇文章的同时，我还录制了一个相关的视频，你可以边看视频边敲代码，我建议你先看下视频，然后再以这篇文章为引导自己练习下代码。

简介

Async/Await 是一种建立在 promises 基础上的，书写异步代码的新方式，所以它也是非阻塞的。

与我们之前异步编程所使用到的回调函数和 promises 相比较，最大的区别就是 Async/Await 使我们的异步代码看起来就像同步代码一样，这也正是它的厉害之处。

使用回调函数

setTimeout(() => {  console.log('This runs after 1000 milliseconds.');}, 1000);

回调函数最典型的问题——回调地狱

在回调函数中嵌套回调函数，看起来就像这样：

回调地狱

指的是回调函数被嵌套在另一个回调函数中，嵌套层级有多层，使我们的代码可读性和可维护性变得非常差。

使用 Promise

const promiseFunction = new Promise((resolve, reject) => {  const add = (a, b) => a + b;  resolve(add(2, 2));});promiseFunction.then((response) => {  console.log(response);}).catch((error) => {  console.log(error);});

promiseFunction 这个函数返回一个表示函数运行过程的 Promise 对象， resolve 函数表示任务已经完成。

然后，我们就可以在 promiseFunction 函数的基础上调用 then() 和 catch() 方法。

then: Promise 成功后执行的回调函数。
catch: 当遇到了错误后执行的回调函数。

Async 函数

Async 函数为我们提供了简洁的语法，我们可以通过它实现与 Promise 相同的效果，但是代码量会减少很多。其实底层原理上，async 不过是 promises 的语法糖而已。

在普通的函数声明前加上 async 关键字，我们就创建了一个 async 函数：

const asyncFunction = async () => {  // Code}

异步函数使用 Await 表达式可以暂停函数的执行，Await 关键字只能在 Async 函数中使用，它会返回 Promise 对象的处理结果。

promises 和 Async/Await 的区别：

// Async/Awaitconst asyncGreeting = async () => 'Greetings';// Promisesconst promiseGreeting = () => new Promise(((resolve) => {  resolve('Greetings');}));asyncGreeting().then(result => console.log(result));promiseGreeting().then(result => console.log(result));

Async/Await 更易于我们理解，因为它看起来像同步代码。

前面我们已经介绍过这些基础知识了，现在我们来看看在现实开发中怎么使用！

货币转换器

项目说明和初始化

在下面的教程中，我们将创建一个简单实用，而且很有学习意义的应用程序，相信会加深你对 Async/Await 理解。

这个程序会接收到我们想要把什么货币转换成什么货币，以及货币金额，然后会调用相关的 API，显示正确的汇率。

在这个程序中，我们将从以下两个 API 异步获取数据：

1. Currency Layer —— https://currencylayer.com - 你需要先免费注册账号，才能获取 API Access Key。这个 API 为我们提供了 计算货币间汇率所需的数据。
2. Rest Countries —— http://restcountries.eu/ - 这个 API 为我们提供了给定一种货币，返回该货币在哪些国家流通。

首先，创建一个新目录并运行 npm init 初始化项目，接下里我们选择默认值，跳过所有步骤，然后再输入 npm i——save axios 安装 axios。在当前文件夹内创建一个 currency-convert .js 的文件。

在 currency-convert .js 文件中，我们先通过 require 语法引入 axios。

const axios = require(‘axios’);`

深入理解 Async/Await

这个程序中，我们需要三个异步函数，第一个函数用来获取关于货币的数据；第二个函数用来获取关于国家的数据；第三个函数用来将所有信息集中起来并展示给用户看

第一个函数——异步获取有关货币的数据

我们创建一个接收两个参数（fromCurrency 和 toCurrency）的异步函数：

const getExchangeRate = async (fromCurrency, toCurrency) => {}

现在我们获取数据，然后通过使用 Async/Await，可以直接将我们想要的数据赋值给变量。调用接口之前别忘了要注册账号，才能获得 API access key。

const getExchangeRate = async (fromCurrency, toCurrency) => {  const response = await axios.get('http://data.fixer.io/api/latest?    access_key=[yourAccessKey]&format=1');}

我们可以通过 response.data.rates 来提取我们想要的数据，然后我们将它赋值给一个变量 rate：

const rate = response.data.rates;

因为所有的数据都是从欧元转换过来的，我们可以创建一个变量 euro，它的值等于：

const euro = 1 / rate[fromCurrency];

最后，我们可以用欧元乘以我们要兑换的货币来得到汇率：

const exchangeRate = euro * rate[toCurrency];

最终的函数看起来像这样：

第二个函数——异步获取国家数据

创建一个异步函数，接收 currencyCode 作为参数：

const getCountries = async (currencyCode) => {}

和之前一样，获取数据，然后将其赋值给一个变量：

const response = await axios.get(`https://restcountries.eu/rest/v2/currency/${currencyCode}`);

然后通过数组 map 方法将 country.name 提取出来，映射为一个新的数组：

return response.data.map(country => country.name);

最终代码：

最后一个函数——将前面的函数组合起来

创建一个异步函数，接收 fromCurrency, toCurrency, amount 三个参数：

const convert = async (fromCurrency, toCurrency, amount) => {}

第一步，获取货币数据：

const exchangeRate = await getExchangeRate(fromCurrency, toCurrency);

第二步，获取国家数据：

const countries = await getCountries(toCurrency);

第三步，将转换后的金额赋值给一个变量：

const convertedAmount = (amount * exchangeRate).toFixed(2);

最后，将数据输出给用户

return `${amount} ${fromCurrency} is worth ${convertedAmount} ${toCurrency}. You can spend these in the following countries: ${countries}`;

最后完整的代码：

使用 try/catch 来处理错误

我们将程序的逻辑用 try 语句包裹起来，如果出现错误，用 catch 语句捕捉：

const getExchangeRate = async (fromCurrency, toCurrency) => {  try {    const response = await       axios.get('http://data.fixer.io/api/latest?access_key=f68b13604ac8e570a00f7d8fe7f25e1b&format=1');    const rate = response.data.rates;    const euro = 1 / rate[fromCurrency];    const exchangeRate = euro * rate[toCurrency];    return exchangeRate;  } catch (error) {    throw new Error(`Unable to get currency ${fromCurrency} and  ${toCurrency}`);  }};

同样第二个函数也这样处理：

const getCountries = async (currencyCode) => {  try {    const response = await axios.get(`https://restcountries.eu/rest/v2/currency/${currencyCode}`);return response.data.map(country => country.name);  } catch (error) {    throw new Error(`Unable to get countries that use ${currencyCode}`);  }};

因为第三个函数只是处理第一个和第二个函数的结果，所以我们不需要对它进行错误捕获。

最后，我们调用函数来接收数据：

convertCurrency('USD', 'HRK', 20)  .then((message) => {    console.log(message);  }).catch((error) => {    console.log(error.message);  });

你会看到下面的结果：

很不错，你坚持到了最后！如果在学习过程中遇到了困惑的地方，你可以参考这个仓库的代码。如果你有任何问题，可以在下面留言。

原文链接：How To Master Async/Await With This Real World Example，作者：Adrian Hajdin

我感到既兴奋又震惊，坦白说还有点担心，不过还好啦。这事真的令人难以置信，不过我还是欣喜若狂地开始写代码了。

很多人建议我将自己的经历写成一篇文章分享出来，也许可以帮助别人。现在，就开始吧！

开始

我一直都对计算机、技术等很感兴趣。和其他同龄人一样，刚开始学习的时候，我创建一个 GeoCities 网站，然后用一些基本的 CSS 样式来个性化修饰我的 MySpace 页面。

我当时并不知道，那就是开发，虽然很粗糙，但的确是在做开发。那时，我不知道这种工作还可以挣到钱，否则我可能会一直坚持下去。所以，我上了大学，并获得了一个与技术无关的学位 —— 心理学。这并不是一个完全无用的学位，只是在我之后的工作中我从来都没有用到过。

发现并追求内心最想做的

这样就到了 2016 年的夏天，那时候在工作之余我有很多空闲时间。其实我之前一直想自学编程，所以这对我来说是很好的时间点——别再拖了。于是我就利用网络上的很多免费资源，全身心地开始了我的编程之旅。

刚开始我在网上搜索学习资源，并发现了 CodeCademy 这个网站，我将上面的问题、解题思路还有结果全部手抄到笔记本上。我会将我认为重要的东西全部都用笔记下来，后面时不时地去复习。现在我再回过头来看这些东西，把我当时和现在觉得困难的内容对比一下，也挺有趣的。

一个朋友知道我在自学，就告诉了我 freeCodeCamp，他说这个平台就是为像我这样的人设计的。我本来打算随便看看，上一两节课就够了，结果那天晚上我完成了 HTML 的整个学习章节，我完全被迷住了。

在学习的过程中我发现学得越多，问题就越多。总感觉有一种寻找这些问题答案的动力在推动着我。所以我继续学习接下来的课程和项目。在 freeCodeCamp 的课程更新之前（译者注：指的是 2016 年版课程更新至 2018 版课程），我在上面完成了两个项目。

平常我会抓住各种机会去学习或者做项目，比如排队时，我不会打开手机去浏览我的各种社交网络，而是看一些和 Web 开发相关的文章或者视频。

现在我对怎么合理安排休息时间有了很大的改变，不像以前一样把时间花费在一些“无脑消费”上（如果你喜欢社交媒体或看一些有趣的动物视频，我并不是说你是“无脑”，我只是说，这类行为通常不需要你的投入，你只需要打开手机，看着屏幕就可以了。其实，我也时不时这样）。

在这段时间里，我浏览了各种学习资源，一直在纠结哪种适合我，就像一个在糖果店里的孩子到处盯一盯。我曾经有一个文件夹，里面保存了大约300个链接，全是我计划要学习的东西。现在我知道了，找到适合自己的并坚持下去，远比选来选去，这看看、那看看要好得多。

我之前总是学习到很晚，妻子和女儿都睡着了。我经常熬夜到凌晨12点半，有时甚至是2点，然后不得不在早上6点起床去做我的日常工作。起初，当学习的东西很简单的时候，对我来说还可以适应。但是，当我开始学习 JavaScript，学习网络、服务器、无障碍等基础知识时，我发现越是熬夜我的大脑就越难以集中精力。

在坚持了几个月之后，我不得不开始改变我的学习计划。

当然，我并没有想停止我的学习和项目，只是将我的日程安排做了下调整。

每天早上，我4点起床，不再像以前一样熬夜。然后学习和做项目，再去健身房，一天就这样开始了。不得不说，在我的学习过程中，这是非常关键的，因为我记住了更多东西，做了更多项目，最终一步步在往前发展。

同时，在这期间我开始购买各种和 web 开发相关的学习资源(主要是 Udemy 的课程和书籍)。但这并不是一个明智的选择。如果你找到了一个你喜欢并适合你学习的资源，那么坚持下去，直到将它学完。不要像我这样从一个跳到另一个。

成长 —— Google & Udacity 奖学金

2018 年 1 月，我申请并获得了优达学城前端纳米学位项目的奖学金。这不仅是一个很棒的机会，驱使我朝着目标前进，同时也让我发现自己的不足之处。

刚参加这个项目，我只会 HTML、CSS 的基本知识，以及一小部分 JavaScript。在课程中，我知道了 jQuery、函数式编程、面向对象编程（OOP）、测试驱动开发（TDD）、无障碍、服务器、API's、网络、React、AJAX 和其他我以前从未接触过的 web 开发技术。

老实说，学习的过程并不是总是轻松愉快，有时候我会很认真地想是不是该放弃。我觉得自己可能永远学不懂这些概念，我的脑子里一片迷茫。

我很庆幸自己没有半途而废，因为半途而废的人永远不会成功——这种老生常谈的话是第一次出现在这篇文章里，我保证后面不会有了。

在学习这些课程的时候，我开发了很多很棒的项目，比如卡片匹配游戏，街机游戏，餐厅点评 App，邻里定位 App。但除了这些项目，还认识了很多朋友，与其他开发者合作也是一份宝贵的经验。

可以这么说，没有这门课程，就不会有今天的我。在这9个月的课程中，我收获了很多宝贵的东西。

求职

在正式开始找工作之前，我已经努力学习了大约两年(有时也偷懒)。但还是觉得自己没有做好准备，一位后来成为我导师的朋友告诉我，你永远不会感觉到自己已经准备好。他说我应该去试一下，如果得到面试机会，就让面试官来告诉我，到底我有没有准备好，不要把任何一个机会挡在门外。

所以，带着极度的恐惧、焦虑和怀疑，我决定开始找工作。

起初，我只是投一些自己符合大多数条件的职位，但这并不是正确的做法。然而我又很害怕收到别人的面试电话。（后来我开始申请任何我感兴趣的工作。高级开发、前端 React 开发 、具有 SQL 经验的 API 开发，我全都申请过。这么做是因为你永远不知道你的申请会有什么结果。也许你没有得到某个高级职位的 offer，但他们可能喜欢你的个性，所以让你去面试他们的低级职位。）

在找工作投了三个月的简历之后。终于我接到了第一次面试的电话！我既高兴又害怕。压力非常大。

我阅读文章，学习面试技巧，阅读书籍，让我的妻子就问题对我进行测验，并尝想象各种我认为会在面试中出现的场景。我还为面试官准备了一些问题，因为我想知道在这家公司工作是什么样的。

结果最后我产生了这样的想法：这是一份完美的工作，是我从记事以来最想得到的东西，我必须得到它！

其实我不应该这么想的。

面试那天，已经不能用紧张来形容我自己了，我汗流浃背。在回答了所有的问题之后，我提问了我准备的问题。面试结束后，我感觉发挥得还可以。

最后，我没有得到这个职位，我很沮丧。我觉得一切都进行得很顺利，但不知什么原因，结果没有如我所愿。后来我又面试了很多工作，才知道面试失败是很正常的。

我决定不再让这些负面情绪来打击我的信心。所以我开始更加努力地工作、学习，化悲愤为动力。我会尽一切努力来保证某次面试能让我拿到 offer。

以下是我找工作的一些数据统计：

• 通过申请平台提交求职申请：271次
• 提交之后，有公司以某种形式回应我：28次
• 电话面试：7次
• 面谈：8次
• 拿到 offer：3家公司（一家是可以签订全职合同，但可能性很小；一家是兼职形式；最终我得到了一份全职工作）
• 没有消息：多得数不过来

如果你正在找工作，不要让这些数字打击你！的确，这是很令人沮丧，让人想退缩。填了一份申请表，投了简历却从来没有得到任何回复，确实很糟糕，但请不要放弃！你一定会成功！就像我一样。

关于找工作 —— 我的建议

关于找开发工作的建议或者技巧不胜枚举，我总结了自己找工作的一点经验，分享给大家：

• 脸皮要厚，这是必须的，因为很多公司可能不会要你
• 申请任何你感兴趣的职位
• 即使某些职位你没有达到要求，一样申请（我的第一份开发者工作就是这么找到的）
• 花时间将简历做好一点
• 不要因为某些公司拒绝你而觉得自己是个失败者
• 向公司展示你可以不需要教程构建一个项目
• 当需要帮助时，就寻求帮助（对我来说很难）
• 去各种平台上申请工作，别忘了 GitHub jobs 也可以
• 保证充足的睡眠、锻炼，以及注意饮食健康（健康是根本）
• 时不时休息一下
• 不要和别人比较，你的工作。技术等等
• 不要在意花了多长时间，3个月或3年（像我一样），这不是一场比赛
• 努力学习，永不言弃

最后，希望你一切顺利！如果你需要建议或帮助，可以在 Twitter 或 LinkedIn 上和我联系。我喜欢帮助别人，结识新朋友。

在我的个人博客上，我也会写一些与 web 开发相关的文章。每个月我会更新一次，里面有我觉得不错的东西，你可以考虑订阅一下。

希望你有精彩的一天， happy coding!

原文：https://www.freecodecamp.org/news/landing-my-first-development-job-what-a-crazy-journey/，作者：Jonathan Sexton

某个意外的发现让我对 React Hooks 有了新的认识，它不仅仅是一种新的开发方式。也许你已经从文章标题猜到是什么了，没错，就是动画！

我正在开发一个基于 React 的，使用网格布局组合卡片组件的应用，当删除某个卡片组件时，为它添加动画效果，看起来像下面一样：

但是，和图中效果相比较始终还是有点细微差别。在我的接下来的解决方案中，很好地利用了 React Hooks。

我们将要做什么？

• 开始构建一个基本的项目骨架
• 为元素的消失添加动画效果，解决一些小问题
• 最终效果实现后，将其重构为一个可复用的动画组件
• 在顶部导航和侧边导航中使用该动画组件

如果你没耐心，这里有整个项目的仓库地址，每一步都有相应的标记（链接地址和描述参考 README 文件）。

骨架

我使用 create-react-app 创建了一个简单的应用程序，它是一个简单的卡片网格结构，每个单独卡片可以被隐藏。

实现代码很简单，效果也很无趣。当用户点击眼睛图标时，我们改变卡片的 display 属性。

function Box({ word }) {
  const color = colors[Math.floor(Math.random() * 9)];
  const [visible, setVisible] = useState(true);
  function hideMe() {
    setVisible(false);
  }
  let style = { borderColor: color, backgroundColor: color };
  if (!visible) style.display = "none";
  return (
    <div className="box" style={style}>
      {" "}
      <div className="center">{word}</div>{" "}
      <button className="button bottom-corner" onClick={hideMe}>
        {" "}
        <i className="center far fa-eye fa-lg" />{" "}
      </button>{" "}
    </div>
  );
}

（上面的代码中使用到了 React Hooks，但这不是 Hooks 最有趣的用途）

添加动画

我没有构建自己的动画库，而是使用了一个像 animate.css 这样的动画库。react-animated-css 是一个很好的库，它为 animate.css 提供了一个包装器。

安装 react-animated-css

npm install --save react-animated-css

在 index.html 中添加 animate.css

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.css" />

在上面的 Box 组件中，将渲染结果改为

return (
  <Animated animationIn="zoomIn" animationOut="zoomOut" isVisible={visible}>
    <div className="box" style={style}>
      <div className="center">{word}</div>
      <button className="button bottom-corner" onClick={hideMe}>
        <i className="center far fa-eye fa-lg" />
      </button>
    </div>
  </Animated>
);

不完全是我们想要的东西

animate.css 会为 opacity 和其他 css 属性添加动画；但不能在 display 属性上添加 css 过渡效果，所以将卡片隐藏后，它始终在文档流中占据着位置。

如果你搜索一下，有些解决方案是建议使用定时器在动画结束时设置 display: none。

所以我们可以添加以下代码。

function Box({ word }) {
  const color = colors[Math.floor(Math.random() * 9)];
  const [visible, setVisible] = useState(true);
  const [fading, setFading] = useState(false);

  function hideMe() {
    setFading(true);
    setTimeout(() => setVisible(false), 650);
  }

  let style = { borderColor: color, backgroundColor: color };

  return (
    <Animated
      animationIn="zoomIn"
      animationOut="zoomOut"
      isVisible={!fading}
      style={visible ? null : { display: "none" }}
    >
      <div className="box" style={style}>
        <div className="center">{word}</div>
        <button className="button bottom-corner" onClick={hideMe}>
          <i className="center far fa-eye fa-lg" />
        </button>
      </div>
    </Animated>
  );
}

(注意：默认的动画时长是 1000ms，我使用的是 650ms，为了在设置 display 属性之前减少卡顿/暂停现象，这只是个人喜好)。

这样我们就能得到想要的效果。

构建一个可复用的组件

现在到此为止，但目前有两个问题（对于我来说）

• 我不想复制/粘贴 Animated 代码块，样式，功能，来重复实现相同效果。
• Box 组件混合了不同类型的逻辑，例如：违反了关注点分离的概念。准确的说，Box 的主要功能是渲染卡片内容，但是动画细节混入了。

类组件

我们可以创建一个传统的 React 类组件来管理和动画相关的状态：切换隐藏/显示，设置 display 属性的超时时间。

class AnimatedVisibility extends Component {
  constructor(props) {
    super(props);
    this.state = { noDisplay: false, visible: this.props.visible };
  }

  componentWillReceiveProps(nextProps, nextContext) {
    if (!nextProps.visible) {
      this.setState({ visible: false });
      setTimeout(() => this.setState({ noDisplay: true }), 650);
    }
  }

  render() {
    return (
      <Animated
        animationIn="zoomIn"
        animationOut="zoomOut"
        isVisible={this.state.visible}
        style={this.state.noDisplay ? { display: "none" } : null}
      >
        {this.props.children}
      </Animated>
    );
  }
}

然后使用它

function Box({ word }) {
  const color = colors[Math.floor(Math.random() * 9)];
  const [visible, setVisible] = useState(true);

  function hideMe() {
    setVisible(false);
  }

  let style = { borderColor: color, backgroundColor: color };

  return (
    <AnimatedVisibility visible={visible}>
      <div className="box" style={style}>
        <div className="center">{word}</div>
        <button className="button bottom-corner" onClick={hideMe}>
          <i className="center far fa-eye fa-lg" />
        </button>
      </div>
    </AnimatedVisibility>
  );
}

这就实现了一个可复用的组件，但是还有点复杂，我们还可以优化一下。

React Hooks and useEffect

React Hooks 是 React 16.8 中的新特性，它们为 React 组件的生命周期和状态管理提供了一种更简单的方法

useEffect 钩子为 componentWillReceiveProps 的使用提供了一种优雅的替代方案,它的代码更简洁，我们还可以使用函数式组件。

function AnimatedVisibility({ visible, children }) {
  const [noDisplay, setNoDisplay] = useState(!visible);
  useEffect(() => {
    if (!visible) setTimeout(() => setNoDisplay(true), 650);
    else setNoDisplay(false);
  }, [visible]);

  const style = noDisplay ? { display: "none" } : null;
  return (
    <Animated
      animationIn="zoomIn"
      animationOut="zoomOut"
      isVisible={visible}
      style={style}
    >
      {children}
    </Animated>
  );
}

useEffect 钩子还是有点不一样，它的主要目的是副作用：改变状态，调用异步函数等等。在我们的例子中，它根据之前的 visible 的值修改了内部的 noDisplay 布尔值。

将 visible 作为依赖添加到 useEffect 的依赖数组中，当 visible 的值发生变化时， useEffect 钩子才会被调用。

和类组件的杂乱相比较，我认为 useEffect 是一种更好的解决方案。

组件复用：Sidebars 和 Navbars

大家都喜欢 Sidebar 和 Navbar，我们来添加一个吧。

function ToggleButton({ label, isOpen, onClick }) {
  const icon = isOpen ? (
    <i className="fas fa-toggle-off fa-lg" />
  ) : (
    <i className="fas fa-toggle-on fa-lg" />
  );
  return (
    <button className="toggle" onClick={onClick}>
      {label} {icon}
    </button>
  );
}

function Navbar({ open }) {
  return (
    <AnimatedVisibility
      visible={open}
      animationIn="slideInDown"
      animationOut="slideOutUp"
      animationInDuration={300}
      animationOutDuration={600}
    >
      <nav className="bar nav">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
      </nav>
    </AnimatedVisibility>
  );
}

function Sidebar({ open }) {
  return (
    <AnimatedVisibility
      visible={open}
      animationIn="slideInLeft"
      animationOut="slideOutLeft"
      animationInDuration={500}
      animationOutDuration={600}
      className="on-top"
    >
      <div className="sidebar">
        <ul>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
        </ul>
      </div>
    </AnimatedVisibility>
  );
}

function App() {
  const [navIsOpen, setNavOpen] = useState(false);
  const [sidebarIsOpen, setSidebarOpen] = useState(false);

  function toggleNav() {
    setNavOpen(!navIsOpen);
  }

  function toggleSidebar() {
    setSidebarOpen(!sidebarIsOpen);
  }

  return (
    <Fragment>
      <main className="main">
        <header className="bar header">
          <ToggleButton
            label="Sidebar"
            isOpen={sidebarIsOpen}
            onClick={toggleSidebar}
          />
          <ToggleButton label="Navbar" isOpen={navIsOpen} onClick={toggleNav} />
        </header>
        <Navbar open={navIsOpen} />
        <Boxes />
      </main>
      <Sidebar open={sidebarIsOpen} />
    </Fragment>
  );
}

还没结束...

到这里我们就可以停下了，但就像我之前提到的关注点分离，我更倾向于避免在 Box、Sidebar 和 Navbar 的 render 方法中混合 AnimatedVisibility 组件（代码有点重复）。

我们可以创建一个高阶组件（HOC）。由于状态管理的原因， HOCs 通常会涉及到类组件。

但是使用了 React Hooks，我们只需要组合 HOC 就可以了（函数式编程概念）。

function AnimatedVisibility({
  visible,
  children,
  animationOutDuration,
  disappearOffset,
  ...rest
})
// ... same as before
}


function makeAnimated(
  Component,
  animationIn,
  animationOut,
  animationInDuration,
  animationOutDuration,
  disappearOffset
) {
  return function({ open, className, ...props }) {
    return (
      <AnimatedVisibility
        visible={open}
        animationIn={animationIn}
        animationOut={animationOut}
        animationInDuration={animationInDuration}
        animationOutDuration={animationOutDuration}
        disappearOffset={disappearOffset}
        className={className}
      >
        <Component {...props} />
      </AnimatedVisibility>
    );
  };
}

export function makeAnimationSlideLeft(Component) {
  return makeAnimated(Component, "slideInLeft", "slideOutLeft", 400, 500, 200);
}

export function makeAnimationSlideUpDown(Component) {
  return makeAnimated(Component, "slideInDown", "slideOutUp", 400, 500, 200);
}

export default AnimatedVisibility

然后在 App.js 中使用这些基于函数式的 HOCs

function Navbar() {
  return (
    <nav className="bar nav">
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </nav>
  );
}

function Sidebar() {
  return (
    <div className="sidebar">
      <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
      </ul>
    </div>
  );
}

const AnimatedSidebar = makeAnimationSlideLeft(Sidebar);
const AnimatedNavbar = makeAnimationSlideUpDown(Navbar);

function App() {
  const [navIsOpen, setNavOpen] = useState(false);
  const [sidebarIsOpen, setSidebarOpen] = useState(false);

  function toggleNav() {
    setNavOpen(!navIsOpen);
  }

  function toggleSidebar() {
    setSidebarOpen(!sidebarIsOpen);
  }

  return (
    <Fragment>
      <main className="main">
        <header className="bar header">
          <ToggleButton
            label="Sidebar"
            isOpen={sidebarIsOpen}
            onClick={toggleSidebar}
          />
          <ToggleButton label="Navbar" isOpen={navIsOpen} onClick={toggleNav} />
        </header>
          <AnimatedNavbar open={navIsOpen} />
        <Boxes />
      </main>
      <AnimatedSidebar open={sidebarIsOpen} className="on-top"/>
    </Fragment>
  );
}

接下来呢？

对于简单的动画，可以使用我所提到的方法。如果比较复杂，我会使用像 react-motion 这样的库。

不仅仅是动画，React Hooks 让我们可以编写可读性高、更简洁的代码。但是，我们需要在思维上有个调整，像  useEffect 这样的 Hooks 不完全是 React 生命周期函数的替代品，你需要深入学习和研究。

我建议看看像 useHooks.com 这样的网站，还有像 react-use 这样的库（不同钩子用例的集合）。

原文：https://www.freecodecamp.org/news/animating-visibility-with-css-an-example-of-react-hooks/，作者：Christian Sepulveda

目录内容

• 准备工作
• 安装 Express
• 脚本配置
• 小技巧
• TL;DR

准备工作

在开始之前，我们需要做些准备工作。

1. 确保你安装了 Node.js 和 npm。可以通过 Node.js Source 或者 NVM (Node Version Manager) 来安装，我推荐安装最新版或者目前稳定版。
2. 接下来，我们需要安装 Express Generator cli，它可以快速帮我们生成 Express 应用骨架，在命令行工具中输入：

npm i -g express-generator

1. 对终端命令有基本了解。我会在这篇教程中介绍大部分命令，所以你即使不会也不用太担心，跟着教程学就行了。
2. 安装好编辑器，打开命令行终端

好啦，准备工作就是这些。

安装 Express

我们使用 Express generator 来创建一个新项目，它会自动帮我们生成一些代码，移动一些文件，并将其中一些语法转换为 ES6 语法。在这个阶段我们就可以验证 ES6 语法是否能正常使用。

项目设置

在命令行工具中输入下面的命令，你可以自定义你喜欢的项目名 your-project-name ， --no-view 指定我们不需要在项目骨架中使用模板引擎，例如 handlebars，ejs，pug 等。

express your-project-name --no-view

创建项目后，我们进入项目根目录。如果你使用的是 Windows Powershell 和 Linux 终端，输入下面的命令：

cd your-project-name

接下来打开代码编辑器，我使用的是 VSCode，你可以使用任何你喜欢的编辑器

安装包，移动和删除部分文件

使用下面的命令为我们的项目安装依赖，并将其中某些文件夹移动位置

npm install

在等待安装的过程中，你可以做如下几步操作：

• 创建 src/ 目录
• 将 bin/ ， app.js 和 routes/ 移动到 src 目录
• 将 bin 目录中的 www 文件重命名为 www.js
• 将 public/ 移动到项目根目录
• 删除 routes/users.js ，我们暂时不需要

整个项目结构如下：

因为修改了文件结构，我们的服务器启动脚本现在就失效了，待会儿我们再解决这个问题。

ES6 语法转换

将 Express 应用生成器生成的代码转换为 ES6 语法的过程有点枯燥，所以我直接将代码贴在下面，你可以复制粘贴。

• bin/www.js 文件：

// bin/www.js

/** * Module dependencies. */

import app from '../app'; import debugLib from 'debug'; import http from 'http';

const debug = debugLib('your-project-name:server');

// generated code below.

我们几乎只需要修改文件开头和末尾的代码，不需要改动其他部分。

• routes/index.js 文件：

// routes/index.js

import express from 'express'; var router = express.Router();

/* GET home page. */ router.get('/', function(req, res, next) { res.render('index', { title: 'Express' }); });

export default router;

• app.js 文件：

// app.js

import express from 'express'; import path from 'path'; import cookieParser from 'cookie-parser'; import logger from 'morgan';

import indexRouter from './routes/index';

const app = express();

app.use(logger('dev')); app.use(express.json()); app.use(express.urlencoded({ extended: false })); app.use(cookieParser()); app.use(express.static(path.join(__dirname, '../public')));

app.use('/', indexRouter);

export default app;

因为 public/ 被移动到了项目根目录，所以我们需要在 app.js 中修改 Express 静态资源路径，注意，在这里我们将 'public' 改为 '../public' 。

app.use(express.static(path.join(__dirname, '../public')));

其次，我们删除了 routes/users.js 文件，所以还需要在 app.js 中移除以下代码

// remove these lines

var usersRouter = require('./routes/users'); app.use('/users', usersRouter);

现在代码语法转换已经完成了，我们接下来开始配置脚本。

脚本配置

在这个阶段，我们会一步步来配置，开发环境的生产环境的配置有点区别。我们会组合部门脚本方便重用。

安装 npm-run-all

由于某些终端命令不能在 Windows cmd 上运行，我们需要安装 npm-run-all 包，这样我们的脚本就可以在任何环境下运行。 在终端中输入以下命令：

npm install --save npm-run-all

安装 babel 和其他包

Babel 是一个 Javascript 编译器，主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中，比如 Node.js。在项目根目录打开终端命令行，输入下面命令，我们会安装最新版的 babel（Babel 7）。

npm install -D @babel/core @babel/cli @babel/preset-env @babel/node

也许你已经注意到了，在上面的那些命令中，我有时候使用 -D，有时使用 --save，这两种标志是在告诉 npm 我们的包是是作为 devDependency 还是 dependency ，即开发依赖和生产依赖。当安装完成后，我们就可以添加 dev 脚本了。

添加 dev 脚本

我前面说过， package.json 中的脚本命令现在无法运行，因为我们修改了部分文件。其实现在它也运行不了，因为我们使用了 ES6 import 语法。这时候我们需要利用之前安装的包，babel 配置文件，和 babel-node 来让 node server 运行起来。

在项目根目录创建 .babelrc 文件，写入以下代码：

{ "presets": ["@babel/preset-env"] }

因为我们使用 Babel 来转换不同类型的 js 语法，所以需要在 .babelrc 中配置 preset-env 预设（之前安装的），它会告诉 Babel 去转换哪种类型。

在这些都设置好后，我们就可以测试 node server能否在 ES6 语法环境下运行，首先，在 package.json 中添加 dev 脚本：

"scripts": { "start": "node ./bin/www", "server": "babel-node ./src/bin/www", "dev": "NODE_ENV=development npm-run-all server" }

在上面的代码中我们添加了 server 和 dev 两个脚本，使用代码分隔将他们组合起来，再通过 npm-run-all 来运行所有命令。

现在输入以下命令来测试服务器能否正常启动：

npm run dev

可以正常工作！

目前， start 脚本命令还不能运行，我们会在后面添加 prod 脚本时来修复。

添加 prod 脚本

prod 脚本 和 dev 脚本有点区别，我们需要将 src 目录中的所有 js 文件代码转换为 nodejs 能够识别的语法形式。运行 prod 脚本会生成一个和 src/ 目录结构类似的 dist/ 文件夹，但是每次在运行该脚本之前，我们需要将旧的 dist/ 文件夹删除，确保我们运行的是最新生成的代码。下面是具体步骤：

• 创建 build 脚本，它会转换 src/ 中的文件代码并生成新的 dist/ 文件夹。
• 安装 rimraf 包，并新建 clean 脚本，用来删除 dist/ 文件夹。
• 新建 prod 脚本，将 clean，build，start server 脚本组合起来。

Clean 脚本

在创建 build 脚本之前，我们先要安装 rimraf 包，用来删除某个文件夹

npm install rimraf --save

安装好后，在 package.json 的 scripts 字段中加入 clean 脚本，我们会在 build 脚本中使用到它，现在整个 scripts 字段结构如下：

"scripts": { "start": "node ./bin/www", "server": "babel-node ./src/bin/www", "dev": "NODE_ENV=development npm-run-all server", "clean": "rimraf dist" },

Build 脚本

现在我们来添加 build 脚本，会用到 babel-cli（之前安装过的），如下：

"scripts": { "start": "node ./bin/www", "server": "babel-node ./src/bin/www", "dev": "NODE_ENV=development npm-run-all server", "clean": "rimraf dist", "build": "babel ./src --out-dir dist" },

Prod 脚本

prod 脚本组合了 build，clean，和 start 脚本，现在我们来修改下 start 脚本：

"scripts": { "start": "npm run prod", "server": "babel-node ./src/bin/www", "server:prod": "node ./dist/bin/www", "dev": "NODE_ENV=development npm-run-all server", "clean": "rimraf dist", "build": "babel ./src --out-dir dist", "prod": "NODE_ENV=production npm-run-all clean build server:prod" },

注意我们在 scripts 字段中还添加了一个 server:prod 脚本，它的作用是在生成的 dist/ 文件夹中运行 node server。我们还将 start 脚本指向了 prod 脚本，因为托管平台(如 Heroku 或 AWS)一般都是使用 npm start 命令来启动服务。

到目前为止，我们的所有配置完成了，现在就可以在 Node 中使用最新的 js 语法。

小技巧：监视文件变化并自动重启服务

使用 nodemon 我们可以在 nodejs 上自动重启服务。同样先安装 nodemon 包，并新建配置文件 nodemon.json ，在项目根目录下的终端中运行此命令：

npm i -D nodemon

nodemon.json 配置文件：

{ "exec": "npm run dev", "watch": ["src/*", "public/*"], "ext": "js, html, css, json" }

现在，只要 src/ 和 public/ 文件夹中的文件有变化，服务器就会自动重启。

我们将其添加到 package.json 的 scripts 字段中：

"scripts": { "start": "npm run prod", "server": "babel-node ./src/bin/www", "server:prod": "node ./dist/bin/www", "dev": "NODE_ENV=development npm-run-all server", "clean": "rimraf dist", "build": "babel ./src --out-dir dist", "prod": "NODE_ENV=production npm-run-all clean build server:prod", "watch": "nodemon" },

运行 watch 脚本：

npm run watch

TL;DR

我将整个教程简化为以下几个步骤，并附上仓库地址，你可以参考学习：

• 在命令行终端中使用 express your-project-name 新建项目。
• 新建 src/ 目录，将 bin/ ， routes/ 和 app 移动到该目录；将部分代码转换为 ES6 语法；重命名 bin/www 为 www.js 。
• 安装开发依赖和生产依赖

npm i -D @babel/cli @babel/core @babel/node @babel/preset-env nodemon

npm i --save rimraf npm-run-all

• package.json 中添加脚本

“scripts”: { “start”: “npm run prod”, “server”: “babel-node ./src/bin/www”, “server:prod”: “node ./dist/bin/www”, “dev”: “NODE_ENV=development npm-run-all server”, “clean”: “rimraf dist”, “build”: “babel ./src --out-dir dist”, “prod”: “NODE_ENV=production npm-run-all clean build server:prod”, “watch”: “nodemon” },

• 新建 nodemon.json 和 .babelrc ，并配置

// nodemon.json { "exec": "npm run dev", "watch": ["src/*", "public/*"], "ext": "js, html, css, json" }

// .babelrc { "presets": ["@babel/preset-env"] }

• 运行 npm run dev ， npm run prod ， npm run watch 测试脚本
• 完整的仓库代码

希望你在本教程中能学到东西，感谢你的阅读!

Happy coding!

原文链接：https://www.freecodecamp.org/news/how-to-enable-es6-and-beyond-syntax-with-node-and-express-68d3e11fe1ab/，作者：Jonathan Cunanan