react 组件化如何理解
组件化的核心概念
React 的组件化是将用户界面拆分为独立、可复用的代码单元。每个组件封装自身的逻辑、样式和状态，通过组合方式构建复杂界面。组件化开发的核心是单一职责原则，即每个组件只关注特定功能或视图部分。
组件的两种形式
-
函数组件
通过 JavaScript 函数定义，接收props作为参数，返回 React 元素。适用于无状态或简单逻辑的场景。function Welcome(props) { return <h1>Hello, {props.name}</h1>; } -
类组件
使用 ES6 类定义，包含生命周期方法和内部状态（state），适用于复杂交互逻辑。
class Welcome extends React.Component { render() { return <h1>Hello, {this.props.name}</h1>; } }
组件的组合与复用
- 父子通信：通过
props向下传递数据，父组件控制子组件行为。 - 子父通信：通过回调函数将子组件事件传递到父组件。
- Context API：跨层级组件共享数据，避免多层
props传递。
状态管理
- 组件内状态：使用
useState（函数组件）或this.state（类组件）管理局部状态。 - 全局状态：通过 Redux、MobX 或 React 的
useReducer管理跨组件共享状态。
组件生命周期（类组件）
- 挂载阶段：
componentDidMount用于 DOM 操作或数据请求。 - 更新阶段：
componentDidUpdate响应props或state变化。 - 卸载阶段：
componentWillUnmount清理定时器或事件监听。
最佳实践
- 单一职责：避免组件过度臃肿，拆分逻辑到更小组件。
- 受控与非受控组件：表单元素优先使用受控模式（数据由 React 控制）。
- 性能优化：使用
React.memo或useMemo避免不必要的渲染。
示例：组合组件
function App() {
return (
<div>
<Header title="Dashboard" />
<Content data={fetchData()} />
</div>
);
}通过组件化，React 应用更易维护、测试和扩展。
