実はReactは簡単です
11190 ワード
『公式文書』を通読し、いくつかの本を読んだ.
実は、Reactはユーザーがユーザーインタフェースを構築するJavaScriptライブラリにすぎません.JQueryのような以前使っていたライブラリとは設計理念が違いますが、学ぶのは思ったほど難しくないはずです.
Reactにとって、実は2つのAPIをマスターして、基本的にその大体の動作原理を理解することができて、それぞれReactです.それはElementとReatDOMですrender.
React.createElement
機能:React要素を作成して返します
パラメータ:
type:必須、要素タイプ、1️⃣ htmlタグ文字列2️⃣ Reactコンポーネント
props:オプション、要素プロパティ、オブジェクト
children:オプションで、要素のサブ要素は、要素の内部にネストされた要素に相当します.
戻り値:
React要素
例:
上記のコードで作成されたreactiElementUlの値は次のとおりです.
これにより、ツリー構造のオブジェクトが作成され、このページの長さを説明します.
では、React要素は最終的にどのようにページにレンダリングされますか?
ReactDOM.render
機能:ページで指定した場所(container)でReact要素をレンダリングする
パラメータ:
Element:React要素(React Element)
container:DOM要素(DOM Element)
callback:コールバック関数、レンダリングが完了したらコールバックを呼び出す
戻り値:要素の参照
例:
まとめ
1.React.createElementはReact要素を作成します.
2.ReactDOMを通過する.renderはReact要素をページにレンダリングします.
3.ページの更新方法では、最初のステップで新しいReact要素を作成してから、2番目のステップで再レンダリングします.
4.上記のやり方では、性能に問題はありませんか.だからReactはVirtual DOM技術を使った.
ではVirtual DOMとは何ですか?後ろに残して引っ張る.
実は、Reactはユーザーがユーザーインタフェースを構築するJavaScriptライブラリにすぎません.JQueryのような以前使っていたライブラリとは設計理念が違いますが、学ぶのは思ったほど難しくないはずです.
Reactにとって、実は2つのAPIをマスターして、基本的にその大体の動作原理を理解することができて、それぞれReactです.それはElementとReatDOMですrender.
React.createElement
1 React.createElement(
2 type,
3 [props],
4 [...children]
5 )機能:React要素を作成して返します
パラメータ:
type:必須、要素タイプ、1️⃣ htmlタグ文字列2️⃣ Reactコンポーネント
props:オプション、要素プロパティ、オブジェクト
children:オプションで、要素のサブ要素は、要素の内部にネストされた要素に相当します.
戻り値:
React要素
例:
1 // create React element 's
2 var rElmLi1 = React.createElement('li', {id:'li1'}, 'one');
3 var rElmLi2 = React.createElement('li', {id:'li2'}, 'two');
4 var rElmLi3 = React.createElement('li', {id:'li3'}, 'three');
5
6 // create React element and add child React - elements to it
7 var reactElementUl = React.createElement('ul', {className:'myList'}, rElmLi1,rElmLi2,rElmLi3);上記のコードで作成されたreactiElementUlの値は次のとおりです.
1 {
2 type: 'ul',
3 props: {
4 className: "myList",
5 children: [
6 {
7 type: 'li',
8 props: {
9 id: 'li1',
10 children: 'one'
11 }
12 },
13 {
14 type: 'li',
15 props: {
16 id: 'li2',
17 children: 'two'
18 }
19 },
20 {
21 type: 'li',
22 props: {
23 id: 'li3',
24 children: 'three'
25 }
26 }
27 ]
28 }
29 }これにより、ツリー構造のオブジェクトが作成され、このページの長さを説明します.
1 <ul class="myList">
2 <li id="li1">oneli>
3 <li id="li2">twoli>
4 <li id="li3">threeli>
5 ul>では、React要素は最終的にどのようにページにレンダリングされますか?
ReactDOM.render
1 ReactDOM.render(element, container, [callback])機能:ページで指定した場所(container)でReact要素をレンダリングする
パラメータ:
Element:React要素(React Element)
container:DOM要素(DOM Element)
callback:コールバック関数、レンダリングが完了したらコールバックを呼び出す
戻り値:要素の参照
例:
1 <html>
2 <head>
3 <title>React Apptitle>
4 head>
5 <body>
6 <div id="root">div>
7 body>
8 html> 1 import React from "react";
2 import ReactDOM from "react-dom";
3
4 function app() {
5 // create React element 's
6 var rElmLi1 = React.createElement('li', {id:'li1'}, 'one');
7 var rElmLi2 = React.createElement('li', {id:'li2'}, 'two');
8 var rElmLi3 = React.createElement('li', {id:'li3'}, 'three');
9
10 //create React element and add child React - elements to it
11 var reactElementUl = React.createElement('ul', {className:'myList'}, rElmLi1,rElmLi2,rElmLi3);
12 return reactElementUl;
13 }
14
15 ReactDOM.render(app(), document.getElementById('root'));
https://codesandbox.io 。まとめ
1.React.createElementはReact要素を作成します.
2.ReactDOMを通過する.renderはReact要素をページにレンダリングします.
3.ページの更新方法では、最初のステップで新しいReact要素を作成してから、2番目のステップで再レンダリングします.
4.上記のやり方では、性能に問題はありませんか.だからReactはVirtual DOM技術を使った.
ではVirtual DOMとは何ですか?後ろに残して引っ張る.