重新查找并了解React的基本知识

我喜欢React。
我对它的喜爱程度可以用幼儿时代说”长大后我要嫁给React！”来形容（当然是开玩笑的）。

虽然我说喜欢，但是我对React的理解仅限于「大致可以编写一些外观」这种超级低分辨率，所以我想挑战官方文档，进一步学习更多关于我非常喜欢的React的知识。

React是什么？

React 是用于构建用户界面的 JavaScript 库。

我选择将截图转为英文版本，因为它很酷，但是用日文却变成了超级难看不一致的字体。为什么呢？

如果你曾经想过为什么React被称为库而不是框架，如果可以的话，请看这个链接。

 

我会浏览一下贴了屏幕截图的首页，以了解 React 这个库的特性。不过由于它只是首页，所以更像是一种销售宣传，告诉我“如果你使用我来开发，会有这样的好处！”但是我还是会认真阅读，因为我喜欢 React。

似乎 React 有三个特点。

声明性的观点 de nà

React是一个使用宣言性视图来构建用户界面的JavaScript库。使用React，我们只需要设计简单的视图来对应应用程序的各种状态，React会通过检测数据的变化，并高效地更新和渲染相关组件。通过使用宣言性视图来构建应用程序，代码将更易读、更易于调试。

我马上就不清楚了，View是什么呢?
说到View，我认为它是React Native的组件，但在React中的View可能是指”视图”，因为它的首字母大写看起来像是一个术语…如果有人知道，请告诉我，我会很高兴的。

使用React来创建具有互动操作功能的应用程序非常方便。

使用Vanila JS进行DOM操作并添加事件的步骤如下。

1. 使用 document.createElement 函数创建元素

 

1. 创建函数

 

1. 使用 document.addEventListner 方法将函数作为事件处理程序添加到元素中

使用 document.appendChild 等方法将其附加到现有的 HTML 上。

方法名称很长也是一个特点。

如果是React，你可以这样编写代码。

function MyButton() {
  function handleClick() {
    alert('You clicked me!');
  }

  return (
    <button onClick={handleClick}>
      Click me
    </button>
  );
}
// 引用: https://beta.reactjs.org/learn

宣言型 UI 是一种非常简洁的编写方式，无需像操作 Vanilla 的 DOM 一样繁琐地一步一步命令，只需传递定义好的函数来实现所需的外观和行为即可。当代码变得庞大时，显然管理工作的负担会有所不同。

在React中，另一个特点是当数据的状态发生变化时，它会自动地反映这些变化。

基于组件的

首先创建管理自身状态的封装组件，通过组合这些组件来构建复杂的用户界面。组件的逻辑可以直接用 JavaScript 编写，而不是模板，这样可以轻松地在应用程序中处理各种数据，并且不需要将状态存储在 DOM 中。React 是用于构建用户界面的 JavaScript 库。

React 通过使用包含标记和逻辑的松散耦合的“组件”单元，将关注点分离，而不是将标记和逻辑分别写在不同的文件中进行人为技术分离。JSX 的引入 – React.

在理解React时，组件是绝对关键的重要概念。

「component」这个英文单词有着「要素、组件、构成要素」等意思。
React的组件是构成UI的一个部分，它是通过JSX生成React元素的函数。它包含逻辑和视觉标记。

// これ全部が1つのコンポーネント
function MyButton() {
   // ロジックを JavaScript で書く 
  function handleClick() {
    alert('You clicked me!');
  }
  // UI は return 文の中に書く
  return (
    <button onClick={handleClick}>
      Click me
    </button>
  );
}
// 引用: https://beta.reactjs.org/learn

所有组件都以大写字母开头，就像 `MyButton` 一样，这是一条规则。HTML 标签必须以小写字母开头，以确保名称不会重复。

另外，组件可以只包含一个按钮，也可以将整个页面都表示为一个组件。如何进行分割取决于设计思想。

创建的组件可以嵌套在其他组件中。

export default function MyApp() {
  return (
    <div>
      <h1>Welcome to my app</h1>
      <MyButton />
    </div>
  );
}
}
// 引用: https://beta.reactjs.org/learn

通过使用export default可以将“在这个页面上创建的主要组件，希望在其他文件中也加载”的意思表达出来。

如果您对出口一词不太理解，请参阅以下内容。

 

只要学一次，到哪里都可以用。

只要学习一次，就可以在任何地方使用。在使用React技术时，没有限制。添加新功能时，无需修改现有的源代码。

 

