上一篇
十二、react的生命周期
挂载
挂载-01- constructor构造函数
constructor(props) {
super(props);
this.state = { num: 5 };
// console.log("挂载-01- constructor构造函数");
}
挂载-02-getDerivedStateFromProps
static getDerivedStateFromProps(props, state) {
console.log("挂载-02-getDerivedStateFromProps从最新props更新state");
// get 获取Derived送达State状态from从Props属性
return state;
}
挂载-03-render 渲染
render() {
console.log('挂载-03-render 渲染');
return (
<div>
<h1>react生命周期</h1>
<button onClick={(e) => this.setState({ num: this.state.num + 1 })}>
{this.state.num}
</button>
<Life num={this.state.num}></Life>
</div>
);
}
挂载-04-componentDidMount组件完毕
componentDidMount() {
//组件已经挂载
//component组件Did已经Mount挂载
//Ajax请求,可以获取dom节点,事件监听,定时器
console.log("挂载-04-componentDidMount组件完毕");
}
更新
更新-01-getDerivedStateFromProps
static getDerivedStateFromProps(props, state) {
// get 获取Derived送达State状态from从Props属性
// console.log("更新-01-getDerivedStateFromProps从最新props更新state");
return state;
}
更新-02-shouldComponentUpdate
shouldComponentUpdate(nextProps, nextState) {
console.log("更新-02-shouldComponentUpdate");
//返回 true 允许组件更新视图,否则不允许
//should 是否 Component组件 update更新
return true;
}
更新-03-render 渲染
render() {
console.log("更新-03-render 渲染");
return (
<div>
<h1>react生命周期</h1>
<button onClick={(e) => this.setState({ num: this.state.num + 1 })}>
{this.state.num}
</button>
<Life num={this.state.num}></Life>
</div>
);
}
更新-04 getSnapshotBeforeUpdate
getSnapshotBeforeUpdate(prevProps, prevState) {
// console.log("更新-04 getSnapshotBeforeUpdate更新前获取快照");
//返回一个值,是componentDidupdate第三个参数
return { name: "mumu", age: 18 };
}
更新-05 componentDidUpdate
componentDidUpdate(prevProps, prevState, snap) {
// console.log("更新-05 componentDidUpdate组件已经更新", snap);
}
卸载
componentDidMount() {
//组件已经挂载
//component组件Did已经Mount挂载
//Ajax请求,可以获取dom节点,事件监听,定时器
console.log("挂载-04-componentDidMount组件完毕");
}
完整代码
import React, { Component } from "react";
//在APP中引入life
import Life from "./Life.js";
class APP extends Component {
constructor(props) {
super(props);
this.state = { num: 5 };
// console.log("挂载-01- constructor构造函数");
}
static getDerivedStateFromProps(props, state) {
// console.log("挂载-02-getDerivedStateFromProps从最新props更新state");
// get 获取Derived送达State状态from从Props属性
// console.log("更新-01-getDerivedStateFromProps从最新props更新state");
return state;
}
shouldComponentUpdate(nextProps, nextState) {
// console.log("更新-02-shouldComponentUpdate");
//返回 true 允许组件更新视图,否则不允许
//should 是否 Component组件 update更新
return true;
}
componentWillUnmount() {
//组件将要卸载
//component 组件 will 将要 Unmont 卸载
//移除dom监听,停止定时器
}
render() {
// console.log('挂载-03-render 渲染');
// console.log("更新-03-render 渲染");
return (
<div>
<h1>react生命周期</h1>
<button onClick={(e) => this.setState({ num: this.state.num + 1 })}>
{this.state.num}
</button>
<Life num={this.state.num}></Life>
</div>
);
}
getSnapshotBeforeUpdate(prevProps, prevState) {
// console.log("更新-04 getSnapshotBeforeUpdate更新前获取快照");
//返回一个值,是componentDidupdate第三个参数
return { name: "mumu", age: 18 };
}
componentDidUpdate(prevProps, prevState, snap) {
// console.log("更新-05 componentDidUpdate组件已经更新", snap);
}
componentDidMount() {
//组件已经挂载
//component组件Did已经Mount挂载
//Ajax请求,可以获取dom节点,事件监听,定时器
// console.log("挂载-04-componentDidMount组件完毕");
}
}
export default APP;
Life中的代码
import React, { PureComponent } from "react";
//PureComponent保障了优化的下限
class Life extends PureComponent {
constructor(props) {
super(props);
this.state = { n: 100 };
}
static getDerivedStateFromProps(props, state) {
console.log("props要更新");
return state;
}
render() {
console.log("子组件渲染render");
return (
<div>
<h3>life子组件</h3>
<p onClick={() => this.setState({ n: this.state.n + 1 })}>
接收的num:{this.state.n}
</p>
</div>
);
}
}
export default Life;
十三、reactHook
定义:让函数组件模拟类组件的生命周期和state
01、useState
import { useState } from "react";
//useState 使用状态state 模拟class组件的state
function App() {
//定义num和设置num的方法从useState 默认值是10
const [num, setNum] = useState(10);
return (
<div>
<button onClick={()=>setNum(num+1)}>{num}</button>
</div>
);
}
export default App;
02、useEffect
import { useState, useEffect } from "react";
//useState 使用状态state 模拟class组件的state
//useEffect使用副作用(模拟生命周期) 组件已经挂载,组件已经更新
function App() {
//定义num和设置num的方法从useState 默认值是10
const [num, setNum] = useState(10);
const [str, setStr] = useState("我喜欢");
//目标:把num存储起来,当组件创建完毕获取num
const add = (e) => {
setNum(num + 1);
//存储起来
localStorage.setItem("num", num);
};
useEffect(function () {
console.log("组件已经挂载,组件已经更新");
var n = localStorage.getItem("num") || 10;
setNum(n * 1);
return () => console.log("组件将要卸载");
}, []);
return (
<div>
<h1>Hook</h1>
<button onClick={add}>{num}</button>
</div>
);
}
export default App;
03、useRef
import { useState, useEffect, useRef } from "react";
//useState 使用状态state 模拟class组件的state
//useEffect使用副作用(模拟生命周期) 组件已经挂载,组件已经更新
//useRef 引用dom
function App() {
//定义num和设置num的方法从useState 默认值是10
const [num, setNum] = useState(10);
const [str, setStr] = useState("我喜欢");
//目标:把num存储起来,当组件创建完毕获取num
const add = (e) => {
setNum(num + 1);
//存储起来
localStorage.setItem("num", num);
};
useEffect(
function () {
console.log("组件已经挂载,组件已经更新");
var n = localStorage.getItem("num") || 10;
setNum(n * 1);
return () => console.log("组件将要卸载");
},
[num]
);
const inpRef = useRef();
return (
<div>
<h1>Hook</h1>
<button onClick={add}>{num}</button>
<button onClick={(e) => setStr(str + "你的")}>{str}</button>
<input type="text" ref={inpRef} />
<button onClick={() => alert(inpRef.current.value)}>获取</button>
</div>
);
}
export default App;