props

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

 1.不可变(只读性)

props经常被用作渲染组件和初始化状态,当一个组件被实例化之后,它的props是只读的,不可改变的。如果props在渲染过程中可以被改变,会导致这个组件显示的形态变得不可预测。只有通过父组件重新渲染的方式才可以把新的props传入组件中。

2.可以设置默认值

通常,我们会为props设置一个默认值,设置默认值的方法为defaultProps

class ShowIt extends React.Component{
render(){
return(
<h1>my name is {this.props.name}</h1>
);
};
}; ShowIt.defaultProps={name:"aabS"}; const ShowName=<ShowIt/>; ReactDOM.render(
ShowName,
document.getElementById('example')
);

总的来说,props是一个从外部传进组件的参数,主要作为就是从父组件向子组件传递数据,它具有可读性和不变性,只能通过外部组件主动传入新的props来重新渲染子组件,否则子组件的props以及展现形式不会改变。

state

state的英文翻译是状态,而在react中,它也的确是指状态,是指组件的数据状态。

state可以在构造函数中初始化,如下所示:

constructor(props) {
super(props);
this.state = {date: new Date()};
}

也可以通过setState来修改其初始值:

tick() {
this.setState({
date: new Date()
});
}

当我们调用该方法时,react会重新调用render()方法,即重新渲染组件。

state与props的区别

state与props的主要区别在于,props不可变,state可变,props是一种从父级向子级传递数据的一种方式,state则仅用于实现交互功能。

关于React中props与state的一知半解的更多相关文章

  1. React中Props 和 State用法

    React中Props 和 State用法 1.本质 一句话概括,props 是组件对外的接口,state 是组件对内的接口.组件内可以引用其他组件,组件之间的引用形成了一个树状结构(组件树),如果下 ...

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

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

  3. React中props与state

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

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

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

  5. React中props

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

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

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

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

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

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

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

  9. React之props、state和render函数的关系

    1.当组件中的state或者props发生改变的的时候,render函数就会被重新执行 2.当父组件的render函数被运行时,它的子组件的render都将被重新运行一次 3.子组件作为父组件里的一个 ...

随机推荐

  1. java 多线程为何会出现无法捕获异常的现象?

    提出问题: 很多Java初学者在初学java 多线程的时候可能会看到如下代码: public class ExceptionThread implements Runnable{ @Override ...

  2. 【Spark机器学习速成宝典】模型篇04朴素贝叶斯【Naive Bayes】(Python版)

    目录 朴素贝叶斯原理 朴素贝叶斯代码(Spark Python) 朴素贝叶斯原理 详见博文:http://www.cnblogs.com/itmorn/p/7905975.html 返回目录 朴素贝叶 ...

  3. 认识一下java神器Btrace

    转载: http://calvin1978.blogcn.com/articles/btrace1.html BTrace是神器,每一个需要每天解决线上问题,但完全不用BTrace的Java工程师,都 ...

  4. 如何将打印内容转换为bmp位图文件

    bmp是一种与硬件设备无关的图像文件格式,使用非常广.它采用位映射存储格式,除了图像深度可选以外,不采用其他任何压缩,因此,BblP文件所占用的空间很大.BMP文件的图像深度可选lbit.4bit.8 ...

  5. Jquery退出循环

    返回falsh即可 return false; 如果return true; 则进入下一次循环

  6. ControlTemplate in WPF —— Window

    <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" x ...

  7. 无界面上(linux)运行jmeter(2)

    无界面上(linux)运行jmeter 1.先在bin目录下面创建一个文件夹testplan用来存放脚本(.jmx文件),然后在创建一个文件夹testresult用来存放脚本执行后的结果(.jtl文件 ...

  8. oracle 12 安装

    oracle 12 第二版本安装 下载地址  https://www.oracle.com/technetwork/cn/middleware/webcenter/content/downloads/ ...

  9. linux配置多个ip

    linux配置多个ip /sbin/ifconfig eth0:1 172.19.121.180 broadcast 172.19.121.255  netmask 255.255.255.0 up ...

  10. 求第n个质数

    输入一个不超过 10000 的正整数 n,求第n个质数 样例输入 10 样例输出 29 题目地址 #include<stdio.h> #include<math.h> int ...