南京网络公司网站,重庆建站网站建设平台,2024新冠又来了吗,老域名做网站好吗react代码模块分为类组件和函数组件。
从语法和定义、内部状态管理、生命周期、性能、可读性和维护性、上下文、集成状态管理库等角度对比React中类组件和函数组件。
1、语法和定义
类组件#xff1a;
使用 ES6 的类#xff08;class#xff09;语法定义的 React 组件。…react代码模块分为类组件和函数组件。
从语法和定义、内部状态管理、生命周期、性能、可读性和维护性、上下文、集成状态管理库等角度对比React中类组件和函数组件。
1、语法和定义
类组件
使用 ES6 的类class语法定义的 React 组件。它们具有更复杂的功能特别是在 React 16.8 之前它们是唯一能够使用状态state和生命周期方法的组件。
特点
使用 class 关键字定义并继承自 React.Component。能够使用 state 来管理组件的内部状态。可以使用生命周期方法如 componentDidMount、componentDidUpdate 和 componentWillUnmount 等。通过 this.props 来访问传递给组件的属性props。
import React, { Component } from react;class HelloComponent extends Component {constructor(props) {super(props);this.state {count: 0};}increment () {this.setState({ count: this.state.count 1 });}render() {return (divpCount: {this.state.count}/pbutton onClick{this.increment}Increment/button/div);}
}export default HelloComponent;
函数组件Function Component
函数组件是使用 JavaScript 函数定义的 React 组件。自 React 16.8 以来函数组件通过引入 Hooks 可以实现状态管理和副作用处理功能上已经与类组件基本等价。
特点
使用 JavaScript 函数定义通常是更简单和推荐的方式。在函数组件中无法直接使用 this而是通过 Hooks如 useState 和 useEffect来管理状态和副作用。更加简洁通常用于无状态组件但在有状态需求时也可以使用 Hooks。
import React, { useState } from react;function HelloComponent() {const [count, setCount] useState(0);const increment () {setCount(count 1);};return (divpCount: {count}/pbutton onClick{increment}Increment/button/div);
}export default HelloComponent; 2、内部状态管理
类组件
使用类组件时可以通过组件的内部状态state来管理组件的数据。
import React from react;class Counter extends React.Component {constructor(props) {super(props);this.state { count: 0 };}render() {return (divpCount: {this.state.count}/pbutton onClick{() this.setState({ count: this.state.count 1 })}Increase/button/div);}
}export default Counter;
函数组件Function Component
函数组件可以使用hooksReact 16.8来管理内部状态。
useState钩子
import React, { useState } from react;function Counter() {const [count, setCount] useState(0);return (divpCount: {count}/pbutton onClick{() setCount(count 1)}Increase/button/div);
}export default Counter;
useReducer钩子适用于复杂的状态逻辑
import React, { useReducer } from react;function Counter() {const [count, dispatch] useReducer((state, action) {switch (action.type) {case increment:return state 1;case decrement:return state - 1;default:throw new Error();}}, 0);return (divpCount: {count}/pbutton onClick{() dispatch({ type: increment })}Increase/buttonbutton onClick{() dispatch({ type: decrement })}Decrease/button/div);
}export default Counter;
3、生命周期 类组件
类组件生命周期三个阶段挂载阶段更新阶段卸载阶段
挂载阶段执行顺序 constructor-componentWillMount-render-componentDidMount
更新阶段执行顺序: shouldComponentUpdate-componentWillUpdate-render-componentDidUpdate
销毁阶段: componentWillUnmount
import React from react;
import {Link} from react-router-dom
class Demo extends React.Component{constructor(props){super(props)console.log(constructor)}state {num:1}UNSAFE_componentWillMount(){console.log(componentWillMount)}componentDidMount(){console.log(componentDidMount)}shouldComponentUpdate(){console.log(shouldComponentUpdate)return true}UNSAFE_omponentWillUpdate(){console.log(componentWillUpdate)}componentDidUpdate(){console.log(componentDidUpdate)}componentWillUnmount(){console.log(componentWillUnmount)}Submit () {this.setState({num:this.state.num1})}render(){console.log(render)return(Link to/app1App1/Link//这里替换成自己的即可h3{this.state.num}/h3button onClick{this.Submit}改变/button/)}
}
export default Demo 函数组件Function Component
函数组件本质没有生命周期但是我们通过Hooks来模仿类组件当中的生命周期也是三个阶段
import { useState ,useEffect} from react
function App1 (){const [username ,setUsername] useState()const setChange event {setUsername(event.target.value);};// useEffect vue mounted 区别是只要视图更新就变化 感觉类似watch 但是他又是初始化的 时候第一个// useEffect((){},[])useEffect((){console.log(模拟componentDidMount第一次渲染, username)return () {console.log(模拟componentWillUnmount执行销毁后)}},[username])return(input value{username} onChange{setChange}/input/)
}
export default App1 4、性能
React类组件和函数组件之间的性能对比主要关注以下几个方面
角度类组件函数组件渲染性能在渲染时会进行shouldComponentUpdate生命周期检查需要使用React.memo或自定义比较逻辑来避免不必要的重渲染状态更新可以在shouldComponentUpdate中实现更细粒度的更新检查需要使用React.memo或自定义比较逻辑来避免不必要的重渲染组件的状态和生命周期复杂性可能会引入更多的对象和函数这可能会影响GC垃圾回收-内存占用因为其实例和可能的引用可能会占用更多内存- 5、可读性和维护性
可读性和维护性是评估代码质量的重要指标。 类组件的可读性和维护性可能不如函数组件。类组件中的this指向以及生命周期方法如componentDidMount可能会增加理解和维护的难度。 函数组件的可读性和维护性较好因为它们就像纯函数更接近于数学函数的定义更容易理解和维护。 对于简单的组件使用函数组件是首选因为它们更简单且易于理解。 对于需要管理状态或生命周期事件的组件类组件是必须的。 可以使用hooksReact 16.8来编写函数组件它们可以让你在不编写类的情况下使用state和其他React特性。
如类组件
class MyComponent extends React.Component {constructor(props) {super(props);this.state { count: 0 };}render() {return (divpYou clicked {this.state.count} times/pbutton onClick{() this.setState({ count: this.state.count 1 })}Click me/button/div);}
}
函数组件Function Component
function MyComponent() {const [count, setCount] React.useState(0);return (divpYou clicked {count} times/pbutton onClick{() setCount(count 1)}Click me/button/div);
}
在这个例子中函数组件MyComponent通过React.useState hook管理了状态使得它的定义更接近于类组件的行为同时更易于阅读和维护。
6、上下文
类组件可以通过this.context访问上下文。需要在类组件上使用static contextType声明期望访问的上下文或者使用contextTypes属性进行类型检查使用React 16.6之前的API。
import React, { Component } from react;class MyClassComponent extends Component {static contextType MyContext; // 使用最新的context APIcomponentDidMount() {const data this.context; // 访问上下文}render() {return divMy Class Component/div;}
}
函数组件Function Component可以使用useContext钩子从React获取上下文。
import React, { useContext } from react;function MyFunctionComponent() {const contextData useContext(MyContext); // 使用hooks获取上下文return divMy Function Component/div;
} 注意useContext只能在函数组件或者自定义钩子中使用。类组件不能使用这种方式访问上下文。
7、集成状态管理库
在React中类组件和函数组件可以使用状态管理库来管理复杂的状态。常见的状态管理库有Redux、MobX、Context API等。
8、总结类组件、函数组件的优缺点
角度类组件函数组件优点 完全控制可以访问所有React生命周期的钩子。 状态state管理可以维护和更新组件的状态。 复杂交互类组件可以管理更复杂的交互如动画、表单等。 性能优化使用shouldComponentUpdate生命周期方法来优化渲染。 轻量级函数组件不涉及创建类实例所带来的开销并且它们自然阻止了this上的问题。 简单代码通常更简洁更容易编写和维护。 HooksReact 16.8引入了Hooks使函数组件可以使用状态state和其他React特性。 缺点 与函数组件相比更多的开销如创建类实例、绑定this等。 容易产生this指向问题需要手动绑定this。 不能访问整个组件生命周期的所有钩子例如componentDidCatch和componentDidMount。 对于复杂的交云可能需要额外的库或自定义钩子。 不能使用ref属性因为React无法在每次渲染时返回同一个函数实例。
