From dd3ca4b7a79c61d810a730ae5d327f54d1f4827b Mon Sep 17 00:00:00 2001 From: Yuma Sumi Date: Fri, 8 Mar 2019 09:36:52 +0900 Subject: [PATCH 01/32] translating the intro part of implementation notes --- content/docs/implementation-notes.md | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/content/docs/implementation-notes.md b/content/docs/implementation-notes.md index a035a5edf..d8288aff5 100644 --- a/content/docs/implementation-notes.md +++ b/content/docs/implementation-notes.md @@ -1,6 +1,6 @@ --- id: implementation-notes -title: Implementation Notes +title: 実装に関するメモ layout: contributing permalink: docs/implementation-notes.html prev: codebase-overview.html @@ -9,11 +9,13 @@ redirect_from: - "contributing/implementation-notes.html" --- -This section is a collection of implementation notes for the [stack reconciler](/docs/codebase-overview.html#stack-reconciler). +この章は [stack リコンサイラ (reconciler)](/docs/codebase-overview.html#stack-reconciler) の実装に関するメモを集めたものです。 -It is very technical and assumes a strong understanding of React public API as well as how it's divided into core, renderers, and the reconciler. If you're not very familiar with the React codebase, read [the codebase overview](/docs/codebase-overview.html) first. +これは非常に技術的な内容であり、React の公開 API だけでなく、React がどのようにコア、レンダラ (renderer) 、そしてリコンサイラに分割されているかについても、深く理解していることを前提としています。 +React のコードベースにあまり精通していないのであれば、まず[コードベースの概要](/docs/codebase-overview.html)を読んでください。 + +また、これは [React のコンポーネント、インスタンスおよび要素の違い](/blog/2015/12/18/react-components-elements-and-instances.html)についての理解を前提としています。 -It also assumes an understanding of the [differences between React components, their instances, and elements](/blog/2015/12/18/react-components-elements-and-instances.html). The stack reconciler was used in React 15 and earlier. It is located at [src/renderers/shared/stack/reconciler](https://github.com/facebook/react/tree/15-stable/src/renderers/shared/stack/reconciler). From 78a7dd885522a9fcb63e4b4f0b6f5f9e6b099436 Mon Sep 17 00:00:00 2001 From: Yuma Sumi Date: Fri, 8 Mar 2019 10:28:08 +0900 Subject: [PATCH 02/32] completed mounting as a recursive process in implementation notes --- content/docs/implementation-notes.md | 51 +++++++++++++++------------- 1 file changed, 27 insertions(+), 24 deletions(-) diff --git a/content/docs/implementation-notes.md b/content/docs/implementation-notes.md index d8288aff5..3089205a7 100644 --- a/content/docs/implementation-notes.md +++ b/content/docs/implementation-notes.md @@ -12,49 +12,52 @@ redirect_from: この章は [stack リコンサイラ (reconciler)](/docs/codebase-overview.html#stack-reconciler) の実装に関するメモを集めたものです。 これは非常に技術的な内容であり、React の公開 API だけでなく、React がどのようにコア、レンダラ (renderer) 、そしてリコンサイラに分割されているかについても、深く理解していることを前提としています。 -React のコードベースにあまり精通していないのであれば、まず[コードベースの概要](/docs/codebase-overview.html)を読んでください。 +React のコードベースにあまり精通していないのであれば、まず [コードベースの概要](/docs/codebase-overview.html) を読んでください。 -また、これは [React のコンポーネント、インスタンスおよび要素の違い](/blog/2015/12/18/react-components-elements-and-instances.html)についての理解を前提としています。 +また、これは [React のコンポーネント、インスタンスおよび要素の違い](/blog/2015/12/18/react-components-elements-and-instances.html) についての理解を前提としています。 +stack リコンサイラは、React 15 およびそれ以前のバージョンで使われていました。[src/renderers/shared/stack/reconciler](https://github.com/facebook/react/tree/15-stable/src/renderers/shared/stack/reconciler) で見つけることができます。 -The stack reconciler was used in React 15 and earlier. It is located at [src/renderers/shared/stack/reconciler](https://github.com/facebook/react/tree/15-stable/src/renderers/shared/stack/reconciler). +### 動画： React をスクラッチで作成する {#video-building-react-from-scratch} -### Video: Building React from Scratch {#video-building-react-from-scratch} +このドキュメントは、[Paul O'Shannessy](https://twitter.com/zpao) 氏の行った講演 [building React from scratch](https://www.youtube.com/watch?v=_MAD4Oly9yg) に大いに啓発されています。 -[Paul O'Shannessy](https://twitter.com/zpao) gave a talk about [building React from scratch](https://www.youtube.com/watch?v=_MAD4Oly9yg) that largely inspired this document. +このドキュメントと彼の講演は、ともに実際のコードベースを簡素化したもので、両方に親しむことでより深く理解することができるでしょう。 -Both this document and his talk are simplifications of the real codebase so you might get a better understanding by getting familiar with both of them. +### 概要 {#overview} -### Overview {#overview} +リコンサイラそのものは公開 API を持ちません。 +リコンサイラは、React DOM や React Native のような [レンダラ](/docs/codebase-overview.html#stack-renderers) が、ユーザーの記述した React コンポーネントに応じてユーザーインターフェースを効率よく更新するために使用されます。 -The reconciler itself doesn't have a public API. [Renderers](/docs/codebase-overview.html#stack-renderers) like React DOM and React Native use it to efficiently update the user interface according to the React components written by the user. +### 再帰的な処理としてマウントする {#mounting-as-a-recursive-process} -### Mounting as a Recursive Process {#mounting-as-a-recursive-process} - -Let's consider the first time you mount a component: +一番最初にコンポーネントをマウントするときのことを考えてみましょう： ```js ReactDOM.render(, rootEl); ``` -React DOM will pass `` along to the reconciler. Remember that `` is a React element, that is, a description of *what* to render. You can think about it as a plain object: +React DOM はリコンサイラに を渡します。 + が React 要素であること、つまり、「何」をレンダリングするかの叙述であることを思い出してください。 +これはプレーンなオブジェクトとして考えることができます： ```js console.log(); // { type: App, props: {} } ``` -The reconciler will check if `App` is a class or a function. +リコンサイラは App がクラスか関数かをチェックします。 -If `App` is a function, the reconciler will call `App(props)` to get the rendered element. +もし App が関数なら、リコンサイラは App(props) を呼び出してレンダリングされた要素を取得します。 -If `App` is a class, the reconciler will instantiate an `App` with `new App(props)`, call the `componentWillMount()` lifecycle method, and then will call the `render()` method to get the rendered element. +もし App がクラスなら、リコンサイラは new App(props) で App を初期化し、componentWillMount() ライフサイクルメソッドを呼び出し、それから render() メソッドを呼び出してレンダリングされた要素を取得します。 -Either way, the reconciler will learn the element `App` "rendered to". +どちらにせよ、リコンサイラは App が「render された」結果となる要素を手に入れます。 -This process is recursive. `App` may render to a ``, `Greeting` may render to a `