React中Props 和 State用法

1.本质

  一句话概括,props 是组件对外的接口,state 是组件对内的接口。组件内可以引用其他组件,组件之间的引用形成了一个树状结构(组件树),如果下层组件需要使用上层组件的数据或方法,上层组件就可以通过下层组件的props属性进行传递,因此props是组件对外的接口。组件除了使用上层组件传递的数据外,自身也可能需要维护管理数据,这就是组件对内的接口state。根据对外接口props 和对内接口state,组件计算出对应界面的UI=>UI = Component(props, state)。

  组件的props 和 state都和组件最终渲染出的UI直接相关。两者的主要区别是:state是可变的,是组件内部维护的一组用于反映组件UI变化的状态集合;而props是组件的只读属性,组件内部不能直接修改props,要想修改props,只能在该组件的上层组件中修改。在组件状态上移的场景中,父组件正是通过子组件的props,传递给子组件其所需要的状态。

  请务必牢记,并不是组件中用到的所有变量都是组件的状态!当存在多个组件共同依赖同一个状态时,一般的做法是状态上移,将这个状态放到这几个组件的公共父组件中。

2.修改State

1)不能直接修改State。

直接修改state,组件并不会重新重发render。例如:

// 错误
this.state.title = 'React';

正确的修改方式是使用setState():

// 正确
this.setState({title: 'React'});
2)State 的更新是异步的。

  调用setState,组件的state并不会立即改变,setState只是把要修改的状态放入一个队列中,React会优化真正的执行时机,并且React会出于性能原因,可能会将多次setState的状态修改合并成一次状态修改。所以不能依赖当前的state,计算下个state。当真正执行状态修改时,依赖的this.state并不能保证是最新的state,因为React会把多次state的修改合并成一次,这时,this.state还是等于这几次修改发生前的state。另外需要注意的是,同样不能依赖当前的props计算下个state,因为props的更新也是异步的。

  举个例子,对于一个电商类应用,在我们的购物车中,当点击一次购买按钮,购买的数量就会加1,如果我们连续点击了两次按钮,就会连续调用两次this.setState({quantity: this.state.quantity + 1}),在React合并多次修改为一次的情况下,相当于等价执行了如下代码:

//错误
Object.assign(
previousState,
{quantity: this.state.quantity + 1},
{quantity: this.state.quantity + 1}
)

  后面的操作覆盖掉了前面的操作,最终购买的数量只增加了1个。

  如果你真的有这样的需求,可以使用另一个接收一个函数作为参数的setState,这个函数有两个参数,第一个参数是组件的前一个state(本次组件状态修改成功前的state),第二个参数是组件当前最新的props。如下所示:

// 正确
this.setState((preState, props) => ({
counter: preState.quantity + 1;
}))
3)State 的更新是一个浅合并(Shallow Merge)的过程。

  当调用setState修改组件状态时,只需要传入发生改变的状态变量,而不是组件完整的state,因为组件state的更新是一个浅合并(Shallow Merge)的过程。例如,一个组件的state为:

this.state = {
title : 'React',
content : 'React is an wonderful JS library!'
}

当只需要修改状态title时,只需要将修改后的title传给setState

this.setState({title: 'Reactjs'});

React会合并新的title到原来的组件state中,同时保留原有的状态content,合并后的state为:

{
title : 'Reactjs',
content : 'React is an wonderful JS library!'
}

