目錄

• 目錄
  • JSX是甚麼
  • 嵌入變數
  • child & function component
  • React.createElement() & element
    • DOM element
    • component element
  • render()
    • React
    • Vue
  • 參考資料

JSX是甚麼

JSX是JavaScript的語法擴充，長得頗像HTML，類HTML

其React專案的切版時常見，但因為是JS的語法擴充，所以可以在裡面使用JS功能

另外其優點是React DOM會在渲染前將所有變數轉為字串，以避免XSS

嵌入變數

function dateConvertor(date){
   return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
}

function App(){
   const frameWork = 'React';
   const today = new Date();
   const url = 'https://images.unsplash.com/photo-1532009871151-e1958667c80d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=200&q=80';

   return (
       <div className="container">
           <h1>Hello {frameWork}</h1>;

           <img src={url}/>

           <p>{dateConvertor(today)}</p>
       </div>            
   );
}

Vue對應寫法

<template>
   <div class="container">
       <h1>Hello {{frameWork}}</h1>

       <img :src="url"/>

       <p>today is {{dateConvertor(today)}}</p>
   </div>
</template>

<script lang="ts">
   import Vue from 'vue';

   export default Vue.extend({
       name: 'App',
       data() {
         return {
           frameWork:'React',
           today:new Date(),
           url:'https://images.unsplash.com/photo-1532009871151-e1958667c80d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=200&q=80',
         };
       },
       methods:{
           dateConvertor(date:Date):string{
               return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
           }
       }
   })
</script>

child & function component

在上個例子中可以發現撰寫JSX和Vue的template相當地相似

同樣地它也可以製作組件，並把它包到另一個組件裡

React的組件有2種，分為function component和class component

這個例子使用function component，組件的名稱開頭一定要大寫

function HelloWorld(){
   const element = (
     <div>
       <h1>Hello! Below are frameworks you can choose</h1>
       <ul>
           <li>Angular</li>
           <li>React</li>
           <li>Vue</li>
       </ul>
     </div>
   );

   return element;
}     

export default HelloWorld;

import HelloWord from './HelloWord';

function APP(){
    return (
        <div>
            <HelloWord></HelloWord>
        </div>
    );
}

Vue對應寫法

<template>
    <div>
        <HelloWorld></HelloWorld>
    </div>
</template>

<script lang="ts">
    import Vue from 'vue';

    export default Vue.extend({ 
        name: 'App',
    })
</script>

React.createElement() & element

(10/24更新)

React element(或稱element)並不是實例，而是純JS物件，因為是純物件所以不會指向螢幕上的任何東西

What’s important is that both child and parent elements are just descriptions and not the actual instances. They don’t refer to anything on the screen when you create them. You can create them and throw them away, and it won’t matter much.

它有type、props、key 3個欄位，其中只有key可以是null

且是immutable的，一旦建立，就不能改變它的屬性。element就像是電影中的一個幀，代表特定時間點的UI。

props描述實例、DOM node該有的屬性(ex: component type、children、className)

DOM element

DOM element並不是瀏覽器的DOM element，是指描述DOM node的React element

其type屬性是string，type會轉為tag name，props則會變成相應的屬性

例如JSX長這樣

function App(){
    return (
        <div className='container'>
            <button className='bg-blue-600 text-white rounded'>
                <span>BlueButton</span>
            </button>        
        </div>
    );
}

經由babel編譯後，變成呼叫React.createElement()的函式，這個函式會回傳React element

也就是說JSX只是createElement()的語法糖

const element = React.createElement(
    'button',
    {className: 'bg-blue-600 text-white rounded'},
    <span>BlueButton</span>
)

{
  type: 'button',
  props: {
    className: 'bg-blue-600 text-white rounded',
    children: {
      type: 'span',
      props: {
        children: 'BlueButton'
      }
    }
  }
}

render()將其轉換成HTML

To render a React element, first pass the DOM element to ReactDOM.createRoot(), then pass the React element to root.render()

<button class='bg-blue-600 text-white rounded'>
    <span>BlueButton</span>
</button>

component element

DOM element是指描述component的React element，其type屬性是function或class component

例如class component長這樣

class SimpleButton extends Component {
  constructor(props) {
    super(props);
    this.state = {  };
  }

  render() { 
    return (
      <button className={`rounded p-2 ${this.props.className}`} onClick={this.props.click}>{this.props.children || 'save'}</button>
    );
  }
}

function App(){
  return (
    <div>
      <SimpleButton className='bg-violet-400 hover:bg-violet-600 text-white'>VioletButton</SimpleButton>
    </div>
  );
}

babel編譯後得到的element

{
  type: SimpleButton,
  props: {
    className:'bg-violet-400 hover:bg-violet-600 text-white',
    children: 'VioletButton'
  }
}

轉換成HTML

<button class="rounded p-2 bg-violet-400 hover:bg-violet-600 text-white">VioletButton</button>

render()

React

render()Root底下的方法，它接受ReactElement或JSXElementConstructor(回傳component或ReactElement的函式)作為參數

// JSX會被babel編譯成呼叫createElementK的函式，這個函式會回傳element
const element = <h1>Hello React</h1>;

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(element);

Vue

Vue的render function也差不多

render function，縮寫為h()

之所以是h是來自hyperscript()

<template>
    <h1 class="container">
        Hello React
    </h1>
</template>

import { h } from 'vue'; // 這是render function

const vnode = h(
  'h1', // type
  {class: 'container'}, // props
  'Hello React'
)

最後會得到一個VNode

參考資料

React - JSX
React - Rendering an Element into the DOM
React - React Components, Elements, and Instances
React - 不使用 JSX 開發 React

Vue - Render Functions & JSX