状态（State）：
1. 定义状态：
在React中，你可以使用useState Hook（对于函数组件）或在类组件中使用this.state 来定义组件的状态。
函数组件中使用useState：
import React, { useState } from 'react';
function MyComponent() {
const [count, setCount] = useState(0);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>
Increment
</button>
</div>
);
}
类组件中使用this.state：
import React, { Component } from 'react';
class MyComponent extends Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}
render() {
return (
<div>
<p>Count: {this.state.count}</p>
<button onClick={() => this.setState({ count: this.state.count + 1 })}>
Increment
</button>
</div>
);
}
}
2. 更新状态：
使用setState 方法来更新状态。注意，setState 是异步的，因此你应该避免直接依赖于 this.state 的值进行状态更新。
生命周期（Lifecycle）：
对于类组件，React 提供了一组生命周期方法，这些方法允许你在组件的不同阶段执行特定的代码。
常用的生命周期方法：
- componentDidMount： 组件挂载后立即调用。
- componentDidUpdate： 组件更新后调用。
- componentWillUnmount： 组件将被卸载前调用。
import React, { Component } from 'react';
class MyComponent extends Component {
componentDidMount() {
console.log('Component is mounted');
}
componentDidUpdate(prevProps, prevState) {
console.log('Component is updated');
}
componentWillUnmount() {
console.log('Component will unmount');
}
render() {
return (
<div>
{/* Component content */}
</div>
);
}
}
请注意，随着React Hooks的引入，函数组件也可以拥有生命周期方法，如useEffect来代替类组件的生命周期方法。
以上是关于React中状态和生命周期的基本介绍。
转载请注明出处：http://www.zyzy.cn/article/detail/4846/React