React18 基础 1.react中使用JSX，列表渲染

React17 和 18 数据渲染的区别

18版本已经不在使用ReactDom.render(h1,document.querySelector('#root'))来渲染

官方文档提示18版本都更换为使用createRoot

代码演示

使用17版本的ReactDom来渲染依旧是可以渲染的，但18版本也是要会的

const h1 = React.createElement('ul',null,

React.createElement('li',null,'香蕉'),

React.createElement('li',null,'苹果'),

React.createElement('li',null,'橘子')

)

// ReactDom.render(h1,document.querySelector('#root'))  //17版本

createRoot(document.querySelector('#root')).render(h1)  // 18版本

---

react使用JSX

JSX是JavaScript XML的简写，表示了在Javascript代码中写XML(HTML)格式的代码

优势：声明式语法更加直观，与HTML结构相同，降低学习成本，提高开发效率。

• JSX必须要有一个根节点， 如果没有根节点，可以使用<></>（幽灵节点）或者<React.Fragment></React.Fragment>

• 所有标签必须结束，如果是单标签可以使用/>结束

• JSX中语法更接近与JavaScript，属性名采用驼峰命名法

  • class ===> className

  • for ===> htmlFor

• JSX可以换行，如果JSX有多行，推荐使用()包裹JSX，防止 JS 自动插入分号的 bug

使用JSX列表渲染

const songs = [
  { id: 1, name: '痴心绝对' }, 
  { id: 2, name: '像我这样的人' }, 
  { id: 3, name: '南山南' }
]

const list = songs.map(song => <li>{song.name}</li>)

const dv = (
  <div>
    <ul>
      {songs.map(song => (
        <li key={song.id}>{song.name}</li>
      ))}
    </ul>
  </div>
)

---

样式style：

1. 行内样式 - style

   1. 像 width/height 等属性，可以省略 px，直接使用 数值 即可

   2. 如果是需要使用百分比的单位，此时，继续使用字符串的值即可（比如，"60%"）

2. 类名 - className【推荐】

const dv = (
  <div style={ { color: 'red', backgroundColor: 'pink' } }>style样式</div>
)

// 导入样式
import './base.css'
const dv = <div className="title">style样式</div>