react入門（一）：JSX渲染原理

一.原理

JSX的渲染原理主要分為三部分：

1.基於babel-preset-react-app這個語法解析包，把jsx語法轉換成一個名為 React.createElement() 的方法調用。

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);
轉換后為：

const element = React.createElement( 'h1', {className: 'greeting'}, 'Hello, world!' );

<div>
    <h1 style='color: red' className='title'>todo with react</h1>
    <ul>
      <li>a</li>
      <li>b</li>
    </ul>    
</div>
轉換后為：

React.createElement("div", null, React.createElement(
　　　　"h1", 
　　　　{ style: "color: red", className: "title" 　　}, 
　　　　"todo with react"
　　 ), React.createElement("ul", null, React.createElement("li", null, "a"), 
　　　　 React.createElement("li", null, "b") ) );

 2.基於createElement把傳遞的參數處理為jsx對象

createElement():React在渲染解析的時候，會把所有的html標簽都轉換為(返回一個對象):
返回對象的格式：
{
　　type: 'div' 　　---存儲的是標簽名或者組件名
　　props: {　　　　---props: 屬性對象（給當前元素設置的屬性都在這里）(如果有子元素，會多一個children屬性，依次把子元素傳遞進來，沒有就沒有children屬性)
　　　　style: '',
　　　　className: '',
　　　　children: [] 可能有可能沒有，有的話：可能是一個數組，也可能是一個字符串或者是一個對象。
　　},
　　key: null,
　　ref: null
}
例如上面的jsx語法會返回：
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world'
  }
};

3.基於render把jsx對象按照動態創建dom元素的方式插入到指定的容器中即可。

 關於render函數

render(jsx,container,callback)

render(<h1>標題</h1>, document.getElementById('root'));

主要接受三個參數:
- jsx:javascript xml(html) react獨有的語法；虛擬DOM（virtual dom）
- container:虛擬DOM最后渲染到的容器，不建議是body
- callback:把虛擬DOM插入到頁面中，觸發的回調函數（已經成為真實的DOM）

 

2.語法

具體實戰代碼

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

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



App.js

import React from 'react';

function App() {
return (
　　　　//jsx語法:允許在js代碼中直接寫入html標簽，並且可以在html標簽中寫入js表達式。
　　　　<div>
　　　　　　{2 + 1}，hello react
　　　　</div>
　　);
}

布爾值、Null 和 Undefined 被忽略：

false、null、undefined 和 true 都是有效的子代，但它們不會直接被渲染。

這些都是等價的

<div></div>

<div>{false}</div>

<div>{null}</div>

<div>{undefined}</div>

<div>{true}</div>

<div>
  {showHeader && <Header />}　　//該JSX只會在showHeader為true時渲染<Header />組件。
  <Content />
</div>