React入门 jsx学习笔记

一、JSX介绍

概念:JSX是 JavaScript XML(HTML)的缩写,表示在 JS 代码中书写 HTML 结构

作用:在React中创建HTML结构(页面UI结构)

优势:

  1. 采用类似于HTML的语法,降低学习成本,会HTML就会JSX
  2. 充分利用JS自身的可编程能力创建HTML结构

JSX 并不是标准的 JS 语法,是 JS 的语法扩展,浏览器默认是不识别的,脚手架中内置的 <@babel/plugin-transform-react-jsx> 包,用来解析该语法,将声明式解析成命令式

二、JSX基础

1、JSX中使用js表达式

在JSX中使用表达式

javascript 复制代码
//1识别常规变量
//2原生js方法调用
//3三元运算符 常用
const name = "joy booy";
const getAge=()=>{return 17}
const FLAG=true

function 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方法

javascript 复制代码
// 来个列表
//技术方案: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效果

可以使用 三元运算符 或 逻辑与(&&)运算符

javascript 复制代码
//技术方案:三元表达式常用  逻辑&&运算
// 来个布尔值
const flag = true
function App() {
  return (
    <div className="App">
      {/* 条件渲染字符串 */}
      {flag ? 'react真有趣' : 'vue真有趣'}
      {/* 条件渲染标签/组件 */}
      {flag && <span>this is span</span> }
    </div>
  )
}
export default App

4、JSX模板精简原则

原则:模板中的逻辑尽量保持精简

复杂的多分支的逻辑 收敛为一个函数 通过一个专门的函数来写分支逻辑 模板中只负责调用

javascript 复制代码
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属性即可

javascript 复制代码
function App() {
  return (
    < div className="App">
     <span style={{color:'red',fontSize:'30px'}}>this is nb span</span> 

    </div>
  )
}
export default App;

或者,模板精简化

javascript 复制代码
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使用

javascript 复制代码
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类名,满足条件才有

javascript 复制代码
return (
    <div className="App">
      <span style={style}>this is nb span</span>
      <span className='active'>测试类名样式</span>
      <span className={showTitle ?  'active':' '}>动态控制</span>
    </div>
    
  )

7、注意事项

掌握JSX在实际应用时的注意事项

  1. JSX必须有一个根节点,如果没有根节点,可以使用<></>(幽灵节点)替代
  2. 所有标签必须形成闭合,成对闭合或者自闭合都可以
  3. JSX中的语法更加贴近JS语法,属性名采用驼峰命名法 class -> className for -> htmlFor
  4. JSX支持多行(换行),如果需要换行,需使用() 包裹,防止bug出现

//父节点示例

幽灵节点<></>

幽灵节点<></> 消失

下一节做一个练习案例

相关推荐
一个专注写代码的程序媛30 分钟前
vue组件间通信
前端·javascript·vue.js
一笑code40 分钟前
美团社招一面
前端·javascript·vue.js
亦世凡华、1 小时前
加速用户体验:Amazon CloudFront 实践与优化技巧
经验分享·教程·亚马逊云科技·cloudfront
懒懒是个程序员1 小时前
layui时间范围
前端·javascript·layui
NoneCoder1 小时前
HTML响应式网页设计与跨平台适配
前端·html
凯哥19701 小时前
在 Uni-app 做的后台中使用 Howler.js 实现强大的音频播放功能
前端
每次的天空1 小时前
Android学习总结之Java篇(一)
android·java·学习
烛阴1 小时前
面试必考!一招教你区分JavaScript静态函数和普通函数,快收藏!
前端·javascript
GetcharZp1 小时前
xterm.js 终端神器到底有多强?用了才知道!
前端·后端·go
JiangJiang1 小时前
🚀 React 弹窗还能这样写?手撸一个高质量 Modal 玩起来!
前端·javascript·react.js