JSX

Jsx 的基本使用

1、createElement()的問題

1、繁瑣不簡潔
2、不直觀，無法一眼看出所描述的結構
3、不優雅，使用者體驗不爽

• 示例說明：

  • createElement方法示例

    React.createElement(
        'div',
        {className: 'shopping-list'},
        React.createElement('h1', null, 'Shopping List'),
        React.createElement(
            'ul',
            null,
            React.createElement('li', null, 'Apple'),
            React.createElement('li', null, 'Banana'),
        )
    )
     
    

  • Jsx示例

    <div className="shopping-list">
        <h1>Shopping List</h1>
        <ul>
            <li>Apple</li>
            <li>Banana</li>
        </ul>    
    </div>
    

2、JSX 簡介

JSX是JavaScript XML的簡寫，表示在JavaScript程式碼中寫XML（HTML）格式的程式碼。

優勢：
	宣告式語法更加直觀、與HTML結構相同，降低了學習成本、提升開發效率

JSX是React的核心內容。
 

3、使用步驟

• 1、使用JSX語法建立react元素

  const title = <h1>hello JSX</h1>
  

• 2、使用ReactDOM.render()方法渲染react元素到頁面中

  ReactDOM.render(title, document.getElementById('root'))
  

4、為什麼腳手架中可以使用JSX語法？

1、JSX不是標準的ECMAScript語法，他是ECMAScript的語法擴充套件
2、需要使用bable編譯處理後，才能在瀏覽器環境中使用
3、create-react-app腳手架中已經預設有該配置，無需手動配置
4、編譯JSX語法的包為：@babel/preset-react
 

5、注意點

1、React元素的屬性名使用駝峰命名法
2、特殊屬性名：class --> className 、 for --> htmlFor 、 tabindex --> tabIndex
3、沒有子節點的React元素可以用 “/>”  結束
4、推薦：使用 “小括號包裹JSX” ，從而避免JS中的自動插入分號陷阱

示例：
	const dv = (
		<div> hello JSX </div>	
	)

6、JSX中使用JavaScript表示式

• 嵌入JS表示式

  • 資料儲存在JS中

  • 語法：{JavaScript表示式}

  • 注意：語法中是單大括號，不是雙大括號！

  • 示例：

    const name = 'xiaohao'const dv = (  <div>您好,我叫：{name}</div>)
    

7、JSX 的條件渲染

• 場景：loading效果

• 條件渲染：根據條件渲染特定的JSX結構

• 可以使用if/else 、三元運算子、邏輯與運算子來實現

• 示例：

  const isLoading = true
  
  // is/else
  // const loadData = () => {
  //     if (isLoading) return (<div>資料載入中......</div>)
  //     return (<div>資料載入完畢</div>)
  // }
  
  // 三元
  // const loadData = () => {
  //     return isLoading ? (<div>資料載入中......</div>) : (<div>資料載入完畢</div>)
  // }
  
  // 邏輯運算子
  const loadData = () => {
      return isLoading && (<div>資料載入中......</div>)
  }
  
  const dv = (
      <div>
          {loadData()}
      </div>
  )
  

8、JSX 的列表渲染

• 如果要渲染一組資料，應該使用陣列的map()方法

• 注意：渲染列表時應該新增key屬性，key屬性的值要保證唯一

• 原則：map()遍歷誰，就給誰新增key屬性

• 注意：儘量避免使用索引號作為key

• 示例：

  const songs = [
      {id: 0, name: '玫瑰花的葬禮'},
      {id: 1, name: '蟲兒飛'},
      {id: 2, name: '逆戰'}
  ]
  
  const list = (
      <ul>
          {songs.map(item => <li key={item.id}>{item.name}</li>)}
      </ul>
  )
  
  ReactDOM.render(list, document.getElementById('root'))
  

9、JSX 的樣式處理

• 1. 行內樣式——style

     const songs = [
         {id: 0, name: '玫瑰花的葬禮'},
         {id: 1, name: '蟲兒飛'},
         {id: 2, name: '逆戰'}
     ]
     
     const list = (
         <ul style={{ color: 'red', backgroundColor: 'skyblue' }}>
             {songs.map(item => <li key={item.id}>{item.name}</li>)}
         </ul>
     )
     

• 2. 類名——className（推薦）

     import './index.css'
     const songs = [
         {id: 0, name: '玫瑰花的葬禮'},
         {id: 1, name: '蟲兒飛'},
         {id: 2, name: '逆戰'}
     ]
     
     const list = (
         <ul className='list'>
             {songs.map(item => <li key={item.id}>{item.name}</li>)}
         </ul>
     )