React class
在react16之后就很少用到类组件了
基本写法
export default class App extends React.Component{
render(){
return (
<div>
<Header username="lemon"/>
<Greeting/>
</div>
)
}
}
类组件中的状态管理
类组件中的状态都被写在一个实例变量中,而且该变量必须被命名为state,是一个对象,要保存的状态都是这个对象的属性
import React from "react"
// #1
export default class App extends React.Component{
state={
goOut:"Yes"
}
handleClick=()=>{
this.setState(prevState=>{
return {
goOut:prevState.goOut==="Yes"?"No":"Yes"
}
})
}//如果类组件中的方法没有用到this的话可以不定义为箭头函数
render(){
return (
<div>
<h1>Should I go out?</h1>
<div onClick={this.handleClick}>
<h2>{this.state.goOut}</h2>
</div>
</div>
)
}
}
修改某个状态
import React from "react"
// #1
export default class App extends React.Component{
constructor(){
super()
this.state={
firstName:"Wang",
lastName:"lblack",
phone:"xxx",
isFavorite:false,
isFavoriteIcon:"false"
}
}
changeFavorite=()=>{
this.setState(prevState=>({
// ...prevState,//在类组件中不需要拷贝没有改变的属性,而在函数式组件中需要拷贝
isFavorite:prevState.isFavorite?false:true
}))
console.log(this.state.isFavorite)
}
render(){
return (
<div>
<h1>{this.state.firstName} {this.state.lastName}</h1>
<p>phone</p>
<button onClick={this.changeFavorite}>click </button>
</div>
)
}
}
类组件中的this
在类组件内事件函数内部的this会丢失,指向undefined
- 使用箭头函数定义方法
- 在constructor中修正this指向
constructor(){
super()
this.state={
count:0
}
this.add=this.add.bind(this)
this.subtract=this.subtract.bind(this)
}
- 使用bind修正this
<button onClick={this.add.bind(this)}>+</button>
- 使用箭头函数修正this
<button onClick={()=>this.add()}>+</button>
类组件的生命周期
mounting --> updating --> unmounting
组件安装时的调用顺序
constructor --> getDerivedStateFromProps --> render --> componentDidMount
getDerivedStateFromProps
在渲染 DOM 中的元素之前调用 getDerivedStateFromProps() 方法,参数为props,state
根据父组件传入的props修改state
Lifecycle method should be static: getDerivedStateFromProps
static getDerivedStateFromProps(props){
return {color:props.color}
}
componentDidMount()
componentDidMount(){//放入组件第一次渲染后立即运行的代码,比如调用api
fetch("https://swapi.dev/api/people/1")
.then(res=>console.log(res))
.then(data=>console.log(data))
}
组件更新时的调用顺序
getDerivedStateFromProps --> shouldComponentUpdate --> render --> getSnapshotBeforeUpdate --> componentDidUpdate()
shouldComponentUpdate
返回一个bool,指定react是否要重新渲染,默认为true
shouldComponentUpdate(){
return false
}
getSnapshotBeforeUpdate
获取这次更新前state的值
getSnapshotBeforeUpdate(prevProps,prevState){
document.getElementById("div1").innerHTML="Color before the update:"+prevState.color
}
componentDidUpdate()
组件更新后调用
componentDidUpdate(){
document.getElementById("div2").innerHTML="Color after the update:"+this.state.color
}
组件卸载
componentWillUnmount
组件即将从 DOM 中移除时调用,函数完成后卸载组件
class Container extends React.Component {
constructor(props) {
super(props);
this.state = {show: true};
}
delHeader = () => {
this.setState({show: false});
}
render() {
let myheader;
if (this.state.show) {
myheader = <Child />;
};
return (
<div>
{myheader}
<button type="button" onClick={this.delHeader}>Delete Header</button>
</div>
);
}
}
class Child extends React.Component {
componentWillUnmount() {
alert("The component named Header is about to be unmounted.");
}
render() {
return (
<h1>Hello World!</h1>
);
}
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Container />);