其實 React 很簡單

時間 2019-11-08

標籤其實 react 簡單欄目 React 简体版

原文原文鏈接

通讀了一遍《官方文檔》，讀了幾本書：[意] 米凱萊·貝爾託利的《React 設計模式與最佳實踐》、陳屹（yì）的《深刻 React 技術棧》、程墨的《深刻淺出 React 和 Redux》，有一些簡單的思考。javascript

其實，React 只是一個用戶構建用戶界面的 JavaScript 庫，雖然其設計理念與 JQuery 這種之前使用的庫不一樣，但學起來應該沒有想象中那麼難。html

對於 React 來說，其實學會兩個 API，基本就能夠理解它的大體工做原理了，分別是 React.createElement 和 ReactDOM.render。java

React.createElement

React.createElement(
  type,
  [props],
  [...children]
)
複製代碼

功能： 建立並返回 React 元素react

參數：設計模式

type: 必填，元素類型，能夠是 1️⃣ html 標籤字符串 2️⃣ React 組件

props: 可選，元素屬性，是一個對象

children: 可選，元素的子元素，至關於嵌套在元素內部的元素
複製代碼

返回： React 元素app

舉例：dom

// create React element <li>'s
var rElmLi1 = React.createElement('li', {id:'li1'}, 'one');
var rElmLi2 = React.createElement('li', {id:'li2'}, 'two');
var rElmLi3 = React.createElement('li', {id:'li3'}, 'three');

// create <ul> React element and add child React <li> elements to it
var reactElementUl = React.createElement('ul', {className:'myList'}, rElmLi1,rElmLi2,rElmLi3);
複製代碼

經過上述代碼建立的 reactElementUl 其值爲：函數

{
    type: 'ul',
    props: {
        className: "myList",
        children: [
            {
                type: 'li',
                props: {
                    id: 'li1',
                    children: 'one'
                }
            },
            {
                type: 'li',
                props: {
                    id: 'li2',
                    children: 'two'
                }
            },
            {
                type: 'li',
                props: {
                    id: 'li3',
                    children: 'three'
                }
            }
        ]
    }
}
複製代碼

這建立了一個具備樹狀結構的對象，而且其描述了這一段頁面長什麼樣子：性能

<ul class="myList">
    <li id="li1">one</li>
    <li id="li2">two</li>
    <li id="li3">three</li>
</ul>
複製代碼

那 React 元素最終如何渲染到頁面中呢？ui

ReactDOM.render

ReactDOM.render(element, container, [callback])
複製代碼

功能： 在頁面指定的位置（container）中渲染 React 元素

參數：

element: React 元素（React Element）

container: DOM 元素（DOM Element）

callback: 回調函數，渲染完畢後，調用回調
複製代碼

返回： 該元素的引用

舉例：

<html>
<head>
    <title>React App</title>
</head>
<body>
    <div id="root"></div>
</body>
</html>
複製代碼

import React from "react";
import ReactDOM from "react-dom";

function app() {
    // create React element <li>'s
    var rElmLi1 = React.createElement('li', {id:'li1'}, 'one');
    var rElmLi2 = React.createElement('li', {id:'li2'}, 'two');
    var rElmLi3 = React.createElement('li', {id:'li3'}, 'three');

    //create <ul> React element and add child React <li> elements to it
    var reactElementUl = React.createElement('ul', {className:'myList'}, rElmLi1,rElmLi2,rElmLi3);
      return reactElementUl;
}

ReactDOM.render(app(), document.getElementById('root'));
複製代碼