react
小敏哥
这个作者很懒,什么都没留下…
展开
-
React的跨级组件通信
我们知道,react中父子组件之间的通信,父组件和子组件通信,可以通过props向子组件传递参数,子组件和父组件通信,则可以通过调用props传入的回调函数来向父组件传递参数那么问题来了,如果是跨级组件之间的通信,如果通过props一层一层往下传,不仅逻辑会变得很不清晰,代码也会变得不好维护,这个时候,我们需要使用到react中的context来解决这个问题首先我们来看一段代码cla...原创 2018-12-28 23:08:52 · 4270 阅读 · 0 评论 -
react生命周期整理
react中的生命周期可以分为四大类,分别为定义时触发,渲染时触发,更新时触发以及卸载时触发。本文章会对所有生命周期进行归纳并从源码的角度解析其实现原理(写到一半发现文章已经有点长了,决定新开一片文章来解析实现原理,传送门)定义时触发(createClass)getDefaultProps该生命周期是在定义组件的时候触发,其返回的对象可以用于设置默认的 props,由于这个方法是在构造...原创 2019-01-06 15:28:34 · 980 阅读 · 0 评论 -
react生命周期原理解析
这篇文章是对之前的一片文章react生命周期整理提到的生命周期的解析,本文会从源码的角度,对react的各个生命周期的实现原理进行不太详细的分析getDefaultProps与getInitialState首先我们来看一下以下两个代码片段,第一个是用es5创建组件的方法,需要调用react的createClasss方法,第二个是es6创建组件的方法,定义一个类继承react.compone...原创 2019-01-06 22:24:18 · 2538 阅读 · 0 评论 -
React事务机制解析
对react有一定了解的开发人员应该都听说过react的事务机制,这个机制几乎贯穿于react所有提供的方法,包括react中最常使用的setState函数那么,react的事务机制到底是一种什么样的机制呢,为了解释事务机制的实现原理,react源码中用注释画出了这样一幅图根据这幅图,我们可以这样理解事务,react中用事务执行方法,就是用wrapper(称之为套套吧)把方法包裹起来,...原创 2019-01-11 23:20:19 · 52617 阅读 · 1 评论 -
React中setState的怪异行为 ——setState没有即时生效
setState可以说是React中使用频率最高的一个函数了,我们都知道,React是通过管理状态来实现对组件的管理的,当this.setState()被调用的时候,React会重新调用render方法来重新渲染UI但实际使用的时候,我们会发现,有时候我们setState之后,并没有立刻生效,例如我们看一下以下的示例代码class Test extends Component { c...原创 2019-01-12 14:41:45 · 23707 阅读 · 2 评论 -
React中key属性的作用及原理解析
Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `Test`. See https://fb.me/react-warning-keys for more information.相信在react的使用过程中,大家或多或少都会遇到过这样...原创 2019-01-20 14:58:10 · 16517 阅读 · 1 评论