React.js docs読んでいるのでメモ - 何でも屋エンジニアのブログ

今改めてReact.jsを学びなおしている。

以前チュートリアルをやって分かったような分からないような気持ちだったので、ドキュメントを読んでいるが詳しく解説があって読みやすい。

以下のページから1ページずつ読んでいるのでそのメモ。h3は雑にページのタイトルだったり項のタイトルだったりする。

ja.reactjs.org

要素

Ractアプリケーションの最小単位の構成ブロック

React要素はプレーンオブジェクト（notブラウザのDOM要素）

要素をDOMとして描画するには

ReactDOM.render() にelement（React要素）とHTML内の要素を渡す（document.getElementById('root')）

DOMやHTMLとの関係がよく分からなくなったときは:

Document Object Model (DOM) は HTML や XML 文書のためのプログラミングインターフェイスです。ページを表現するため、プログラムが文書構造、スタイル、内容を変更することができます。 DOM は文書をノードとオブジェクトで表現します。そうやって、プログラミング言語をページに接続することができます

https://developer.mozilla.org/ja/docs/Web/API/Document_Object_Model/Introduction

レンダーされた要素の更新

React DOM は要素とその子要素を以前のものと比較し、DOM を望ましい状態へと変えるのに必要なだけの DOM の更新を行う

コンポーネントとprops

コンポーネント: JavaScriptの関数のようなもの。任意の入力を受け取りReact要素を返す。任意の入力はpropsと呼ばれる。

関数コンポーネントとクラスコンポーネント

クラスコンポーネント: ES6クラスを利用したもので、React.Componentをextendしrenderをオーバーライドする

コンポーネントのレンダー

ユーザー定義のコンポーネントをレンダーすることもできる。具体例は: https://ja.reactjs.org/docs/components-and-props.html

コンポーネントを組み合わせる

function Welcome(props) {
  return <h1> Hello, {props.name}</h1>
}

function App() {
  return (
    <div>
      <Welcome name='Sarah' />
      <Welcome name='Taro' />
    </div>
  );
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

Propsは読み取り専用

すべてのReactコンポーネントは自己のpropsに対し純関数のように振る舞わなければならない。

state とライフサイクル

「何が起こったのかをメソッドが呼び出される順序にそって簡単に振り返ってみましょう」の箇所は繰り返し読むこと。

データは下方向に伝わる

単一方向の（トップダウンの）データフロー