We strongly recommend against creating your own base component classes. In React components, code reuse is primarily achieved through composition rather than inheritance.
这句话来自于react的官方网站
为什么要提及这句话呢。因为现在我的项目中也有自己的创建的组件类,然后其余的组件来继承它。
其实最开始我也是一步一步的使用class App extends React.Component
来写我自己的组件,这样确实有点复杂,但是还算过得去。或许是因为初学react或者是对react的了解不深入,所以,一直就这样。去年了解了一下同事的安卓开发,他们都会建一个基础的类来继承于这个类,这个基础的类实现了一些公用的方法,所以继承于这个基础类的组件也会有这些方法,而且不用每一次都引入。这样理念确实很不错。自己用了一段时间,某些地方也确实方便,尤其是在组件数据请求的时候,需要渲染不同的组件(loading,completed,empty,request_error and so on),而且目前还没有发现有什么不一样的地方,因为这些继承于基础类的组件也是可以使用React的生命周期。直到今天,我才知道,原来这是违背了react的开发理念。那要怎么实现呢。正如上面所说
code reuse is primarily achieved through composition rather than inheritance.
通过组件的组合来实现,通过props
参数来实现,具体查看Composition vs Inheritance。
虽说这样开发可能会复杂一点(或许是自己的技术能力有限),不过这样也算是符合react的理念。
react组件的生命周期作为react开发人员面试的必考知识,还是很有必要实时掌握,并且实时更新。
React生命周期有一份图谱。上面可以查看react的生命周期(新版)。
react的组件的生命周期在react16.3及以后的版本中已经不一样了。但是总的几个阶段是不变的,不管是新的版本还是老的版本,都分为
这样的几个阶段。
props
,也可以使用组件名.defaultProps = {}
设置默认属性。state
。state
。但是一般不使用diff算法
,更新DOM树都在此运行props
是调用true
的时候组件更新,为 flase
的时候组件不更新。默认返回的是true
。这个方法很重要,一个组件的优化都在这里面进行。diff算法
,更新DOM树都在此运行*.componentWillMount方法在新的生命周期中已经过期,应该替换成UNSAFE_componentWillMount
,不过也将在react17中移除
*. 老方法的componentWillUpdate
以及componentWillReceiveProps
即将过期,应该避免使用它们
总的来说新的生命周期移除了一些不必要的函数。具体的可以查看React.Component
以前在进行按钮提交,鼠标滚动等操作的时候,都会进行截留或者是防抖。但是都是自己写的,有时候或者是有的地方会忘记添加。
lodash中已经有相关的函数了
但是,整个 lodash 的库应用进来有1.4M,太大了。不过还好,npm 上面已经有 throttle 和 debounce 的提取包了。
都接收两个参数,第一个是操作的函数,第二个是时间间隔(ms)。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。