一、JSX介紹
概念：JSX是 JavaScript XML（HTML）的縮寫，表示在 JS 代碼中書寫 HTML 結構
作用：在React中創建HTML結構（頁面UI結構）
優勢：
- 采用類似于HTML的語法，降低學習成本，會HTML就會JSX
- 充分利用JS自身的可編程能力創建HTML結構
?JSX 并不是標準的 JS 語法，是 JS 的語法擴展，瀏覽器默認是不識別的，腳手架中內置的 @babel/plugin-transform-react-jsx 包，用來解析該語法，將聲明式解析成命令式
二、JSX基礎
1、JSX中使用js表達式
在JSX中使用表達式
//1識別常規變量
//2原生js方法調用
//3三元運算符 常用
const name = "joy booy";
const getAge=()=>{return 17}
const FLAG=truefunction App() {return <div className="App">{name}{getAge()}{FLAG?'666':'888'}</div>;
}export default App
可以使用的表達式:
字符串、數組、布爾值，null \ undefined \ object([ ] / { })
1+2、'abc'.split(' ')、['a', 'b'].join('-')
fn()? ?都可以寫在{ }中?
if 語句 / switch-case 語句 / 變量聲明語句，這些叫做語句，不是表達式，不能出現在 {} 中！！
PS：export default App ：用于從腳本文件中導出單個類、函數，沒有這句，其他文件中就無法導入這個對象，無效棄用
?2、jsx列表渲染
頁面的構建離不開重復的列表結構，比如歌曲列表，商品列表等，vue中用的是v-for，react這邊如何實現呢？
使用數組的map方法
// 來個列表
//技術方案：map重復渲染的是那個模板，就return誰
//注意：遍歷列表時同樣需要一個類型為number/string不可重復的key，提高diff性能
//key僅僅在內部使用，不會出現在真實的dom結構中
const songs = [{ id: 1, name: "癡心絕對" },{ id: 2, name: "粉色海洋" },{ id: 3, name: "夏天" },
];function App() {return (<div className="App"><ul>{songs.map((item) => (<li>{item.name}</li>//或map(song=> <li key={song.id}>{song.name}</li>)))}</ul></div>);
}export default App;
?
3、JSX條件渲染
滿足一定條件才渲染，根據是否滿足條件生成HTML結構，比如Loading效果
可以使用 三元運算符 或? ?邏輯與(&&)運算符
//技術方案:三元表達式常用 邏輯&&運算
// 來個布爾值
const flag = true
function App() {return (<div className="App">{/* 條件渲染字符串 */}{flag ? 'react真有趣' : 'vue真有趣'}{/* 條件渲染標簽/組件 */}{flag && <span>this is span</span> }</div>)
}
export default App4、JSX模板精簡原則
原則：模板中的邏輯盡量保持精簡
復雜的多分支的邏輯 收斂為一個函數 通過一個專門的函數來寫分支邏輯 模板中只負責調用
const getHtag = (type) => {if (type === 1) {return <h1>this is h1</h1>;}if (type === 2) {return <h2>this is h2</h2>;}if (type === 3) {return <h3>this is h3</h3>;}
};function App() {return (<div className="App">{getHtag(1)}{getHtag(2)}{getHtag(3)}</div>);
}export default App;
?
5、JSX樣式處理
行內樣式--在元素身上綁定一個style屬性即可
function App() {return (< div className="App"><span style={{color:'red',fontSize:'30px'}}>this is nb span</span> </div>)
}
export default App;
?或者，模板精簡化
const style = {color: 'blue',fontSize: "10px"
};function App() {return (< div className="App"><span style={style}>this is nb span</span> </div>)
}
export default App;
?
類名樣式--在元素身上綁定一個className屬性即可
新建個.cs文件，用來給App.js使用
?
import './app.css';
const style = {color: "blue",fontSize: "10px"
}function App() {return (<div className="App"><span style={style}>this is nb span</span><span className='active'>測試類名樣式</span></div>)
}export default App
?
6、JSX動態類名控制
動態控制active類名，滿足條件才有
return (<div className="App"><span style={style}>this is nb span</span><span className='active'>測試類名樣式</span><span className={showTitle ? 'active':' '}>動態控制</span></div>)
?
?7、注意事項
掌握JSX在實際應用時的注意事項
- JSX必須有一個根節點，如果沒有根節點，可以使用
<></>（幽靈節點）替代 - 所有標簽必須形成閉合，成對閉合或者自閉合都可以
- JSX中的語法更加貼近JS語法，屬性名采用駝峰命名法 ?
class -> className? ? ? ? ??for -> htmlFor - JSX支持多行（換行），如果需要換行，需使用
()包裹，防止bug出現
?
//父節點示例
?
幽靈節點<></>?
?幽靈節點<></> 消失
?下一節做一個練習案例
)
)
)
)
