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

react基础

news 2025/7/20 3:03:51

react组件传参

父传子

父组件
< ChildA value={this.state.num}></ChildA>
子组件
{props.value}接收父组件传入参数
ChildA.defaultProps={vaue:1}
defaultProps默认参数

子传父

props+回调函数形式
父
setNum=>v=>this.setState({num:v}) v形参
< ChildA value={this.state.num} setNum={this.setNum} />
子
<button onClick={()=>props.setNum(100)}></button>
通过props调用父组件传入的方法

跨组件

context上下文
提供Context.provider
使用Context.consumer

全局状态管理

redux
mobx

组件插槽

子组件通过{props.children}获取插槽内容

react生命周期

挂载阶段

01 构造函数constructor
02 static getDerivedStateFromProps（nextProps,prevState）props和 state更新会执行
03 render 函数渲染
04 componentDidMount（）组件已经挂载（dom渲染完成）
时间监听 dom操作 ajax 定时器

更新阶段

01 static getDerivedStateFromProps（nextProps,prevState）state和props更新时候会触发
02 shouldComponentUpdate（nextProps,nextState）组件是否更新
返回true执行渲染更新，返回false不渲染（优化)
03 render 渲染函数
04 getSnapshotBeforeUpdate（prevProps,prevState）
更新前获取快照，返回值是cdu的第三个参数
05 ==componentDidUpdate（prevProps,prevState,snap）==组件已经更新（dom渲染完毕）

卸载阶段

componentWillUnmount 组件将要卸载

优化

shouldComponentUpdate组件里面

this.state和prevState
this.props和prev
Props返回true更新返回false就不更新
可以比较值类型，也可以比较引用类型

PureComponent 实现

自动比较值类型props
PureComponent是一个React特有的组件，用于优化性能的更新。
它具有与React.Component相同的API，但它内部实现了一个 shouldComponentUpdate()，它会浅比较 props 和 state，以确定 UI 更新是否有必要。如果比较的结果没有发生变化，PureComponent 将跳过更新。

而Component则不会，它会每次都重新渲染，因此性能上会比PureComponent差。

组件

函数组件

props
类组件（有props state 生命周期 ref this）
推荐使用函数组件，函数组件只有props,不依赖state 适应性更强，更解构，
提高组件的复用性
也叫视图组件

类组件

state this 有限定组件的复用

Hooks

useState 使用状态

作用：模拟状态
导入
import {useState} from 'react'
使用
const [num,setNum]=useState(5)
num数据 setNum更新num数据的方法 5默认值
调用num:{num}
更新num:<button onClick={()=>setNum(num+2)}>

useEffect使用副作用

作用：模拟生命周期
模拟挂载完毕写空的数组

//   写空的数组是挂载  useEffect(()=>{// console.log("组件已经加载完毕：ajax dom操作 定时器 事件挂载");fetch("http://dida100.com/mi/list.php").then(res=>res.json()).then(res=>{console.log(res.result,"数据获取");setList(res.result)})},[])
模拟某些数据的更新+挂载 写第二个参数
// 挂载和更新 写第二个参数// useEffect(()=>{//   console.log("count 已经更新");// },[count,list])
模拟任意数据的挂载+更新
useEffect(()=>{console.log("任意数据的更新");})
模拟组件将要卸载
useEffect(()=>{return ()=>{//模拟组件将要卸载},[])