博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
关于React中props与state的一知半解
阅读量:5050 次
发布时间:2019-06-12

本文共 1439 字,大约阅读时间需要 4 分钟。

        最近由于工作需要,学习了一下前端框架react,在入门基础的时候,前期很顺利,可是到了props与state的部分遇到了一些问题,经过查阅资料等等一系列工作后,终对这两个概念有了一知半解,现将我的一些感悟写下来,希望可以帮助更多人。

props

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

 1.不可变(只读性)

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

    2.可以设置默认值

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

class ShowIt extends React.Component{                render(){                    return(                        

my name is {this.props.name}

); }; }; ShowIt.defaultProps={name:"aabS"}; const ShowName=
; 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则仅用于实现交互功能。

转载于:https://www.cnblogs.com/yeguang111/p/9481673.html

你可能感兴趣的文章
wepy的使用
查看>>
转载:mysql数据库密码忘记找回方法
查看>>
scratch少儿编程第一季——06、人在江湖混,没有背景怎么行。
查看>>
面向对象1
查看>>
在ns2.35中添加myevalvid框架
查看>>
【贪心+DFS】D. Field expansion
查看>>
为什么要使用href=”javascript:void(0);”
查看>>
二进制文件的查看和编辑
查看>>
C# Async与Await的使用
查看>>
Mysql性能调优
查看>>
iOS基础-UIKit框架-多控制器管理-实例:qq界面框架
查看>>
javascript学习---BOM
查看>>
IOS-每个程序员的编程之路上都应该看这11本书
查看>>
自定义tabbar(纯代码)
查看>>
extjs fieldset 和 radio
查看>>
小程序底部导航栏
查看>>
Codeforces Gym101505G:Orchard Division(扫描线+线段树第k大)
查看>>
ibatis学习笔记
查看>>
18-ES6(1)
查看>>
poj1611 简单并查集
查看>>