react中getDerivedStateFromProps和componentDidUpdate配合使用
React 父组件通过props控制子组件执行不同的方法进行渲染
import React, { Component } from 'react';
class Item extends Component {
constructor(props) {
super(props)
this.state = {
content: '',
fun1: 0,
fun2: 0,
runFun: 'fun1',
shouldUpdateByFun1: false,
shouldUpdateByFun2: false,
myArgument: []
}
}
static getDerivedStateFromProps(nextProps, prevState) {
if (nextProps.fun1 !== prevState.fun1) {
return {
fun1: nextProps.fun1,
runFun: 'fun1',
shouldUpdateByFun1: true,
myArgument: nextProps.myArgument
}
} else if (nextProps.fun2 !== prevState.fun2) {
return {
fun2: nextProps.fun2,
runFun: 'fun2',
shouldUpdateByFun2: true,
myArgument: nextProps.myArgument
}
}
return null
}
componentDidUpdate() {
let { runFun, myArgument, shouldUpdateByFun1, shouldUpdateByFun2 } = this.state
if (runFun === 'fun1' && shouldUpdateByFun1) {
this.fun1(myArgument)
} else if (runFun === 'fun2' && shouldUpdateByFun2) {
this.fun2(myArgument)
}
}
//函数里可以包含ajax请求等复杂的逻辑
fun1(myArgument) {
let { fun1 } = this.props
setTimeout(() => {
this.setState({
content: 'from fun1:' + myArgument,
shouldUpdateByFun1: false
})
}, 1000)
console.log('fun1执行次数:' + fun1)
}
fun2(myArgument) {
let { fun2 } = this.props
setTimeout(() => {
this.setState({
content: 'from fun2:' + myArgument,
shouldUpdateByFun2: false
})
}, 1000)
console.log('fun2执行次数:' + fun2)
}
render() {
let { content } = this.state
return (
<div>
{content}
</div>
)
}
}
//父组件通过props控制子组件执行不同的方法进行渲染
class App extends Component {
constructor(props) {
super(props)
this.state = {
fun1: 0,
fun2: 0,
myArgument: []
}
}
render() {
let { fun1, fun2, myArgument } = this.state
return (
<div>
<Item fun1={fun1} fun2={fun2} myArgument={myArgument}/>
<button onClick={this.handleFun1.bind(this)}>Fun1</button>
<button onClick={this.handleFun2.bind(this)}>Fun2</button>
</div>
);
}
}
//事件
Object.assign(App.prototype, {
handleFun1() {
let { fun1 } = this.state
fun1 = fun1 + 1
this.setState({
fun1,
myArgument: ['xu', 'tongbao']
})
},
handleFun2() {
let { fun2 } = this.state
fun2 = fun2 + 1
this.setState({
fun2,
myArgument: ['徐', '同保']
})
}
})
export default App
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步