构建自己的 React

学习某样东西是如何运作的最好方法之一，就是自己制作一个简化版。

在本练习中，您将创建一个 render 函数，该函数接受 React 元素并产生等效的 DOM 结构！

为了尽可能简单，我们不会使用上一课讨论的 createRoot API。相反，我们将编写一个 render 函数，该函数接受两个参数：

1. React 元素，描述我们想要的用户界面。
2. 一个将容纳我们应用程序的目标 DOM 节点。

这旨在成为一个具有挑战性的练习。如果你无法解决它，这完全没问题。花 5-10 分钟在上面，然后观看下面的视频。

接受标准？

“结果(Result)”窗格应显示由 React 元素描述的用户界面。它应包含一个链接到维基百科的锚标签，并包含文本“在维基百科上阅读更多”。

它应该适用于任何元素类型（例如，锚点、段落、按钮…）

它应该处理所有 HTML 属性（例如 href ， id ， disabled …）

该元素应包含在 children 下指定的文本。 children 将始终是一个字符串。

function render(reactElement, containerDOMElement) {
  // 1. create a DOM element
  const domElement = document.createElement(reactElement.type);

  // 2. update properties
  domElement.innerText = reactElement.children;
  for (const key in reactElement.props) {
    const value = reactElement.props[key];
    domElement.setAttribute(key, value);
  }

  // 3. put it in the container
  containerDOMElement.appendChild(domElement);
}

const reactElement = {
  type: 'a',
  props: {
    href: 'https://wikipedia.org/',
  },
  children: 'Read more on Wikipedia',
};

const containerDOMElement = document.querySelector('#root');

render(reactElement, containerDOMElement);

富有成效的失败

所以，你刚刚尝试了课程的第一个练习！进展如何？

我怀疑这可能相当棘手，除非你已经熟悉 DOM 交互方法。你可能没有成功完成它。你可能感到有些沮丧或失望。

如果是这样，我有个好消息告诉你：你可能从这个练习中学到了比你想象的要多得多！

大多数在线课程在一开始就会提供你所需的一切。你可以跟着老师编码，轻松自如地完成练习。一个月后，你将不会记得其中的任何内容。

事实证明，挣扎和失败是快速学习新技能的最有效方法之一！

在学术界，这被称为富有成效的失败。以下是 2019 年一篇科学文章中的引用：

在《建设性失败》中，传统的教学过程被颠倒，学习者在接受明确指导之前尝试解决具有挑战性的问题。尽管学生往往无法提出令人满意的解决方案（因此称为“失败”），但这些尝试有助于学习者编码关键特征，并从随后的指导中获得更好的学习效果（因此称为“建设性”）。

换句话说：如果你在解决一个问题时挣扎，放弃，然后观看解决方案视频，你更有可能完全理解和记住这些内容。这就是我们建立持久、通用技能的方式！

当然，挣扎可能会让人泄气。这可能会触发我们的冒名顶替综合症，让我们怀疑自己。但这是一种错误的解读！这只是意味着你正在面临挑战，正在尝试超出你当前能力范围的问题。这是最有效的学习方式！挣扎并不意味着你无能，而是意味着你在成长！

当我在可汗学院工作时，我们经常讨论“成长型思维”的重要性。成长型思维是一种信念，认为我们的脑筋是有弹性的，通过实践我们会变得更聪明，而失败是学习的最快方式。这种思维模式对开发者而言是一种超级能力。就我个人而言，它对我的发展和职业生涯产生了巨大的影响。

所以，这门课程旨在具有挑战性，尤其是对初学者来说。这不会全是一场挣扎——毕竟我希望我们能玩得开心！但偶尔，练习和项目会促使你超越我们在课程中学到的内容。

您可以在 Carol Dweck 于 Google 演讲的这场讲座中了解更多关于培养成长心态的内容："Mindset: The New Psychology of Success"。