React学习
React
特点
- 声明式UI
- 组件化
- 一次学习,跨平台编写
JSX
在React中创建HTML结构
使用js表达式
{JS 表达式}
- 识别常规变量
- 原生js方法调用
- 三元运算符
JSX 列表渲染
map 方法
key仅在内部使用,不会出现在真实的dom结构中
1 | <ul> |
条件渲染
- 三元运算符
- 逻辑&&运算
1 | <div> |
样式处理
- 行内样式 - 在元素上绑定一个style属性
- 类名样式 - 在元素上绑定一个className属性
1 | <span style = {{color : "red"}}>11 </span> |
注意事项
- 只能有一个根节点
- 所有标签都要闭合
- 属性名采用驼峰
- 支持多行 用()包裹
组件
函数组件
- 组件名称首字母大写
- 必须要有返回值
- 组件可以像HTML标签一样渲染到页面,需要闭合
类组件
1 | class HelloComponent extends React.Component{ |
- 组件名称首字母大写
- 需要继承父类
- 必须要render 且有返回值
事件绑定
语法
传参
1
2
3
4
5
6
7
8
9
10<div onClick = {()=>{console.log(111)} }>222</div>
function Hello () {
const fun1 = (e,msg) => {
console.log(msg)
}
return <div onClick = {(e)=>{fun1(e, "msg")} }>222</div>
}
组件状态
定义状态必须通过state实例的方法
不能直接赋值,通过setState方法
不要直接修改状态的值,而是基于当前状态创建新的状态值。
1
2
3
4
5
6
7
8
9
10
11
12this.setState({
count: this.state.count + 1,
//add
list: [...this.state.list, 4],
//delete
list: this.state.list.filter((item) => item != 2)
people:{
...this.state.people,
//重新覆盖
name: "newName"
}
})
表单组件
受控组件
input框自己的状态被React组件状态控制
非受控组件
通过dom方式获取文本值
组件通信
组件之间数据交流
父传子
class : this.props.msg
function: props.msg
props 是只读的,可以传递任何数据,可以解构赋值
- 子传父 - 子调用父的函数,把数据作为参数传入。
兄弟互传 - 自定义事件模式产生技术方法eventBus / 通过父组件
其他关系 - mobx / redux / 基于hook的方案
context
- 调用
createContext
方法得到provider
和consumer
- 通过
provider
包裹顶层组件value
属性绑定数据 - 通过
consumer
包裹底层组件(value => 消费数据
)
- 调用
children
在组件中写入东西(普通文本,普通标签元素,函数,JSX ),都会作为children属性传到组件中
props 校验
生命周期
只有类组件有生命周期(类组件需要实例化)
挂载阶段
钩子函数 | 触发时机 | 作用 |
---|---|---|
constructor | 创建组件时,最先执行,初始化的时候只执行一次 | 1. 初始化state 2. 创建ref 3. 使用bind解决this指向问题等等 |
render | 每次组件渲染都会触发 | 渲染UI(注意:不能在里面调用setState()) |
componentDidMount | 组件挂载(完成DOM渲染)后执行,初始化的时候执行一次 | 1.发送网络请求 2.DOM操作 |
更新阶段
钩子函数 | 触发时机 | 作用 |
---|---|---|
render | 每次组件渲染都会触发 | 渲染UI(与 挂载阶段 是同一个render) |
componentDidUpdate | 组件更新后(DOM渲染完毕) | DOM操作,可以获取到更新后的DOM内容,不要直接调用setState |
卸载阶段
钩子函数 | 触发时机 | 作用 |
---|---|---|
componentWillUnmount | 组件卸载(从页面中消失) | 执行清理工作(比如:清理定时器等) |
Hooks
本质:一套能够使函数组件更强大,更灵活的“钩子”
UI = f(data)
解决问题
- 组件的逻辑复用
- class组件自身的问题
useState
1 | import {useState} from 'react' |
- useState传的参数,为初始值,只有首次渲染生效
- 写法是一个数组的解构赋值
- 变量名可以自定义
- 位置不能换
- setCount 用新值换原值
- 两个绑定使用
- 不能嵌套在if/for/或者其他函数中
- 可以用箭头函数作为参数
useEffect
理解函数副作用
除了主作用就是副作用
主作用就是根据数据渲染UI
常见副作用
- 数据请求 ajax
- 手动修改dom
- localstorage操作
基础使用
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19import {useState, useEffect} from 'react'
function App(){
const [count, setCount] = useState(0)
useEffect(() => {
//定义副作用
document.title = count
})
useEffect(() => {
//定义副作用 空数组依赖项
document.title = count
}, [])
return (
<div>
<button onClick = {() => setCount(count + 1)}>{count} </button>
</div>
)
}依赖项控制副作用的执行时机
默认 首次渲染执行一次,当组件更新,副作用也会执行
参数,空数组 首次渲染执行一次
特定依赖项,在首次渲染执行,在依赖项变化后,也执行一次
清除副作用
return 一个箭头函数,在组件销毁时会执行
useRef
获取真实的dom或组件实例
1 | import {useEffect, useRef} from "react" |
useContext
实现步骤
- 使用
createContext
创建context对象 - 在顶层通过
Provider
提供数据 - 在底层通过
useContext
获取数据
Router
1 | yarn add react-router-dom@6 |
- BrowerRouter \ HashRouter
- Link
<Link to = '/'> </Link>
- Routes
- Route
<Route path = '/' element = {<Home/>}/>
编程式跳转
useNavigate
1 | import {useNavigate,useSearchParams, useParams} from 'react-router-dom' |
嵌套路由
默认二级
<Route index element = {}>
404 路由
<Route path='*' element = {<NotFound/>}>
Mobx
响应式状态管理
- 优势
- 简单
- 轻松实现最优渲染
- 架构自由
本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 White Horse Village!