react 组件化如何理解
React 组件化的核心概念
组件化是React的核心思想之一，它将用户界面拆分为独立、可复用的代码单元。每个组件负责渲染UI的一部分，并通过组合形成完整的应用。
组件化的优势
复用性
组件可以像函数一样被多次调用，避免重复编写相同代码。例如按钮、输入框等基础UI元素只需开发一次即可多处使用。
隔离性
每个组件维护自己的状态和样式，修改某个组件不会意外影响其他部分。这种隔离性降低了代码耦合度。
可维护性
将复杂UI拆分为小组件后，每个文件的代码量更少，定位问题更快速。团队协作时不同成员可以并行开发不同组件。
组件类型
函数组件
通过JavaScript函数定义的组件，通常结合Hook使用：
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}类组件
使用ES6 class定义的组件，支持生命周期方法：
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}组件通信方式
Props传递
父组件通过props向子组件传递数据：
<ChildComponent message="Hello from parent" />状态提升
多个子组件需要共享状态时，将状态提升到最近的共同父组件中管理。
Context API
跨层级组件通信的解决方案，避免多层props传递：
const ThemeContext = React.createContext('light');
function App() {
return (
<ThemeContext.Provider value="dark">
<Toolbar />
</ThemeContext.Provider>
);
}组件设计原则
单一职责
每个组件应该只关注一个特定功能。例如表单组件和表单验证组件应当分离。
受控与非受控
表单元素建议使用受控组件，由React完全控制状态：
<input
type="text"
value={this.state.value}
onChange={this.handleChange}
/>组合优于继承
通过组件组合而非继承来复用代码功能。React官方推荐此模式。
组件生命周期
函数组件使用useEffect Hook处理副作用：
useEffect(() => {
// 相当于componentDidMount
return () => {
// 相当于componentWillUnmount
};
}, [dependencies]);类组件包含完整生命周期方法：
- componentDidMount
- componentDidUpdate
- componentWillUnmount
性能优化策略
React.memo
缓存函数组件避免不必要的重新渲染：
const MyComponent = React.memo(function MyComponent(props) {
/* 使用props渲染 */
});useCallback/useMemo
缓存函数和计算结果：
const memoizedCallback = useCallback(() => {
doSomething(a, b);
}, [a, b]);代码分割
动态导入组件实现懒加载：
const OtherComponent = React.lazy(() => import('./OtherComponent'));
