react如何定义初始状态
在 React 中定义初始状态的方法
React 提供了多种方式定义组件的初始状态，具体取决于使用的组件类型（类组件或函数组件）以及 React 版本。以下是常见的方法：
类组件中使用 state 属性
在类组件中，可以通过在构造函数中初始化 this.state 来定义初始状态：
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0,
name: 'Initial Name'
};
}
}类组件的简化语法（ES7+）
如果使用支持类属性的 Babel 插件，可以直接在类中定义 state，无需构造函数：
class MyComponent extends React.Component {
state = {
count: 0,
name: 'Initial Name'
};
}函数组件中使用 useState Hook
在函数组件中，使用 useState Hook 来定义初始状态：
import { useState } from 'react';
function MyComponent() {
const [count, setCount] = useState(0);
const [name, setName] = useState('Initial Name');
}延迟初始化状态（惰性初始 state）
如果初始 state 需要通过复杂计算得到，可以传递一个函数给 useState 来优化性能：
const [state, setState] = useState(() => {
const initialState = someExpensiveComputation(props);
return initialState;
});使用 Context 提供全局初始状态
对于需要在多个组件间共享的初始状态，可以使用 Context API：
const MyContext = React.createContext({
theme: 'light',
user: null
});
function App() {
return (
<MyContext.Provider value={{theme: 'dark', user: {name: 'John'}}}>
<ChildComponent />
</MyContext.Provider>
);
}状态管理库中的初始状态
在使用 Redux 等状态管理库时，通常在 reducer 中定义初始状态：
const initialState = {
todos: [],
visibilityFilter: 'SHOW_ALL'
};
function todoReducer(state = initialState, action) {
switch (action.type) {
// 处理各种 action
default:
return state;
}
}注意事项
- 在类组件中，直接修改
this.state不会触发重新渲染，必须使用this.setState() - 函数组件中每次渲染都会调用
useState，但 React 会保留当前 state 值 - 复杂对象的初始状态应考虑使用不可变更新模式
