react入门到实战-day1

这react门课我是学习b站黑马的课程，不是打公告哈，我只是过一遍，让自己对学过的知识有印象，所以笔记是有很大部分直接复制总结过来的，方便后面的我进行复习。如有冒犯，联系必删

React介绍以及创建方式

React由Meta公司研发，是一个用于构建Web和原生交互界面的库
react优势：
相较于传统基于DOM开发的优势-组件化开发方式、不错的性能
相较于其它前端框架的优势-丰富的生态、跨平台的支持
create-react-app是一个快速创建React开发环境的工具，底层由Webpack构建，封装了配置细节，开箱即用
执行命令：
npx create-react-app react-basic

npx Node.js工具命令，查找并执行后续的包命令
create-react-app 核心包（固定写法），用于创建React项目
react-basic React项目的名称（可以自定义）
创建React项目的更多方式
https://zh-hans.react.dev/learn/start-a-new-react-project
两大核心包：react、react-dom
src中保留index.js、App.js文件，其他创建文件删掉
index.js

R 复制代码

// 项目的根组件
// APP=>index.js->public/index.html(root)

function App() {
  return (
    <div className="App">
      this is
    </div>
  );
}

export default App;

App.js

R 复制代码

// 项目的根组件
// APP=>index.js->public/index.html(root)

function App() {
  return (
    <div className="App">
      this is
    </div>
  );
}

export default App;

JSX基础

JSX是JavaScript和XMl(HTML)的缩写，表示在JS代码中编写HTML模版结构，它是React中构建UI的方式

优势：

HTML的声明式模版写法 2. JS的可编程能力
但是但是
JSX并不是标准的JS语法，它是 JS的语法扩展，浏览器本身不能识别，需要通过解析工具做解析之后才能在浏览器中运行
左边是程序员编写的代码中间是解析工具右边是浏览器运行的代码

JSX基础-高频场景

JSX中使用JS表达式
在JSX中可以通过大括号语法{} 识别 JavaScript中的表达式，比如常见的变量、函数调用、方法调用等等

使用引号传递字符串
使用JavaScript变量
函数调用和方法调用
使用JavaScript对象

R 复制代码

const message = 'this is message'

function getAge(){
  return 18
}

function App(){
  return (
    <div>
      <h1>this is title</h1>

      {/* 字符串识别 */}
      {'this is str'}

      {/* 变量识别 */}
      {message}

      {/* 函数调用 渲染为函数的返回值 */}
      {getAge()}

      {/* 方法的调用 */}
      {new Date().getDate()}

      {/* 使用js对象 */}
      <div style={{ color: 'red' }}>wo sai </div>


    </div>
  )
}

JSX高频场景-列表渲染

R 复制代码

const list = [
  {id:1001, name:'Vue'},
  {id:1002, name: 'React'},
  {id:1003, name: 'Angular'}
]

 // map循环哪个结构，return就是哪个结构 要加上key 字符串 提高性能
function App(){
  return (
    <ul>
      {list.map(item=><li key={item.id}>{item}</li>)}
    </ul>
  )
}

JSX高频场景-条件渲染

语法：在React中，可以通过逻辑与运算符&&、三元表达式（?:）实现基础的条件渲染

R 复制代码

const flag = true
const loading = false

function App(){
  return (
     <div className="App">
       //真则显示，假则不显示
      {flag && <span>this is span</span>}
        
      //假则显示loading...,真则显示this is span
      {loading ? <span>loading...</span>:<span>this is span</span>}

    </div>
  )
}

JSX高频场景-复杂条件渲染

需求：列表中需要根据文章状态适配三种情况，单图，三图，和无图三种模式
解决方案：自定义函数 + if判断语句

R 复制代码

const type = 1  // 0|1|3

function getArticleJSX(){
  if(type === 0){
    return <div>无图模式模版</div>
  }else if(type === 1){
    return <div>单图模式模版</div>
  }else(type === 3){
    return <div>三图模式模版</div>
  }
}

function App(){
  return (
    <div className="App">

      { getArticleJSX() }
    
    </div>
  )
}

React的事件绑定

基础实现

React中的事件绑定，通过语法 on + 事件名称 = { 事件处理程序 }，整体上遵循驼峰命名法

使用事件参数

传递自定义参数

语法：事件绑定的位置改造成箭头函数的写法，在执行clickHandler实际处理业务函数的时候传递实参

注意：不能直接写函数调用，这里事件绑定需要一个函数引用

同时传递事件对象和自定义参数

语法：在事件绑定的位置传递事件实参e和自定义参数，clickHandler中声明形参，注意顺序对应

React组件基础使用

组件是什么

概念：一个组件就是一个用户界面的一部分，它可以有自己的逻辑和外观，组件之间可以互相嵌套，也可以复用多次

组件基础使用

在React中，一个组件就是首字母大写的函数，内部存放了组件的逻辑和视图UI, 渲染组件只需要把组件当成标签书写即可

R 复制代码

// 1. 定义组件
function Button(){
  return <button>click me</button>
}

//或者
const Button=()=>{
 return <button>click me</button>
}


// 2. 使用组件
function App(){
  return (
    <div>
      {/* 自闭和 */}
      <Button/>
      {/* 成对标签 */}
      <Button></Button>
    </div>
  )
}

组件状态管理-useState

基础使用

useState 是一个 React Hook（函数），它允许我们向组件添加一个状态变量, 从而控制影响组件的渲染结果

本质：与普通JS变量不同的是，状态变量一旦发生变化组件的视图UI也会跟着变化（数据驱动视图）
useState是一个函数，返回值是一个数组
数组中的第一个参数是状态变量，第二个参数是set函数用来修改状态变量
useState的参数将作为count的初始值

R 复制代码

//项目的根组件
import { useState } from 'react'

function App() {
  
  const [count, setCount] = useState(0)
  const y = () => {
    setCount(count + 1)
  }
  return (
    <div className='App'>
      <button onClick={y}>{count}</button>

    </div>
  )
}
export default App

或者

R 复制代码

function App(){
  const [ count, setCount ] = React.useState(0)
  return (
    <div>
      <button onClick={()=>setCount(count+1)}>{ count }</button>
    </div>
  )
}

状态的修改规则

在React中，状态被认为是只读的，我们应该始终替换它而不是修改它，直接修改状态不能引发视图更新，后台会变化，但是视图不会发生改变

修改对象状态

总代码：

组件的基础样式处理

classnames优化类名控制

使用前还是要引入命令npm install classnames

然后还是要导入 import classnames from 'classnames',然后改写