JSX

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>
     )