React的深入浅出

react
组件重新渲染有两种途径:
1、自身调用setState;
2、父组件传入新的props。
3、但这两种途径都不会必然调用render而引起重新渲染,
都会先经过shouldComponentUpdate进行判断,
如果返回true,则调用render,就会对该组件的所有子组件传入新的props,
因此所有子组件都会可能重新渲染(但是是否每一个子组件都会更新,
取决与子组件的shouldComponentupdate的返回值)。

1、props:父级分发先来的属性;
2、state:组件内部自行管理的组件;
3、React没有数据向上回溯的能力,数据只能单向向下分发,或自行内部消化。

1、因为React无法让两个组件互相交流,使用对方数据。
解决办法:将state放到共有的父组件中来管理,在作为props分发回子组件。
2、子组件改变父组件state的办法只能是通过onClick触发父组件声明好的回调,
也就是父组件提前声明好函数或方法作为契约描述自己的state将如何变化,
再将它同样作为属性交给子组件使用。这样就出现了一个模式:
数据总是单向从顶层向下分发的,但是只有子组件回调在概念上可以
回到state顶层影响数据。这样state一定程度上是响应式的。

相关链接:
https://www.zhihu.com/question/41312576?sort=created
https://www.zhihu.com/question/29504639

待续。。。。。

时间: 2024-08-25 13:42:11

React的深入浅出的相关文章

ReactiveNative学习之Diff算法

React 源码剖析系列 - 不可思议的 react diff深入浅出React(四):虚拟DOM Diff算法解析React diff 算法总结链接引用的文章React出于性能的考虑,为了避免频繁操作DOM,采用了虚拟DOM结构(virtual DOM):每当虚拟DOM树发生变化树发生变化时,React会将当前DOM树和之前的虚拟DOM树进行diff算法对比,得到虚拟DOM结构的区别,然后仅仅渲染差异部分.ReactiveNative官方称,不同类型的 component 是很少存在相似 DO

深入浅出React Native 3: 从零开始写一个Hello World

这是深入浅出React Native的第三篇文章. 1. 环境配置 2. 我的第一个应用 将index.ios.js中的代码全部删掉,为什么要删掉呢?因为我们准备从零开始写一个应用~学习技术最好的方式就是自己动手写,看别人的代码一百遍的效果也不如自己写一遍来的效果大~ 我们要做的事情主要分成以下两步: 1. 创建组件 2. 将创建好的组件显示在app上 打开index.ios.js文件,输入 var HelloWorld = React.createClass({ render: functio

深入浅出React Native 2: 我的第一个应用

这是深入浅出React Native教程的第二篇文章,第一篇为环境配置. React Native环境配好之后,就可以开始创建我们的第一个App啦. 打开控制台,输入 react-native init AwesomeProject 上述命令的作用是在当前文件夹下创建一个名字叫AwesomeProject的项目模板.在运行该命令之前,可以先用cd命令到自己想创建react native的文件夹下. 当然,比较坑的是,执行这个命令会用耗费很长很长的时间,有时候还会出现各种各样的错误,例如,没有权限

深入浅出React(一):React的设计哲学 - 简单之美

编者按:自2013年Facebook发布以来,React吸引了越来越多的开发者,基于它的衍生技术,如React Native.React Canvas等也层出不穷.InfoQ精心策划"深入浅出React"系列文章,为读者剖析React开发的技术细节. React最初来自Facebook内部的广告系统项目,项目实施过程中前端开发遇到了巨大挑战,代码变得越来越臃肿且混乱不堪,难以维护.于是痛定思痛,他们决定抛开很多所谓的"最佳实践",重新思考前端界面的构建方式,于是就有

React+ES6+Webpack深入浅出

React已成为前端当下最热门的前端框架之一 , 其虚拟DOM和组件化开发让前端开发更富灵活性,而Webpack凭借它异步加载和可分离打包等优秀的特性,更为React的开发提供了便利.其优秀的特性不再赘述.本文将详细的记录react babel webpack的环境搭建,以及搭建的过程中遇到的一些坑. 一.新建React项目 1.如图为新建react项目结构,其中 entry.js放置react入口代码,index.js放置react组件代码,assets文件是webpack打包之后生成文件的存

深入浅出 React Native:使用 JavaScript 构建原生应用

本篇为联合翻译,译者:寸志,范洪春,kmokidd,姜天意 数月前,Facebook 对外宣布了正在开发的 React Native 框架,这个框架允许你使用 JavaScript 开发原生的 iOS 应用--就在今天,Beta 版的仓库释出了! 基于 PhoneGap 使用 JavaScript 和 HTML5 开发 iOS 应用已经有好几年了,那 React Native 有什么牛的? React Native 真的很牛,让大家兴奋异常的主要原因有两点: 可以基于 React Native使

深入浅出React和Redux pdf

下载地址:网盘下载 内容简介  · · · · · · 本书作者是资深开发人员,有过多年的开发经验,总结了自己使用React和Redux的实战经验,系统分析React和Redux结合的优势,与开发技巧,为开发大型系统提供参考.主要内容包括:React的基础知识.如何设计易于维护的React组件.如何使用Redux控制数据流.React和Redux的相结合的方式.同构的React和Redux架构.React和Redux的性能优化.组件的测试等. 作者简介  · · · · · · 程墨 资深架构师

深入浅出react

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px ".PingFang SC"; color: #454545 } p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "Helvetica Neue"; color: #454545; min-height: 14.0px } p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; f

深入浅出 React 的 HOC 以及的 Render Props

重复是不可能的,这辈子都不可能写重复的代码 当然,这句话分分钟都要被产品打脸,天天喊着改需求,老哥,这里改下可好? 所以,我们需要抽象,封装重复的功能或者逻辑,这样改需求,也不用到处改 那么这次我们来讲讲 React 里的高级组件 React 高级组件有两种方式: 使用高阶组件( Higher Order Component ==> HOC ) 子组件作为函数的模式( Render Props ) 高阶组件 首先来说说高阶组件,它不是 React 的提供的 API,它是模式,一种增强组件的模式,