















工程名称为reactdemojs

文件结构如下

创建一个父组件和子组件
父组件为
import React from "react";
import Child from "./Child";
export default class Life extends React.Component{
constructor(props) {
super(props);
this.state = {
count:0
};
}
handleAdd=() => {
this.setState(
{
count: this.state.count +=1
}
)
}
render() {
return <div>
<p>react生命周期 这里是父组件</p>
<button onClick={this.handleAdd}>点击一下</button>
<p>{this.state.count}</p>
<Child name="Tom" ></Child>
</div>
}
}
子组件为Child
import React from "react";
export default class Child extends React.Component{
constructor(props) {
super(props);
this.state = {
count : 0
}
}
componentDidMount() {
console.log("did mount");
}
shouldComponentUpdate(nextProps, nextState, nextContext) {
console.log("should update")
return true;
}
render() {
return <div>
<p>这里是子组件</p>
<p>{this.props.name}</p>
</div>
}
}
运行后效果为

此内容由惯性聚合(RSS阅读器)自动聚合整理,仅供阅读参考。 原文来自 — 版权归原作者所有。