import React from 'react';
class Friend extends React.Component {
// 组件创建时调用,用于初始化组件的状态和绑定事件处理方法。
constructor(props) {
super(props);
this.state = { count: 1 };
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
console.log("点击----");
this.setState({ count: this.state.count + 1 });
}
// 组件在更新前调用,可以根据 props 来更新 state 的值。
//这个函数必须返回一个对象来更新状态,或者返回 null 表示不需要更新状态。
// static getDerivedStateFromProps(props, state) {
// if (props.count !== state.count) {
// return { count: props.count };
// }
// return null;
// }
// 组件在更新前调用,返回一个布尔值,表示是否需要重新渲染组件。
//如果返回 false,则不会触发 render 函数和后续的生命周期函数。
shouldComponentUpdate(nextProps, nextState) {
return nextState.count !== this.state.count;
}
// 组件渲染完成后调用,可以在这里进行网络请求、订阅事件等操作。
componentDidMount() {
console.log('Component mounted------2');
}
// 组件在更新前调用,返回一个值,这个值会作为第三个参数传递给
// componentDidUpdate 函数,用来做一些组件更新后的操作。
// getSnapshotBeforeUpdate(prevProps, prevState) {
// console.log('Component about to update');
// return { message: 'Snapshot!' };
// }
// :组件更新完成后调用,可以在这里进行一些 DOM 操作或其他副作用操作。
componentDidUpdate(prevProps, prevState, snapshot) {
console.log('Component updated');
console.log('Snapshot:', snapshot);
}
// 组件被卸载时调用,可以在这里进行一些清理操作,比如清除定时器、取消订阅等。
componentWillUnmount() {
console.log('Component unmounted');
}
render() {
// 组件渲染时调用,必须返回一个 React 元素(或 null)
console.log("render ---------1");
return (
<div>
<h1>朋友圈</h1>
<h1>Count: {this.state.count}</h1>
<button onClick={this.handleClick}>Click me!</button>
</div>
);
}
}
export default Friend