当前位置：首页 > article >正文

黑马React保姆级（PPT+笔记）

article 2025/2/10 6:05:38

一、react基础

1.进程

2、优势

封装成一个库，组件化开发更加方便

跨平台主要是react native等可以来写移动端如android，ios等

丰富生态：可以在很多浏览器用

3、市场

4、搭建脚手架

npx create-react-app react-basic

npm start后仍然可能会报错

解决办法，在index.js中把这两行注释掉

认识目录

核心依赖（右边两个react）

去除非必要

除了app.js和index.js其他全干掉

index.js

app.js

重新启动测试

npm start

运行原理：

总结

创建->清理

创建react的其他方式

5、JSX

本质

工具编译测试

Babel · Babel，点击上面的try it out，然后勾选左边的react就可以了

也就是说，JSX是浏览器不认可的格式，需要通过babel编译器转换成js

高频场景

const count = 1000
function getName(){
    return(
        'john'
    )
}
function App() {
  return (
    <div className="App">
      this is my first react app
        {'this is message'}
        {count}
        {getName()}
        {new Date().getDate()}
        <div style={
  
  {color:'red'}}>this is div</div>
    </div>
  );
}

解释：外面的括号（外层）是识别表达式，内层是对象结构

注意

渲染列表

总结

const list = [
    {id:1001,name:'react'},
    {id:1002,name:'angular'},
    {id:1003,name:'vue'}
]
function App() {
  return (
    <div className="App">
        <ul>
            {list.map(item=><li key={item.id}>{item.name}</li>)}
        </ul>
    </div>
  );
}

export default App;

条件渲染

简单情况

复杂情况

一个页面三种图片展示方式

事件绑定（交互）

获取事件参数e

自定义参数（要用函数引用）

两个都要

6、组件

所谓的组件其实就是函数，可以用function也可以用箭头函数声明，只要首字母是大写就可以。

7、useState

状态不可变

修改对象状态

拓展：看看官方文档数组要怎么变化

8、组件样式变化

1、行内样式

2、类名

9、B站评论案例

渲染

这堆要放在commentList的map循环里面

删除

思路是传一个id进去函数，然后用过滤器过滤掉id相等的那个人

切换功能

思路：先准备一个列表，遍历出最热和最新，设置一个动态state，点击就传type给函数，然后顺便修改这个state，高亮显示就是动态类名，判断这个state和遍历的item一不一样。

排序

安装lodash，主要用他的order功能

npm i lodash

引入横杠

解释：三个字段，第一个是列表，第二个是针对哪个type，第三个是排序方式

改进

让一开始进去就是按最热排序，有默认排序

修改前

修改后

10、classnames优化类名

图里面那种本质还是字符串拼接的模板字符串

安装包

npm i classnames

import

11、受控表单绑定

12、react中获取dom

可以用dir查看有哪些属性

13、发布评论

1、获取评论内容

2、点击发布触发回调函数

本质是修改commentList，先展开，后面再拓展进去（格式要一致），content改为动态的

3、优化

安装uuid

npm i uuid

用法

import {v4 as uuidv4} from 'uuid';

day.js

import dayjs from 'dayjs';

主要观察rpid，ctime

13、清空内容并聚焦案例

当发布完评论后就要这样

1、清空内容

2、聚焦

先创建ref实例，然后绑定到input，最后调用focus方法即可

调用current.focus()即可

14、组件通信

父传子

function Son(props){
    return <div>this is son，{props.name}</div>
}
function App() {
    const name = "this is father"
    return (
    <div className="App">
        <Son name={name}></Son>
    </div>
  );
}

export default App;

props说明

这里修改会报错，因为props是只读属性

children说明

子传父

影响视图变化的是状态数据

兄弟组件通信

import {useState} from "react";

function A({onGetAMsg}){
    const name = "this is A"
    return (
        <div>
            我是A组件
            <button onClick={()=>onGetAMsg(name)}>send</button>
        </div>
    )
}
function B({name}){
    return(
        <div>
            我是B组件
            {name}
        </div>
    )
}
function App() {
    const [name,setName] = useState(null)
    const getAMsg = (msg)=>{
        setName(msg)
    }
    return (
    <div className="App">
        <A onGetAMsg={getAMsg}/>
        <B name={name}/>
    </div>
  );
}

export default App;

跨层组件通信

15、useEffect

我们主要关注是否有请求并且只请求一次。

依赖项参数说明

第一种情况

事实也确实是这样，组件初始化和更新时都会执行一次

第二种情况

这里只执行一次

第三种情况

看起来和第一种情况差不多，实则不然，第一种情况不管什么组件更新都会执行一次，而这里只有count变化才执行一次。

清除副作用

import {useEffect, useState} from "react";

function Son(){
    useEffect(() => {
        const timer = setInterval(()=>{
            console.log("定时器执行中")
        },1000)
        return () => {
            clearInterval(timer)
        }
    }, []);
    return <div>this is son</div>
}
function App() {
    const [show, setShow] = useState(true)
    return (
    <div className="App">
        {show && <Son/>}
        <button onClick={()=>setShow(false)}>卸载Son组件</button>
    </div>
  );
}

export default App;