props 和 state的区别
作者:孙志勇 微博
日期:2016年11月29日
一、时效性
所有信息都具有时效性。文章的价值,往往跟时间有很大关联。特别是技术类文章,请注意本文创建时间,如果本文过于久远,请读者酌情考量,莫要浪费时间。
二、背景
在学习React的过程中,频繁的跟props和state打交道,对于初学者来说,不知道什么情况下来使用它们有时候不知道在什么情况下来使用它们。
三、区别
props和state之间是紧密相关的。父组件的state常常转变子组件的props成下面我们通过一个父子组件从上至下来分析它们。
假如我们有个父组件,可以在父组件的state里定义子组件的数据比如:
this.setState({ childData: 'Child Data' });
紧接着,在父组件的render()
方法里面,可以将父组件的state
,作为子组件的props
传递下去,如下
<Child data = {this.state.childData}/>
这样就可以父组件的state
传递给子组件的props
。从子组件的角度来看,props
是不可变的。如何改变子组件的props?我们仅仅需要改变父组件内部的state
即可,父组件的state
改变之后,引起父组件重新渲染,在渲染的过程中,子组件的data
变成父组件this.state.childDtat
的值。这样父组件内部state
改变,就会引起子组件的改变。
这样就形成里从上而下的数据流,也就是React常说的单向数据流,这个“向”是向下。
我们常常利用这个原理更新子组件,从而衍生出一种模式,父组件:处理复杂的业务逻辑、交互以及数据等。子组件:称它为Stateless
组件即无状态组件,只用作展示。在我们开发过程中,尽可能多个使用无状态组件,可以缕清业务之间的逻辑关系,提高渲染效率。
如果子组件想要改变自身的data
,这时候需要,父组件传递给子组件一个方法,改变父组件自身的state
。
父组件:
<Child data={this.state.childData} handleChange={this.handelChildChange}></Child>
子组件接收父组件方法
let Chilid = ({data,handleChange}) =><div onClick={handleChange}>{data.name}</div>
四、小结
==props:==一般用于父组件向子组件通信,在组件之间通信使用。
==state:==一般用于组件内部的状态维护,更新组建内部的数据,状态,更新子组件的props等。
五、完整代码
父组件
import React, {Component} from 'react';import Child from './components/child'
class App extends Component {constructor(props) {super(props);this.state = {childData: {name: 'child'}};this.handelChildChange = this.handelChildChange.bind(this);}handelChildChange(){this.setState({childData: {name: 'newChild'}})}render() {return (<div style={{textAlign:'center'}}><Child data={this.state.childData} handleChange={this.handelChildChange}></Child></div>);}
}export default App;
子组件:这里使用无状态组件,解构赋值以及无状态组件使用父组件方法
import React from 'react';let Chilid = ({data,handleChange}) =><div onClick={handleChange}>{data.name}</div>export default Chilid
六、参考链接
- http://stackoverflow.com/questions/27991366/what-is-the-difference-between-state-and-props-in-react
- https://facebook.github.io/react/docs/state-and-lifecycle.html#the-data-flows-down
七、转载分享
版权声明:自由转载-非商用-非衍生-保持署名(创意共享3.0许可证)
八、如果你觉得此文章对你有帮助,并且想为我买杯咖啡,请扫一扫下面,谢谢。
微信
支付宝
转载于:https://www.cnblogs.com/ysbpysbp/p/6115900.html
props 和 state的区别相关推荐
- React中props与state的区别
首先,props与state是React组件的两种方法. props,可以在组件中来获取this.props的属性. var Helloreact=React.createClass({render: ...
- [react] react组件的state和props两者有什么区别?
[react] react组件的state和props两者有什么区别? State 是一种数据结构,用于组件挂载时所需数据的默认值.State 可能会随着时间的推移而发生突变,但多数时候是作为用户事件 ...
- React简介、虚拟DOM、Diff算法、创建React项目、JSX语法、组件、组件声明方式、组件传值props和state、组件的生命周期
React简介: 前面只是简单介绍移动APP开发,后面还会继续深入介绍移动app开发:其中想要用ReactNative开发出更出色的应用,那么就得学好React,下面将介绍React: React 是 ...
- Reac学习笔记#01#组件定义以及props、state的管理
React学习#01 组件的定义和 state 以及props的使用 官方文档 1. 特点 数据单项绑定,自上而下流动 支持组件封装和组件间的引用组合 JSX/TSX语法的使用 使用虚拟DOM操作(d ...
- React中pros和state的区别
props是一个父组件传递给子组件的数据流,这个数据流可以一直传递到子孙组件. state代表的是一个组件内部自身的状态(可以是父组件.子孙组件). state 和 props 主要的区别在于 pro ...
- React 深入系列3:Props 和 State
文:徐超,<React进阶之路>作者 授权发布,转载请注明作者及出处 React 深入系列3:Props 和 State React 深入系列,深入讲解了React中的重点概念.特性和模式 ...
- ReactNative之从HelloWorld中看环境搭建、组件封装、Props及State
开篇呢,先给大家问个好,今天是中秋节,祝大家中秋节快乐!!虽然是中秋节,但是木有回家还是总结一下知识点写写博客吧,想着昨天总结一下的,但是昨天和几个同学小聚了一下,酒逢知己总是千杯少呢,喝的微醺不适合 ...
- 前端学习(2307):react之props和state
Home,js import React, {Component} from 'react'; import News from "./News"; class Home exte ...
- 基于 props 更新 state
单向数据流 所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定:父级 prop 的更新会向下流动到子组件中,但是反过来则不行.这样会防止从子组件意外改变父级组件的状态,从而导致你的应 ...
最新文章
- 在Homebrew 发布程序
- 2018湖湘杯web、misc记录
- 重新认识二级指针(Pointers to Pointers)
- 客房收费系统数据库设计
- jQuery UI全教程之一(dialog的使用教程)
- 嵌入式开发之davinci--- MSB和LSB
- c语言边沿与内芯的差noj题目,西工大noj答案完整版148.doc
- linux yum 链接,Linux YUM之YUM仓库
- C++复习 auto
- 25th Sept 2014:《数学分析八讲读书笔记》
- 设计FMEA步骤四:失效分析
- 关于数字万用表你需要知道的知识
- 【区块链】以太坊Solidity编程:智能合约实现之基本语法
- Poi导入excel(合并单元格)
- visio2013都提示“正在配置请稍后”
- Google Summer of Code谷歌编程之夏活动流程全解析(上)
- PMP考试的5A好考吗?
- 基于体素化方法的点云降采样
- 基于机器学习的花卉识别
- SRP-PHAT综述
热门文章
- 第4章-5 求e的近似值 (15分)python
- 理解torch.einsum(‘ijk,ilk->ijl‘, a,b)
- 笔记:RTSP在线视频流资源地址
- Android 头像上传的实现
- 什么是云管平台?业界知名的云管平台品牌有哪些?
- android 项目大全,总有你所需的
- Oracle 11g 新特性 -- Result Cache(结果高速缓存)
- 【渗透测试】文件上传漏洞:upload-labs通关简记
- 计算机一级考试选择题1
- setVisibility(View.INVISIBLE)、android.os.Process.killProcess和System.exit失效