网上拿货做哪个网站好,无锡工程建设信息网站,万网虚拟主机上传网站,网站做好了后怎么办React 中组件主要分为函数式组件和类式组件两种类型。
一、函数式组件
函数式组件 (也称无状态组件#xff0c;没有内部状态state#xff0c;16.8版本推出hooks后可使用useState来管理) 就是通过函数编写形式去实现一个React组件#xff0c;是React中定义组件最简单的方式…React 中组件主要分为函数式组件和类式组件两种类型。
一、函数式组件
函数式组件 (也称无状态组件没有内部状态state16.8版本推出hooks后可使用useState来管理) 就是通过函数编写形式去实现一个React组件是React中定义组件最简单的方式。
// 定义函数式组件
import React from reactfunction MyComponent() {return div我是函数式组件.../div
} export default MyComponent
二、类式组件
类式组件就是通过ES6类的编写形式去编写组件该类必须继承React.Component 如果想要访问父组件传递过来的参数可通过 this.props方式去访问。
// 类式组件
import React, { Component } from reactclass MyComponent extends Component {constructor(props) {super(props)}render(){return div我是类式组件.../div}
}export default MyComponent 说明类式组件中必须实现render方法在return中返回React对象。
三、函数式组件和类式组件的区别
类组件和函数组件最大的不同还在于代码思路方面的不同。类组件是面向对象编程思维方式函数组件是面向过程编程思维方式。React的设计思路更推崇组合而不是继承。在类组件中大量使用继承会造成组件过重功能难以拆分。
特性函数式组件类式组件 语法函数类内部状态 (state)不支持支持生命周期方法不支持 (需借助 hooks)支持 (componentDidMount, componentDidUpdate 等)引入外部状态 (props)支持支持副作用处理 (如 useEffect)支持支持代码复用可以使用 Hooks 实现可以使用继承、高阶组件等方式实现状态管理工具支持支持性能通常更轻量React 16.8 中引入的 Hooks 使其更强大在某些情况下可能更快但具体取决于实现方式
说明React Hooks 是对 React 函数式组件的一种扩展通过一些特殊的函数让函数式组件拥有类式组件才拥有的能力。 常用的官方 hooks 有 useRef、useState、useEffect等。
函数式组件和类式组件管理状态方式如下
// 类式组件 - 使用 setState 管理状态
import React, { Component } from reactclass MyComponent extends Component {state {name: 张三丰}changeName () {this.setState({name: 王新焱})}render() {return (div我是{this.state.name}/divbutton onClick{this.changeName}修改姓名/button)}
}export default MyComponent// 函数式组件 - 使用 hooks 管理状态
import React, { useState, useEffect } from reactfunction MyComponent() {// hookslet [name, setName] useState(张三丰)// hooks -对象形式let [name2, setName2] useState({name: 张三丰,age: 180,address: 武当山})// 修改姓名function changeName() {setName(() 王新焱)setName2(() ({name: wxy, age: 30, address: 黄冈}))}// hooksuseEffect(() {console.log(函数式组件生命周期...)},[])return (divp我是函数式组件/pbutton onClick{changeName}修改姓名/buttondiv我的名字是{name}/divdiv我的名字是{name2.name},我的年龄{name2.age} 我的地址 {name2.address}/div/div)
}export default MyComponent
四、未来趋势
”类组件“的模式并不能很好的适应未来的趋势主要是以下几点
①.this的模糊性
②.业务逻辑散落在生命周期中
③.React 的组件代码缺乏标准的拆分方式。 而使用 Hooks 的函数组件可以提供比原先更细粒度的逻辑组织复用且能更好地适应时间切片与并发模式。
React 16.8 版本推出了Hooks 使函数式组件拥有类组件的功能比如生命周期阶段
componentDidMount VS useEffect
componentDidUpdate VS useEffect
shouldComponentUpdate VS useMemo
函数式组件即可使用替代方案来实现类式组件中的生命周期钩子函数。
从未来趋势看由于官方React Hooks的推出生命周期概念的淡出函数组件可以完全取代类组件。其次继承并不是组件最佳的设计模式官方更推崇”组由于继承“的设计概念所以类组件在这方面的优势也在淡出函数组件成了社区未来主推的方案函数组件本身轻量简单在hooks的基数上提供了比原先更细粒度的逻辑组织与复用更能适应React的未来发展。