由于React不是一个框架而是一个库，因此可以与许多其他库一起使用。

通过使用JavaScript库React Native，您可以进行iPhone和Android应用的开发。虽然语法与React有许多不同之处，但基本思想是声明式UI和组件化的，所以如果您有使用过React的经验，应该能够轻松理解。

JSX是什么？

JSX 是 JavaScript XML 的缩写，带有扩展名 .jsx。它的特点是可以结合 HTML 和 JavaScript 进行编写。React 也支持 JSX。

因为在 JavaScript (.js) 中也可以编写 React，使用 JSX 是由工程师们决定的。虽然官方文档中写着“使用 JSX 很方便”，但显然引起了一些争议。

在 JSX 中使用类似于 HTML 的标记语言，但比 HTML 更为严格。

在HTML中，即使缺少一些闭合标签或者标签名称错误，也会被允许，但是JSX不会容忍。此外，JSX不能返回两个以上的标签，因此需要用空标签将它们包裹起来，以便将它们视为一个标签处理。

function AboutPage() {
  return (
    <>
      <h1>About</h1>
      <p>Hello there.<br />How do you do?</p>
    </>
  );
}

当编译时，JSX表达式会被转换为JavaScript函数调用，并且被评估为JavaScript对象。

React的要素是什么？

React 的要素是由 JSX 生成的，通过 root.render() 转换为 DOM 元素，并反映在 HTML 中。

const root = ReactDOM.createRoot(
  document.getElementById('root')
);
const element = <h1>Hello, world</h1>;  // まだ React 要素
root.render(element); // DOM 要素

// 参考: https://ja.reactjs.org/docs/rendering-elements.html

“Virtual DOM是什么？”

這個詞就好像其名稱所暗示的，是指虛擬 DOM。我們可以說它是一個不僅在React中被使用的重要概念，而且在其他地方也有應用。

通过使用虚拟 DOM，可以提高性能。当操作 DOM 时，例如要将更改反映到父节点上，则需要重写所有子节点。但是，在使用虚拟 DOM 构建真实 DOM 之前，我们可以编辑虚拟 DOM，并且可以识别差异并仅反映必要的更改部分。

使用map或其他循环处理创建元素时，你是否遇到过一个叫做”key”的prop的唯一性错误？这个错误的意思是”为了方便在将来进行更改时能够正确地更新元素，请给每个元素添加能够唯一标识的key prop。”

“钩子是什么？”

Hooks 是 React 中的函数，用于将功能如 state 和生命周期等连接到函数组件中。Hooks 是为了在不使用类的情况下使用 React 的功能，因此在类内部不起作用。
快速了解 Hooks – React

`フック`是一种可以让函数组件使用类组件中可用的功能的方法。
例如，在类组件中可以使用`this.state`来使用React的功能，而在函数组件中可以使用`useState`来实现相同的功能。

原本只有类组件的地方引入了函数组件，但存在功能受限的问题。现在有了钩子，两者之间没有太大差别。使用函数组件可以更简洁地编写代码，这可能是一个不错的选择。

“什么是管理？”

我已经整理在这里了。

 

什么是useRef？

我在这里整理了一下。

 

useEffect是什么东西？

在这篇文章的结尾，讨论了有关React优化的内容。

 

总结

• React は UI を構築するための JavaScript ライブラリ

ライブラリなので様々な他のライブラリと組み合わせて使える

宣言的 UI を採用しており、管理にかかる負担が少ない
コンポーネントを単位として考える
React Native を使うとスマホアプリの開発もできる
JSX は文法に厳しい
JSX から生成されているのは HTML ではなく React 要素
仮想 DOM を編集 → DOM を構築、とすることで、差分を見極め効率的に変更を反映できる
フックとはクラスコンポーネントで使えていた機能を関数コンポーネントでも使えるようにするもの

请参考以下资料

• React – ユーザインターフェース構築のための JavaScript ライブラリ

 

• なぜクラスコンポーネントより関数コンポーネントが推奨されるのか？

 

• Quick Start

 

• Proposal: [react][breaking] Only .js files should contain JSX. by KevinGrandon · Pull Request #985 · airbnb/javascript

 

• React Native · Learn once, write anywhere

 

• JSX の導入 – React

 

• 仮想 DOM と内部処理 – React

 

• 差分検出処理 – React

 

仮想DOMの時代はもう終わり？ | Welcome to Monstarlab’s Engineering Blog