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的项目只需要安装以下五个组件~~(但....坑爹的是,不 ...
随机推荐
- 【LeetCode从零单排】No 114 Flatten Binary Tree to Linked List
题目 Given a binary tree, flatten it to a linked list in-place. For example,Given 1 / \ 2 5 / \ \ 3 4 ...
- 【c语言】二维数组中的查找,杨氏矩阵在一个二维数组中,每行都依照从左到右的递增的顺序排序,输入这种一个数组和一个数,推断数组中是否包括这个数
// 二维数组中的查找,杨氏矩阵在一个二维数组中.每行都依照从左到右的递增的顺序排序. // 每列都依照从上到下递增的顺序排序.请完毕一个函数,输入这种一个数组和一个数.推断数组中是否包括这个数 #i ...
- tomcat重启报错
一.tomcat重启报java环境变量错 报错信息详细如下: Neither the JAVA_HOME nor the JRE_HOME environment variable is define ...
- Ajax_HTTP请求以及响应
什么是HTTP请求? 就是从用户的浏览器端向服务器端发送请求 一个HTTP请求一般由四个部分组成 1.HTTP请求的方法或者动作,比如GET或者POST请求 2.请求的URL,也就是请求的地址 3.请 ...
- springCloud和docker笔记(1)——微服务架构概述
1.微服务设计原则 1)单一职责原则:只关注整个系统中单独.有界限的一部分(SOLID原则之一) 2)服务自治原则:具备独立的业务能力和运行环境,可独立开发.测试.构建.部署 3)轻量级通信机制:体量 ...
- (31)java web的hibernate使用-一级缓存,二级缓存
参考:https://blog.csdn.net/miachen520/article/details/52195832 hibernate自带一级缓存 和 二级缓存 一,一级缓存: 基于Sessio ...
- MYSQL进阶学习笔记三:MySQL流程控制语句!(视频序号:进阶_7-10)
知识点四:MySQL流程控制语句(7-10) 选择语句: (IF ELSE ELSE IF CASE 分支)IFNULL函数 IF语法: 语法规则: IF search_condition THEN ...
- linux:在vmware上模拟新加一个硬盘对其格式化分区
在实际情况中,很容易有系统硬盘空间不够,然后需要添加新硬盘情况:这里我用vmware来模拟实验: 一:在一个Linux vmware上创建一个虚拟硬盘 1.打开vmware,选择一个已经搭建好的l ...
- 倒排列表求交集算法 包括baeza yates的交集算法
#ifndef __INTERSECT_HPP__ #define __INTERSECT_HPP__ #include "probe.hpp" namespace themas ...
- netty codec部分剖析
针对netty 3.2进行剖析 今天用到了netty的encoder和decoder(coder其本质还是handler),特剖析一个netty提供的coder,从而选择或者实现我自己的coder. ...