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
待续。。。。。
React的深入浅出的更多相关文章
- React.js - 入门
React.js - 第1天 1. React简介 React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 ...
- React入门看这篇就够了
摘要: 很多值得了解的细节. 原文:React入门看这篇就够了 作者:Random Fundebug经授权转载,版权归原作者所有. React 背景介绍 React 入门实例教程 React 起源于 ...
- [转]React入门看这篇就够了
摘要: 很多值得了解的细节. 原文:React入门看这篇就够了 作者:Random Fundebug经授权转载,版权归原作者所有. React 背景介绍 React 入门实例教程 React 起源于 ...
- ReactiveNative学习之Diff算法
React 源码剖析系列 - 不可思议的 react diff深入浅出React(四):虚拟DOM Diff算法解析React diff 算法总结链接引用的文章React出于性能的考虑,为了避免频繁操 ...
- 深入浅出React Native 2: 我的第一个应用
这是深入浅出React Native教程的第二篇文章. 1. 环境配置 React Native环境配好之后,就可以开始创建我们的第一个App啦. 打开控制台,输入 react-native init ...
- 深入浅出React Native 3: 从零开始写一个Hello World
这是深入浅出React Native的第三篇文章. 1. 环境配置 2. 我的第一个应用 将index.ios.js中的代码全部删掉,为什么要删掉呢?因为我们准备从零开始写一个应用~学习技术最好的方式 ...
- 深入浅出 React Native:使用 JavaScript 构建原生应用
深入浅出 React Native:使用 JavaScript 构建原生应用 链接:https://zhuanlan.zhihu.com/p/19996445 原文:Introducing React ...
- 深入浅出React的一些细节——State
(来源于: https://facebook.github.io/react/docs/state-and-lifecycle.html 翻译by:@TimRChen) Using State Cor ...
- 深入浅出React Native 1: 环境配置
该教程主要介绍如何用react native来开发iOS,所以首先,你需要有一台mac,当然黑苹果也是可以的~ 创建一个react native的项目只需要安装以下五个组件~~(但....坑爹的是,不 ...
随机推荐
- C#3.0之神奇的Lambda表达式和Lambda语句
“Lambda 表达式”是一个匿名函数,它可以包含表达式和语句,并且可用于创建委托或表达式目录树类型.所有 Lambda 表达式都使用 Lambda 运算符 =>,该运算符读为“goes to” ...
- HDU 1284 钱币兑换问题 (完全背包)
钱币兑换问题 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Subm ...
- cf 215 C. Crosses yy题
链接:http://codeforces.com/problemset/problem/215/C C. Crosses time limit per test 2 seconds memory li ...
- 流媒体开发之开源项目live555---更改server端的帧率大小和码率大小
-----------------------------qq:1327706646 010101010101010110010101010101010101010author:midu 010101 ...
- 【bzoj3671】[Noi2014]随机数生成器
优先按照它说明的方法处理数组 然后为了让数列中尽可能多的出现小的数字 所以1是必须要出现的,这样才能使整个数列的排序后字典序最小. 我们思考,如果2也能在这个数列中那就最好不过了 但是2有可能不在这个 ...
- bfs 邻接表
#include<stdio.h> #include<stdlib.h> #include<string.h> struct node { int date; st ...
- HDU3085 Nightmare Ⅱ —— 双向BFS + 曼哈顿距离
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3085 Nightmare Ⅱ Time Limit: 2000/1000 MS (Java/Other ...
- YTU 2203: 最小节点(线性表)
2203: 最小节点(线性表) 时间限制: 1 Sec 内存限制: 128 MB 提交: 243 解决: 204 题目描述 (线性表)设有一个由正整数组成的无序(向后)单链表,编写完成下列功能的算 ...
- JQuery树形插件Dynatree的包装对象
这是JQuery Dynatree插件的包装对象,做了些改进和增强,增加了右键菜单,以及相应事件等扩展1. [代码]MagicDTree的基本使用 <SCRIPT type=text/javas ...
- html5--6-6 CSS选择器3
html5--6-6 CSS选择器3 实例 学习要点 掌握常用的CSS选择器 了解不太常用的CSS选择器 什么是选择器 当我们定义一条样式时候,这条样式会作用于网页当中的某些元素,所谓选择器就是样式作 ...