React学习笔记（1.0）

在使用vite创建react时，有一个语言选项，就是typescript-SWC，这里介绍一下SWC。

SWC：可扩展的Rust的平台，用于下一代快速开发工具，SWC比Babel快20倍。

简单来说，就是用于格式转换的，比Babel要快，所以在选择语言时，选择带SWC的就行，结构和不带SWC的一样。

在创建的项目的入口文件中

我们可以看到react-dom/client,这里分为两种，一种是客户端dom，另一个就是服务端dom，react-dom/server.根据不同的开发场景引入的createRoot不同。

二、jsx与HTML的区别

①标签需要小写

在jsx中，标签需要小写，比如div,只能是<div></div>，而在HTML中大小写都可以。

②标签需要闭合

在，jsx中，标签需要闭合，比如input,需要写成<input />，而在HTML5中，可以不写闭合标签。

③class和for关键字

在jsx中，需要将class改成className（特指在定义类名时），另一个就是将for改成htmlFor(用于select标签)

④属性驼峰式写法

除自定义属性外，可以使用短横线的形式，标签中的属性需要使用驼峰命名的形式。

⑤类似与vue的插值语法（react貌似不这样叫）

就是{}形式，和vue中插值语法{{}}的用法一样，在里面可以写变量，三目运算符等js代码。

⑥属性使用大括号

这里需要注意区分vue中的插值语法

html 复制代码

<div className={{active:true}}> hello world!</div>

里面的大括号是因为是对象

⑦添加注释

在jsx中，单行注释（快捷键：ctrl+/）：

javascript 复制代码

  {/* <button onClick={handleClick}>click me</button> */}

多行注释（快捷键：alt+shift+a）：

javascript 复制代码

  {/* <div className={myClass2}> hello world!</div>
      <button onClick={handleClick}>click me</button>
      <button onClick={handleClick2(123)}>click me2</button>
      <button onClick={(e)=>handleClick3(456,e)}>click me3</button> */}

⑧唯一根节点

这一点和vue2倒是挺像，就是外层只有一个div节点，如果有两个就直接报错了，其他的代码需要写在外层div的里面

html 复制代码

return (
    <div>
      <div className={myClass.join(' ')}>App</div>
      <div className={myClass2}> hello world!</div>
      <button onClick={handleClick}>click me</button>
      <button onClick={handleClick2(123)}>click me2</button>
      <button onClick={(e)=>handleClick3(456,e)}>click me3</button>
      {list.map((item,index) => <li key={index}>{item}</li>)}
    </div>
  )

不过这也不是绝对的，可以使用Fragment的方式来进行解决

html 复制代码

 return (
    <Fragment>
    <div>
      <div className={myClass.join(' ')}>App</div>
      <div className={myClass2}> hello world!</div>
      <button onClick={handleClick}>click me</button>
      <button onClick={handleClick2(123)}>click me2</button>
      <button onClick={(e)=>handleClick3(456,e)}>click me3</button>
      {list.map((item,index) => <li key={index}>{item}</li>)}
    </div>
    <div></div>
    </Fragment>
  )

另一种简写形式：

html 复制代码

return (
    <>
    <div>
      <div className={myClass.join(' ')}>App</div>
      <div className={myClass2}> hello world!</div>
      <button onClick={handleClick}>click me</button>
      <button onClick={handleClick2(123)}>click me2</button>
      <button onClick={(e)=>handleClick3(456,e)}>click me3</button>
      {list.map((item,index) => <li key={index}>{item}</li>)}
    </div>
    <div></div>
    </>
  )

但是这种简写形式只限于Fragment标签没有key属性的情况下可以使用，一旦有属性，就会报错，因为我们无法给空标签加属性。

三、样式

样式分为三种，下面分别进行介绍。

①行内样式

html 复制代码

<div style={{color:"purple",fontWeight:900}}>App2</div>

就是这样的style={对象}的形式，记得两个单词的样式要写成驼峰形式。

补充一下：就是在写长宽时，后面的px可以省略，默认就是px

②全局样式

javascript 复制代码

//步骤一
import './css/_sass.scss'

//步骤二：书写css样式
$bg:red;

.box3{
    background: $bg;
}
.box2{
    color:blue;
}
.box1{
    border: 2px solid red;
}

//步骤三：在需要使用的地方使用

 const myClass = ['box1', 'box2']

  const myClass2 = classNames({
    box1:true,
    box2:true,
    [style.box5]:true
  })

③局部样式

这种貌似还是第一次见这样的

首先，建立css文件，这里注意要和全局样式的样式进行区分，全局样式建立文件直接是***.css，而局部样式的文件必须是***.module.css

然后正常书写css样式

然后是使用的时候：

这里类使用js的模块化，需要这样引入

javascript 复制代码

import style from './css/closeStyle.module.css'

style可以随便起名，就是需要指定一个类似于模块名的名称

然后使用

javascript 复制代码

const myClass2 = classNames({
    box1:true,
    box2:true,
    [style.box5]:true
  })

我上面的使用方式是以classname的方式使用的，这样在使用时更加方便，直接使用定义的变量名称

html 复制代码

<div className={myClass2}> hello world!</div>

使用classname需要安装：

然后引入才可以使用：

javascript 复制代码

import classNames from 'classnames'

还有其他的方式用于样式的设置，这里暂时不再详细介绍：

①css-in-JS方案

②Tailwind CSS 方案

最后附上完整的案例代码：

javascript 复制代码

import React from 'react'
import './css/_sass.scss'
import classNames from 'classnames'
import style from './css/closeStyle.module.css'
//引入Fragment
import {Fragment} from 'react'

const handleClick=(e:any)=>{
  console.log(e);
  // e不是原生事件
  //e.nativeEvent是原生事件
  
}
const handleClick2=(num:any)=>{
  return(e:any)=>{
    console.log(num);
    
  }
  // e不是原生事件
  //e.nativeEvent是原生事件
  
}
const handleClick3=(num:any,e:any)=>{
  console.log(num,e);
  
  
  // e不是原生事件
  //e.nativeEvent是原生事件
  
}
const App = () => {
  let list=['1','2','3'];

  // for(let i=0;i<list.length;i++){
  //   list[i]=<li>{list[i]}</li>
  // }

  const myClass = ['box1', 'box2']

  const myClass2 = classNames({
    box1:true,
    box2:true,
    [style.box5]:true
  })

  return (
    <>
    <div>
      <div className={myClass.join(' ')}>App</div>
      <div style={{color:"purple",fontWeight:900}}>App2</div>
      <div className={myClass2}> hello world!</div>
      <button onClick={handleClick}>click me</button>
      <button onClick={handleClick2(123)}>click me2</button>
      <button onClick={(e)=>handleClick3(456,e)}>click me3</button>
      {list.map((item,index) => <li key={index}>{item}</li>)}
    </div>
    <div></div>
    </>
  )
}

export default App

界面中的效果：