React加强认知

react生命周期

挂载：

constructor 构造函数

static getDerivedStateFromProps(nextProps, PrevState)

state和props 更新时候会触发

render 渲染

componentDidMount （） 组件已经挂载 （dom渲染完成）

更新

static getDerivedStateFromProps(nextProps, PrevState)

state和props 更新时候会触发

shouldComponentUpdate(nextProps, nextState)

组件是否更新 返回true更新反之不更新

render渲染函数

getSnapshotBeforeUpdate(prevProps, prevState)

更新前获取快照 返回值是cdu的第三个参数

componentDidUpdate(prevProps, prevState, snap)

组件已经更新 （dom渲染完毕

卸载

componentWillUnmount()

组件将要卸载

react优化方案

shouldComponentUpdate

shouldComponentUpdate(nextProps, nextState) {

if (this.props.value === nextProps.value) {

return false

} else {

return true

}

组件

函数组件

props

类组件

props state ref 生命周期

state,this 有限定组件的复用

组件推荐使用函数组件：

只有props 不依赖state，适应性更强，更解构

试图组件

Hooks

useState 使用 状态

作用:模拟生命周期

导出：import { useState,} from "react";

使用 const [count, setCount] = useState(5);

count是数据名称 setcount是调用前面数据的方法 useState(这里填count的数据类型)

调用：num:{num}

更新: num<button onClick={()=>setNum(num+2)}

useEffect

作用：模拟生命周期

模拟挂载完毕

useEffect(()=>{

模拟挂载完毕

},[])

useEffect(()=>{

模拟num挂载+更新

},[num])

useEffect(()=>{

模拟任意数据挂载加更新

})

模拟组件将要卸载

useEffect(()=>{

return ()=>{

模拟组件将要卸载

}

})

组件传参

父传子

父

import React, { Component } from "react";

import ChildB from "./components/ChildB";

import Modal from "./components/Modal";

class App extends Component {

state = {

// 控制是否弹框

visible: false,

};

// 设置visible为false 的方法

onclose = () => this.setState({ visible: false });

render() {

return (

<div>

{/* 单击按钮设置visible 为true */}

<button onClick={() => this.setState({ visible: true })}>

显示弹框

</button>

{/* 使用Modal弹框 传入属性 onclose 关闭弹框方法 visible控制弹框是否显示 */}

<Modal onclose={this.onclose} visible={this.state.visible}>

<p>弹框内容，插槽形式</p >

</Modal>

<h2>组件的插槽</h2>

<ChildB>

<p>掉头发</p >

<p>学前端</p >

</ChildB>

</div>

);

}

}

export default App;

子

import React, { Component } from "react";

class ChildB extends Component {

constructor(props) {

super(props);

this.state = {};

}

render() {

return (

<div>

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

{this.props.children}

</div>

);

}

}

export default ChildB;

子传父

子

function ChildA(props) {

return (

<div>

<p>

{/* 父传子 props */}

ChildA 子组件{props.value}

</p >

{/* 子传父 通过props的回调函数实现 */}

<button onClick={()=>{props.setNum(100)}} >修改父组件的值为100</button>

</div>

)

}

export default ChildA

// 不写默认 传值

ChildA.defaultProps={value:1}

父

import ChildA from "./components/ChildA";

import React, { Component } from "react";

class App extends Component {

state = {

num: 5,

};

setNum = (v) => this.setState({ num: v });

render() {

return (

<div>

{/* 组件大写 组件可以被重复调用 首字母必须大写 */}

{/*把函数当作props传递给组件 */}

<ChildA

setNum={this.setNum}

value={this.state.num}></ChildA>

<ChildA></ChildA>

</div>

);

}

}

export default App;