【React自制全家桶】四、React中state与props的分析与比较
一.state
1.state的作用
state是React中组件的一个对象.React把用户界面当做是状态机,想象它有不同的状态然后渲染这些状态,可以轻松让用户界面与数据保持一致.
React中,更新组件的state,会导致重新渲染用户界面(不要操作DOM).简单来说,就是用户界面会随着state变化而变化.
2.state工作原理
常用的通知React数据变化的方法是调用setState(data,callback).这个方法会合并data到this.state,并重新渲染组件.渲染完成后,调用可选的
callback回调.大部分情况不需要提供callback,因为React会负责吧界面更新到最新状态.
3.那些组件应该有state?
大部分组件的工作应该是从props里取数据并渲染出来.但是,有时需要对用户输入,服务器请求或者时间变化等作出响应,这时才需要state.
组件应该尽可能的无状态化,这样能隔离state,把它放到最合理的地方(Redux做的就是这个事情?),也能减少冗余并易于解释程序运作过程.
常用的模式就是创建多个只负责渲染数据的无状态(stateless)组件,在他们的上层创建一个有状态(stateful)组件并把它的状态通过props
传给子级.有状态的组件封装了所有的用户交互逻辑,而这些无状态组件只负责声明式地渲染数据.
4.哪些应该作为state?
state应该包括那些可能被组件的事件处理器改变并触发用户界面更新的数据.这中数据一般很小且能被JSON序列化.当创建一个状态化的组件
的时候,应该保持数据的精简,然后存入this.state.在render()中在根据state来计算需要的其他数据.因为如果在state里添加冗余数据或计算
所得数据,经常需要手动保持数据同步.
5.哪些不应该作为state?
this.state应该仅包括能表示用户界面状态所需要的最少数据.因此,不应该包括:
计算所得数据:
React组件:在render()里使用props和state来创建它.
基于props的重复数据:尽可能保持用props来做作为唯一的数据来源.把props保存到state中的有效的场景是需要知道它以前的值的时候,
因为未来的props可能会变化.
二.props
1.props的作用
组件中的props是一种父级向子级传递数据的方式.
2.复合组件
传递数据
三、区别
1、一句话:props和state之间是紧密相关,父组件的state常常转变成子组件的props。
2、下面我们通过一个父子组件从上至下来分析它们。
假如我们有个父组件,可以在父组件的state里定义子组件的数据,比如:
this.setState({ childData: 'Child Data' });
紧接着,在父组件的render()
方法里面,可以将父组件的state
,作为子组件的props
传递下去,如下
<Child data = {this.state.childData}/>
这样就可以父组件的state
传递给子组件的props
。
3、从子组件的角度来看,props
是不可变的。
那么如何改变子组件的props?
我们仅仅需要改变父组件内部的state
即可,父组件的state
改变之后,引起父组件重新渲染,在渲染的过程中,子组件的data
变成父组件this.state.childDtat
的值。这样父组件内部state
改变,就会引起子组件的改变。
这样就形成里从上而下的数据流,也就是React常说的单向数据流,这个“向”是向下。
我们常常利用这个原理更新子组件,从而衍生出一种模式,父组件:处理复杂的业务逻辑、交互以及数据等。子组件:称它为Stateless
组件即无状态组件,只用作展示。在我们开发过程中,尽可能多个使用无状态组件,可以屡清业务之间的逻辑关系,提高渲染效率。
4、子组件如何改变自身的data呢?
这时候需要父组件传递给子组件一个方法,改变父组件自身的state
。
示例:
父组件:
<Child data={this.state.childData} handleChange={this.handelChildChange}></Child>
子组件接收父组件方法:
let Chilid = ({data,handleChange}) => <div onClick={handleChange}>{data.name}</div>
四、小结
props:一般用于父组件向子组件通信,在组件之间通信使用。
state:一般用于组件内部的状态维护,更新组建内部的数据,状态,更新子组件的props等。
五、参考
https://www.cnblogs.com/ysbpysbp/p/6115900.html
https://www.cnblogs.com/ZSG-DoBestMe/p/5293457.html
【React自制全家桶】四、React中state与props的分析与比较的更多相关文章
- 【React自制全家桶】六、React性能优化(持续更新总结)
一.通过虚拟DOM来提升性能(自动) 底层讲解见[React自制全家桶]二.分析React的虚拟DOM和Diff算法 二.将多次setState合并为一次执行(自动) 底层讲解见[React自制全 ...
- 【React自制全家桶】一、Webstrom+React+Ant Design+echarts搭建react项目
前言 一.React是Facebook推出的一个前端框架,之前被用于著名的社交媒体Instagram中,后来由于取得了不错的反响,于是Facebook决定将其开源.出身名门的React也不负众望,成功 ...
- 【React自制全家桶】九、Redux入手
一.React项目中为什么要用Redux 上图: 左图当使用纯React开发稍微大点的项目,因为React数据是瀑布式的,只能通过父子组件传递数据,所以实现关系不大的两React的组件之间的数据传递就 ...
- 【React自制全家桶】五、React组件的生命周期函数详解
一.总览React组件的生命周期函数 什么是生命周期函数:简单的来说就是 在某个时刻会自动执行的函数 二.React的生命周期函数主要由四块组成 分别是:组件初始化.组件挂载.组件更新.组件卸载 三. ...
- 【React自制全家桶】七、React实现ajax请求以及本地数据mock
一.下载axios插件 yarn add axios 二.React的ajax请求代码如何放置 建议放置在生命周期函数之componentDidMount()中 三.ajax之get请求 axios. ...
- 【React自制全家桶】三、React使用ref操作DOM与setState遇到的问题
在React中同时使用ref操作DOM与setState常常会遇到 比如操作的DOM是setState更新之前的DOM内容,与想要的操作不一致.导致这样的原因是setState函数是异步函数. 就是当 ...
- 【React自制全家桶】二、分析React的虚拟DOM和Diff算法
一.React如何更新DOM内容: 1. 获取state 数据 2. 获取JSX模版 3. 通过数据 +模版结合,生成真实的DOM, 来显示,以下行代码为例(简称代码1) <div id= ...
- 【React自制全家桶】八、React动画以及react-transition-group动画库的使用
React动画通常有三种方法实现从易到难为: 1.transition(CSS3自带) 2.animation(CSS3自带) 3.react-transition-group动画库(需要引入插件) ...
- react 中state与props
react 中state与props 1.state与props props是只读属性,只有在组件被实例化的时候可以赋值,之后的任何时候都无法改变该值.如果试图修改该值时,控制台会报错 only re ...
随机推荐
- Java 访问 C++ 方法:JavaCPP
JavaCPP提供了在Java中高效访问本地C++的方法.采用JNI技术实现,支持所有Java实现包括Android系统,Avian 和 RoboVM. JavaCPP提供了一系列的Annotatio ...
- java8学习之BiFunction函数式接口实例演示&Predicate函数式接口详解
BiFunction函数式接口: 在上次中已经对BiFunction接口进行了初步的认识,这里对它进一步学习,这里打算新建一个Person实体,然后新建若干个Person的实例存放在集合中,最后再根据 ...
- CentOS5、CentOS6启动流程
这三篇文章讲的都很好,可以看一下 http://os.51cto.com/art/201407/446819.htm http://www.mamicode.com/info-detail-11656 ...
- updatedepthtexture 和 screen space shadow 开关
2018.0.3f 里面directional light开了shadow 就会有一张updatedepth 如果距离远 没有阴影就没有shadow pass 但是updatedepth没有关掉 管线 ...
- 强大的Visual Studio插件CodeRush全新发布v19.2,助力VS开发
CodeRush是一个强大的Visual Studio .NET 插件,它利用整合技术,通过促进开发者和团队效率来提升开发者体验.CodeRush能帮助你以极高的效率创建和维护源代码.Consume- ...
- C语言常用库函数
一.数学函数 调用数学函数时,要求在源文件中包下以下命令行: #include <math.h> 函数原型说明 功能 返回值 说明 int abs( int x) 求整数x的绝对值 计算结 ...
- hive传递参数与调用
在运行hive命令时传入参数,使用-hivevar 和 -hiveconf 两种参数选项,来给此次的执行脚本传入参数 -hivevar : 传参数 ,专门提供给用户自定义变量. -hiveconf : ...
- C# 检测 代码耗时
static void SubTest() { Stopwatch sw = new Stopwatch(); sw.Start(); //耗时巨大的代码 sw.Stop(); TimeSpan ts ...
- Confluence 6.15 使用附件宏
希望添加附件宏到一个页面中: 从编辑工具栏中,选择 插入(Insert) > 其他宏(Other Macros) 找到并且选择需要的宏. 可用使用自动完成加快这个过程:输入 { 然后开始输入 ...
- 灰度图像--图像分割 Sobel算子
学习DIP第44天 转载请标明本文出处:http://blog.csdn.net/tonyshengtan,欢迎大家转载,发现博客被某些论坛转载后,图像无法正常显示,无法正常表达本人观点,对此表示很不 ...