企业官网建设流程全解析

网站开发专业有什么工作,建设微信网站制作,网络营销和推广的方法,建公司网站一般多少钱你想了解的类组件#xff08;Class Component#xff09;和函数式组件#xff08;Functional Component#xff09;是 React 中两种核心的组件编写方式#xff0c;前者是 React 早期的主流方案#xff0c;后者则在 Hooks 推出后成为官方推荐的首选。本文会从语法结构、状…你想了解的类组件Class Component和函数式组件Functional Component是 React 中两种核心的组件编写方式前者是 React 早期的主流方案后者则在 Hooks 推出后成为官方推荐的首选。本文会从语法结构、状态管理、生命周期、性能、使用场景等维度帮你理清二者的核心区别以及不同场景下的选型思路。一、核心定义与语法差异1. 类组件Class Component类组件是基于 ES6 类语法创建的组件必须继承React.Component或React.PureComponent并通过render()方法返回 JSX。jsximport React from react; // 类组件示例 class ClassCounter extends React.Component { // 构造函数初始化状态、绑定方法 constructor(props) { super(props); // 初始化state this.state { count: 0 }; // 手动绑定this避免回调中this丢失 this.handleIncrement this.handleIncrement.bind(this); } // 自定义方法 handleIncrement() { // 修改状态必须用setState this.setState({ count: this.state.count 1 }); } // 必须实现render方法 render() { return ( div p计数{this.state.count}/p button onClick{this.handleIncrement}1/button /div ); } }2. 函数式组件Functional Component函数式组件本质是一个普通的 JavaScript 函数接收props作为参数直接返回 JSX。HooksReact 16.8推出后函数式组件才具备了状态管理和生命周期能力。jsximport React, { useState } from react; // 函数式组件示例 function FunctionalCounter(props) { // 用useState Hook管理状态 const [count, setCount] useState(0); // 自定义方法无需绑定this const handleIncrement () { // 直接修改状态 setCount(count 1); }; // 直接返回JSX无需render方法 return ( div p计数{count}/p button onClick{handleIncrement}1/button /div ); }二、核心区别对比为了让你更清晰地对比我整理了关键维度的差异表对比维度类组件Class Component函数式组件Functional Component语法结构基于 ES6 Class需继承 React.Component普通 JS 函数语法更简洁无冗余代码状态管理用this.state和setState()管理状态用useState/useReducerHooks 管理状态this 指向存在 this需手动绑定或用箭头函数无 this避免 this 指向混乱问题生命周期有明确的生命周期方法componentDidMount 等用useEffectHook 模拟所有生命周期逻辑性能优化可继承PureComponent或实现shouldComponentUpdate用React.memo浅比较 propsuseMemo/useCallback优化代码复用依赖高阶组件HOC、Render Props依赖 Hooks更简洁无嵌套地狱错误边界仅类组件可作为错误边界实现 componentDidCatch无法直接作为错误边界需包裹类组件官方推荐仅兼容老项目不推荐新开发React 16.8 官方首选方案三、关键能力深度解析1. 状态管理差异类组件状态是对象形式this.state { count: 0, name: test }修改状态必须用setState()且setState是异步更新合成事件中可能需要依赖前一个状态jsx// 正确依赖前状态更新 this.setState(prevState ({ count: prevState.count 1 }));无法在函数中直接捕获最新状态需用 ref 或 setState 回调。函数式组件状态可以是任意类型数字、字符串、对象、数组等useState按需求拆分jsxconst [count, setCount] useState(0); const [user, setUser] useState({ name: 张三 });setState是直接替换而非合并更新对象 / 数组时需手动合并jsx// 更新对象合并原有属性 setUser(prev ({ ...prev, age: 25 }));能通过闭包直接捕获最新状态但需注意依赖项问题。2. 生命周期模拟函数式组件 vs 类组件类组件的生命周期方法在函数式组件中都能通过useEffect模拟对应关系如下类组件生命周期函数式组件实现方式componentDidMountuseEffect (() { /* 逻辑 */ }, [])componentDidUpdateuseEffect (() { /* 逻辑 */ }, [依赖项])componentWillUnmountuseEffect (() { return () { /* 清理 */ } }, [])componentDidMount componentDidUpdateuseEffect (() { /* 逻辑 */ })示例模拟类组件的生命周期jsx// 函数式组件模拟生命周期 function LifecycleDemo() { const [count, setCount] useState(0); // componentDidMount仅挂载时执行 useEffect(() { console.log(组件挂载); // componentWillUnmount清理函数 return () { console.log(组件卸载); }; }, []); // componentDidUpdatecount变化时执行 useEffect(() { console.log(count更新为, count); }, [count]); return ( div p{count}/p button onClick{() setCount(count 1)}1/button /div ); }3. 性能优化差异类组件优化继承React.PureComponent自动对props和state做浅比较避免不必要的重渲染手动实现shouldComponentUpdate自定义比较逻辑返回false阻止重渲染。函数式组件优化React.memo高阶组件对props做浅比较类似PureComponentuseMemo缓存计算结果避免每次渲染重复计算useCallback缓存函数引用避免因函数重新创建导致子组件重渲染。示例函数式组件性能优化jsx// React.memo浅比较props const MemoizedChild React.memo(({ onIncrement }) { console.log(子组件渲染); return button onClick{onIncrement}1/button; }); function Parent() { const [count, setCount] useState(0); // useCallback缓存函数引用 const handleIncrement useCallback(() { setCount(count 1); }, [count]); // useMemo缓存计算结果 const doubleCount useMemo(() { return count * 2; }, [count]); return ( div p计数{count}双倍{doubleCount}/p MemoizedChild onIncrement{handleIncrement} / /div ); }四、使用场景与选型建议1. 优先使用函数式组件的场景新项目开发React 官方推荐代码更简洁、易维护需要复用逻辑Hooks如useState、useEffect、自定义 Hook比 HOC/Render Props 更优雅团队协作降低学习成本无需理解 this、生命周期减少 bug性能敏感场景通过React.memouseCallback/useMemo可精准优化。2. 仍需使用类组件的场景维护老项目老代码基于类组件无需强行重构实现错误边界函数式组件无法直接实现componentDidCatch需用类组件jsxclass ErrorBoundary extends React.Component { state { hasError: false }; static getDerivedStateFromError() { return { hasError: true }; } componentDidCatch(error, info) { console.log(捕获错误, error, info); } render() { if (this.state.hasError) { return div出错了/div; } return this.props.children; } } // 使用包裹函数式组件 ErrorBoundary FunctionalComponent / /ErrorBoundary极少数复杂场景如需要深度定制shouldComponentUpdate且 Hooks 优化成本更高。五、迁移指南类组件 → 函数式组件如果需要将类组件迁移为函数式组件可遵循以下步骤替换类定义为函数移除class、extends React.Component改为函数接收props替换 state将this.state拆分为多个useState替换生命周期用useEffect模拟componentDidMount/DidUpdate/WillUnmount移除 this 绑定函数内方法无需绑定 this直接定义箭头函数或普通函数替换 this.props直接使用函数参数props性能优化用React.memo替代PureComponentuseCallback/useMemo替代手动优化。迁移示例jsx// 类组件 class OldComponent extends React.Component { state { text: }; componentDidMount() { console.log(挂载); } handleChange (e) { this.setState({ text: e.target.value }); }; render() { return input value{this.state.text} onChange{this.handleChange} /; } } // 迁移后的函数式组件 function NewComponent(props) { const [text, setText] useState(); useEffect(() { console.log(挂载); }, []); const handleChange (e) { setText(e.target.value); }; return input value{text} onChange{handleChange} /; } // 性能优化添加React.memo const MemoizedNewComponent React.memo(NewComponent);总结核心差异类组件基于 ES6 Class依赖this和生命周期方法函数式组件是纯函数依赖 Hooks 实现状态和生命周期语法更简洁、无 this 陷阱。选型原则新项目优先用函数式组件 Hooks老项目 / 错误边界场景保留类组件。优化方式类组件用PureComponent/shouldComponentUpdate函数式组件用React.memouseCallback/useMemo。掌握二者的区别和选型思路能让你在 React 开发中更灵活地选择合适的组件形式写出更高效、易维护的代码。 **觉得有用的点点关注谢谢~**