react如何定义初始状态
在类组件中定义初始状态
使用类组件时，可以通过在构造函数中初始化this.state来定义初始状态。这是React类组件的传统方式。
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0,
name: 'Initial Name'
};
}
}构造函数是可选的，如果不需要初始化状态或绑定方法，可以省略构造函数。但必须调用super(props)，否则this.props在构造函数中会是未定义。
在函数组件中使用useState定义初始状态
对于函数组件，React Hooks提供了useState来管理状态。传递给useState的参数就是初始状态值。
import React, { useState } from 'react';
function MyComponent() {
const [count, setCount] = useState(0);
const [name, setName] = useState('Initial Name');
}初始状态可以是任何JavaScript值：数字、字符串、布尔值、数组、对象等。每次渲染时，useState都会返回当前状态和更新状态的函数。
延迟初始化状态
对于需要复杂计算的初始状态，可以传递函数给useState来延迟初始化。这可以避免在每次渲染时都执行昂贵的计算。
const [state, setState] = useState(() => {
const initialState = calculateExpensiveValue(props);
return initialState;
});这种方式仅在初始渲染时执行计算函数，后续渲染会直接使用存储的状态值。
状态更新注意事项
直接修改this.state在类组件中不会触发重新渲染，必须使用this.setState()。在函数组件中，必须使用状态更新函数（如setCount）。
状态更新可能是异步的，React可能会批量处理多个setState调用以提高性能。如果需要基于前一个状态更新，应该使用函数式更新。
// 类组件
this.setState((prevState) => ({
count: prevState.count + 1
}));
// 函数组件
setCount(prevCount => prevCount + 1);状态提升模式
当多个组件需要共享状态时，可以将状态提升到它们最近的共同父组件中。这使得状态管理更加集中和可控。
父组件通过props向下传递状态，子组件通过回调函数向上通知状态变更。这种模式有助于保持数据流的单向性和可预测性。
