react基础

JSX基础

• 概念：JSX是javascript XML（HTML)的缩写，表示在JS代码中书写HTML结构。
• 作用：在React中创建HTML结构（页面UI结构）
• React创建虚拟dom，渲染虚拟dom到页面上，不直接操作dom，减轻浏览器的负担。

创建虚拟dom的两种方式：

• 通过jsx（bable可以将jsx转为js；jsx可以将js代码格式转化，本质是用js的方法来完成）jsx是js的一种语法糖。

• 使用js（通过react的creatElement()等方法来创建，比较复杂）

创建ui方式

1、使用命令式语法创建UI

const h3 = React.createElement("h1", {
    className: "aaa" }, "我是标题");

const list2 = React.createElement(
  "ul",
  null,
  React.createElement("li", null, 111),
  React.createElement("li", null, 222),
  React.createElement("li", null, 333)
);

2、使用jsx语法声明式创建UI：

const h1 = <h1 className="aaa">我是标题</h1>;

const list = (
  <ul>
    <li>11</li>
    <li>22</li>
    <li>33</li>
  </ul>
);

对比之下，命令式创建较为繁琐，且嵌套关系较深的话写起来比较复杂。

注意：

jsx语法不能同时存在多个根节点，如果有必要可以用幽灵节点作为根节点（在真实页面上并不会去渲染幽灵节点）

错误写法

return (
  <div>{
   getUI(1)}<div>
  <div>222</div>
)

// 这是错误写法，JSX表达式必须具有一个父元素，就像vue2template下只能有一个父元素一样的意思

正确写法，可以使用幽灵节点 <></>

return {
   
  // <></> 是空标签（幽灵节点），在真实页面上不会渲染这个节点
  <>
    <div>{
   getUI(1)}<div>
    <div>222</div>
  </>
}

JSX的使用

步骤

1、使用JSX语法创建react元素

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

2、使用 ReactDOM.render() 方法渲染元素到页面

ReactDOM.render(title,root)

完整代码

import React from 'react'
import ReactDOM from 'react-dom'

// 使用JSX创建react元素
const title = <h1>HELLO JSX</h1>

// 渲染react元素
ReactDOM.render(title,document.getElementById('root'))

JSX中使用JavaScript表达式

• 语法： { JavaScript表达式 }
• 注意：语法是单大括号

const name = '张三'
const say = （） => 'Hello'
const title = (
  <h1 className="title">
    Hello,  {
   name}
    <p>{
   say()}</p>
    <p>{
    2>5 ? '大于' : '小于' }</p>
  </h1>
)

// 渲染react元素
ReactDOM.render(title, document.getElementById('root'))

JSX的条件渲染

1、使用 if else

let type = 1

const getUI = (type) => {
   
  if(type == 1) return <div>111</div>
  else if(type == 2) return <div>222</div>
  else return null
}

// 外层div是JSX语法的根节点，每个JSX有且只有一个根节点
return <div>{
    getUI(2) }</div>

2、使用逻辑与&&

return <div>
   {
    type == 1 && <div>111</div> }
   {
    type == 2 && <div>222</div> }
   {
    type == 3 && <div>333</div> }
</div>

3、三元表达式

const flag = true;
return flag ? (
   <div className="app">show</div>
) : (
   <div className="app">unShow</div>
)

// 或者
{
   
  flag ?
  <>
    dom...
  </>
  :
  <>
   dom...
  </>
}

JSX的样式

1、行内样式

注意是双大括号，第一层是JSX解析语法的大括号，第二层是装有设置style属性的对象

function App(){
   
  return (
    <div>
       <div style={
   {
   display:'inline-block'}}"></div>
    </div>
  )
}

// 或者，把style里的样式属性提出来

function App(){
   
  const styleObj = {
   
    color: "red",
    fontSize: '18px'
  }
  return (
    <div style={
   styleObj}></div>
  )
}

2、类名样式
在元素上添加 className

import React from "react";
import ReactDOM from "react-dom";
import './index.css'

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

const list = (
    <ul className="list">
        {
   songs.map(item => <li>{
   item.name}</li>)}
    </ul>
)

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

index.css

.list{
   
    color: chocolate;
    font-size: large;
}

可以使用三元表达式动态控制类名

const classFun = bd?'name1':'name2'

<div className={
   `${
   bd}`}>hello</div>

JSX的列表渲染

vue是使用v-for来进行列表渲染的，react则是使用 map 方法来进行列表渲染的

const list = [
  {
    id: "1", name: "icy" },
  {
    id: "2", name: "icy2号" },
  {
    id: "3", name: "icy3号" },
];

return (
  <div className="App">
     {
    list.map((item) => {
   
       return ( <div>{
   item.name}</div> )
     })}
  </div>
)

React的生命周期

React组件传递参数

React使用脚手架创建项目

借鉴如下

React教程（一）：React基础

React教程（二）JSX介绍

React 基础学习