React中Props 和 State用法的更多相关文章

  1. React中props和state相同点和不同点

    朋友们,我想死你们了,最近这几天忙着和病魔作斗争所以没怎么写博客,今天感觉好点了,赶紧来写一波,就是这木敬业. 今天我们来讨论讨论props和state相同点和不同点 首先我来概要说明一下这两者 pr ...

  2. React中props与state

    以下内容均为个人理解. 1.state: 在react中,state可以看成管理页面状态的集合(实则一个对象而已),库里面的成员均为页面渲染变量,整个页面为一个状态机,当state发生变化时,页面会重 ...

  3. 关于React中props与state的一知半解

    props props英文翻译是道具的意思,我个人理解为参数,如果我们将react组件看作是一个函数,那么props便是函数接收外部数据所使用的参数.props具有以下特性: 1.不可变(只读性) p ...

  4. react中 props,state,render函数的关系

    1.当组件的 state 或者 props 发生改变的时候,自己的render函数就会重新执行. 2. 当父组件的render函数执行时,其所有子组件的render函数都会重新执行.

  5. React中props

    今天让我们开启新的篇章好吧,来搞一搞React,以下所有操作都是我个人的一些理解,如果有错吴还请指出,想要看更全的可以去React官网可能一下子好吧 昨天按摩没到位,导致今天身体不太行,撸码千万别苦了 ...

  6. vue框架中props的typescript用法

    vue框架中props的typescript用法 在vue中使用typescript时,需要引入vue-property-decorator库来兼容格式. javascript写法 Vue.compo ...

  7. React react-redux props或state更新视图无法重新渲染问题

    记录学习React时自己是如何挖坑把自己埋了的过程:children以及其它props被修改时相关组件无法重新渲染(做了两天) 父组件代码: class UserHome extends Compon ...

  8. React中props.children和React.Children的区别

    在React中,当涉及组件嵌套,在父组件中使用props.children把所有子组件显示出来.如下: function ParentComponent(props){ return ( <di ...

  9. react中 props,state与render函数的关系

    我们很明显的能够感受到,react是一门数据驱动的框架,当数据发生变化,页面就会自动发生变化,他背后的原理是怎么样子的呢 比如todolist例子里面,inputValue变了,框里面的内容就会自动变 ...

随机推荐

  1. Adobe Illustrator for Mac(矢量图处理软件)破解版安装

    1.软件简介    Adobe Illustrator CC 是 macOS 系统上一款矢量绘图工具,可以说是是业界标准矢量绘图标杆,软件通过形状.色彩.效果及印刷样式,展现您的创意想法.在处理大型复 ...

  2. R语言编程艺术#03#列表(list)

    向量的元素要求都是同类型的,而列表(list)与向量不同,可以组合多个不同类型的对象.类似于C语言中的结构体(struct)类型. 1.创建列表 从技术上讲,列表就是向理.之前我们接触过的普通向量都称 ...

  3. 相关系数(CORRELATION COEFFICIENTS)会骗人?

    CORRELATION COEFFICIENTS We've discussed how to summarize a single variable. The next question is ho ...

  4. ceph 的 bufferlist

    bufferlist是buffer::list的别名,其由来在 http://bean-li.github.io/bufferlist-in-ceph/ 中有非常详细的介绍 其p.p_off.off字 ...

  5. 批处理命令学习笔记——Start命令

    Start 命令 启动另一个窗口运行指定的程序或命令,所有的DOS命令和命令行程序都可以由start命令来调用. 语法:START ["title"] [/Dpath] [/I] ...

  6. sql操作总结

    SQL 语句的多表查询方式例如:按照 department_id 查询 employees(员工表)和 departments(部门表)的信息.方式一(通用型):SELECT ... FROM ... ...

  7. 【iCore4 双核心板_FPGA】例程十三:基于SPI的ARM与FPGA通信实验

    实验现象: 1.先烧写ARM程序,然后烧写FPGA程序. 2.打开串口精灵,通过串口精灵给ARM发送数据从而给FPGA发送数据 ,会接收到字符HELLO. 3.通过串口精灵发送命令可以控制ARM·LE ...

  8. 【emWin】例程十四:xbf外置字体

    介绍: 本例将xbf格式文件放到SD卡中,通过读取SD卡中的字库文件在液晶上显示文字.   实验指导书及代码包下载: 链接:http://pan.baidu.com/s/1mhTdYeG 密码:aka ...

  9. 【emWin】例程二十四:窗口对象——Header

    简介: HEADER 小工具用于标记表格的列,本例程示例演示如何使用HEADER小工具. 触摸校准(上电可选择是否进入校准界面) 实验指导书及代码包下载: 链接:http://pan.baidu.co ...

  10. Angularjs中config中置入以下拦截器

    $httpProvider.interceptors.push(['$rootScope', '$q', '$localStorage', function ($rootScope, $q, $loc ...