Reactjs Component 渲染(Render)机制
来源:互联网 发布:苹果macbook下载软件 编辑:程序博客网 时间:2024/06/01 20:05
一个组件在加载完毕后,如果既没有外部驱动,也没有内部驱动,是不会进行重新渲染的。按照React文档上说的,组件想要对自身进行刷新,可以通过调用setState()或者forceUpdate()来实现,这是让组件刷新的其中一种办法,也就是我说的内部驱动。而另一种则是由外部驱动,也就是让父组件驱动子组件进行重新渲染,那么下面就是阐述父组件如何让子组件发生重新渲染。
先说大体思路:父组件通过给子组件传递数据(属性)告知子组件有可能需要重新渲染,子组件自己根据传来的数据(在componentWillReceiveProps方法中)决定是否有必要进行重新渲染。
根据React文档,父组件可以通过属性(props)把数据传递给子组件,但需要注意的是这个传递动作只发生的render的过程中,在组件已经渲染完毕之后,传递就会停止。假设父组件内部定义了变量A,并赋给了子组件的某个属性,当这个变量A 的值发生改变,并不足以让子组件刷新。只要变量A的变化不足以引发父组件调用自身的render方法进行重新渲染,这个变量A的值就不会主动传递给子组件。这段话的目的在于明确组件的数据传递需要由渲染来驱动,而不是由数据的变化来驱动的。因此父组件要传递数据给子组件,第一步是要触发父组件对自身的重新渲染。
先说大体思路:父组件通过给子组件传递数据(属性)告知子组件有可能需要重新渲染,子组件自己根据传来的数据(在componentWillReceiveProps方法中)决定是否有必要进行重新渲染。
根据React文档,父组件可以通过属性(props)把数据传递给子组件,但需要注意的是这个传递动作只发生的render的过程中,在组件已经渲染完毕之后,传递就会停止。假设父组件内部定义了变量A,并赋给了子组件的某个属性,当这个变量A 的值发生改变,并不足以让子组件刷新。只要变量A的变化不足以引发父组件调用自身的render方法进行重新渲染,这个变量A的值就不会主动传递给子组件。这段话的目的在于明确组件的数据传递需要由渲染来驱动,而不是由数据的变化来驱动的。因此父组件要传递数据给子组件,第一步是要触发父组件对自身的重新渲染。
按照React文档上说的,通过在父组件中调用setState()或者forceUpdate()都可以引起组件对自身的重新渲染,这就完成了上述的第一步。那么成功将数据通过属性传递给了子组件后,也还是不一定能引发子组件的更新,因为组件有权决定当接收到外部传来的属性的时候要怎么处理,而具体实现就定义在组件的componentWillReceiveProps方法里,在组件首次渲染完毕之后,这个方法会在组件每次接收到外部传来的属性时被调用(组件首次加载时除外)。通常,使用RN定义好的很多组件(比如Text、Image等)时,会发现当给它们赋予新的属性,它们相应的UI特征就会改变,那是因为这些组件都已经在componentWillReceiveProps方法中实现了在接收到外部传来的属性的时候就进行重新渲染。因此如果发现有些组件未能按预想般进行刷新,可以查看该组件的源码中componentWillReceiveProps方法的实现,看看传给该控件的属性是否满足了它的刷新条件。另外,如果要自定义一些控件,而且希望控件在第一次加载完毕后还能受属性的影响而进行刷新,就要自己去实现componentWillReceiveProps方法,根据接收到的属性,主动调用setState方法进行自我刷新。
总结:1.当前组件重新渲染的必要条件是:setState或者forceUpdate。
2.父组件Props的传递发生在父组件render的过程中。
阅读全文
1 0
- Reactjs Component 渲染(Render)机制
- Django的render(模板渲染)机制
- ReactJs之render
- the component of reactjs
- [Django模板系统]Django的模板渲染(render)机制
- 啦啦啦啦~Django1.96---Django的模板渲染(render)机制
- Render to Texture(渲染到纹理)
- Render to Texture(渲染到纹理)
- 渲染到纹理(render to texture)
- Render to Texture(渲染到纹理)
- 【什么是渲染目标(render target)】
- DX名词解释:渲染目标(Render Target)
- Unity Render Pipeline 渲染管线(漫画)
- OffScreen Render (离屏渲染)
- 什么是渲染目标(render target)&& 渲染到纹理(Render To Texture, RTT)详解
- 什么是渲染目标(render target)&& 渲染到纹理(Render To Texture, RTT)详解
- RENDER渲染机制的局限:无法渲染动态添加的子组件
- fur render(毛发渲染)
- JavaScript创建对象的几种模式比较
- CSS实现垂直居中(三)
- Banner
- 前端工程化之路:初探 Gulp流式构建工具
- 前端学习心得
- Reactjs Component 渲染(Render)机制
- Vagrant+VirtualBox构建本地虚拟开发环境
- VMWare Workstation磁盘占用率100%解决方法
- java反射应用-获取对象自身的属性和值
- Ubuntu 16.04使用root 帐号开启 SSH 登录
- 内容创业者利用怎么样内容付费系统搭建平台?
- appium-开启虚拟器&安装测试软件
- PythonStock(10):使用notebook + tushare + pandas 简单的股票分析,蜡烛图
- 几种离散随机变量