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

一、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;