[react] react声明组件有哪几种方法,各有什么不同?

haizhilin2013
2019-07-13 05:05:26 星期六
react
                    
                        
react声明组件有哪几种方法,各有什么不同?
Comments per page
< Page 1 / 1 >
wesweet 2019-10-28 06:27:15

1:函数式声明组件
2:class 类继承声明组件
3:通过react.createClass创建组件

MagicalBridge 2019-12-26 02:43:24
vkboo 2021-06-25 00:34:25
  1. 用类声明
  • 继承自React.Component,实例中挂载了父类的方法和属性如this.setState,this.props
  • 可以维护自己的state
  • 有生命周期函数
  • 父组件可以通过ref获取用类声明的子组件的实例
  • 必须有render方法,并且需要返回一个ReactNode
  1. 函数式声明
  • 默认没有自己的状态,props需要使用函数的参数传入
  • 可以使用hooks
  • 使用useState维护自己的状态
  • 没有生命周期,使用useEffect模拟组件的声明周期
  • 父组件引用了函数式的子组件,父组件无法获取子组件的实例,如果需要获取子组件的中的DOM节点,使用使用React.forwardRef进行转发,如果还想获取子组件中定义的属性/方法,还需要使用useImperativeHandle的Hook
  • 函数必须返回一个ReactNode作为这个组件的UI描述
排行榜
今日答题答题排行
    未答的题
    更多>
      【关注作者公众号】 以面试驱动学习--前端剑解
      【公众号推荐】 不折腾的前端和咸鱼有什么区别

      学习不打烊,充电加油只为遇到更好的自己,365天无节假日,每天早上5点纯手工发布前端知识点(死磕自己,愉悦大家)。希望大家在这浮夸的前端圈里,保持冷静,坚持每天花20分钟来学习与思考。在这千变万化,类库层出不穷的前端,建议大家不要等到找工作时,才狂刷题,提倡每日学习!欢迎大家关注3+1开源项目!希望大家每人去学习与思考!(不要为了谁而来,要为自己而努力!

      【关注官方公众号】 每天4:30-5:00推送
      【公众号推荐】 一起折腾前端算法
      【微信学习群】 备注3+1