简述props和state的作用和应用场景

1、简述props和state的作用和应用场景?(难易指数:☆)

React的数据流:由父节点传递到子节点(由外到内传递),如果顶层组件某个prop改变了,React会向下传递,重新渲染所有使用过该属性的组件。

除此之外React 组件“内部”还具有自己的“状态”,这些状态只能在组件内部修改。通过与用户的交互(点击事件),实现不同状态(显示、隐藏、数量增加...),然后渲染UI,让用户界面和数据保持一致。
React中只需更新组件的state,然后根据新的 state 重新渲染用户界面。

this.props 属性:由外部世界传入到组件内部,只读,不可修改。

this.state 状态:由组件自己创建,记录内部变化,可以修改,一般由用户交互产生新的状态(数据)。

总结

1、 状态的初始化,在constructor中使用this.state方法来定义初始化状态
2、 如果要修改状态,必须使用this.setState({newState:newValue})

React组件显示的变化,都是通过状态的修改,自动(重写)渲染到页面中。

state 和 props 主要的区别在于 props 是不可变的,而 state 可以根据与用户交互来改变。
这就是为什么有些容器组件需要定义 state 来更新和修改数据。而组件只能通过 props 来传递数据。

state属于内部状态维护。
props属于外部传入(定义)。

2、简述PropsType的作用,并举2个常见例子。(难易指数:☆)

React组件创建的时候,需要传入属性,我们可以使用使用PropTypes进行类型检查,您可以使用React.PropTypes在组件的道具上运行。

React.PropTypes 自 React v15.5以来,它已经进入了一个不同的包--”prop-types”.

安装

yarn add prop-types -D

使用

import PropTypes from 'prop-types';
PropTypes.array  //检测数组类型
PropTypes.bool  //检测布尔类型
PropTypes.func  //检测函数类型
PropTypes.number  //数字
PropTypes.object  //对象
PropTypes.string  //字符串
PropTypes.symbol  //symbol
PropTypes.instanceOf()  //继承自XXX
PropTypes.oneOf([‘值1’,’值2’])  //任意一个值
PropTypes.oneOfType([ PropTypes.array, PropType.bool ... ])  //数组内任意一种类型
默认情况下,验证器将props视为可选属性。
class LifeCycle extends React.Component{
    static propTypes = {  // 定义默认参数
        name:PropTypes.string
    }
}

3、简述组件的生命周期及对应作用(难易指数:☆☆)

React生命周期可以分成三个阶段:

1、挂载阶段:对象创建到完全渲染(实例化)
2、运行阶段:组件状态的改变(最长阶段)
3、卸载阶段:组件使用完毕后,或者不需要存在与页面中,那么将组件移除,执行销毁。

生命周期(三个阶段)
    1. 挂载阶段(组件初始化及第一次渲染)
       生命周期钩子函数
        constructor: 状态初始化
        componentWillMount: 通知函数,状态初始化完毕,可以开始渲染(在REACT 17.0会被废弃)
        render: 渲染函数,进行组件渲染
        componentDidMount: 通知函数,初始化渲染完毕,可以发送初始化ajax请求数据


    2. 运行阶段(所有函数调用次数>=0)
        componentWillReceiveProps: 自定义属性发生变化
        shouldComponentUpdate: 是否允许组件渲染(true允许,false阻止)
        componentWillUpdate:通知函数:组件将要更新
        render: 渲染函数
        componentDidUpdate: 通知函数:组件更新渲染完毕

    3. 销毁阶段
        componentWillUnmount: 卸载前的最后一次通知(资源回收!!!)


    3个最重要的钩子
    constructor 定义状态
    componentDidMount 初始化ajax数据

    componentWillUnmount 卸载组件,回收资源(例如定时器)
      //卸载函数(性能优化挂钩的函数!!)
      //资源回收及释放(例:定时器之类就在此函数内进行回收!!!!!!)

4、简述在生命周期中的哪一步你应该发起 AJAX 请求,为什么(难易指数:☆☆)

componentDidMount: 通知函数,初始化渲染完毕,可以发送初始化ajax请求数据

5、简述受控组件和不受控组件的区别(难易指数:☆☆)

this.props 属性:由外部世界传入到组件内部,只读,不可修改。
this.state 状态:由组件自己创建,记录内部变化,可以修改,一般由用户交互产生新的状态(数据)。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 218,284评论 6 506
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,115评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,614评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,671评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,699评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,562评论 1 305
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,309评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,223评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,668评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,859评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,981评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,705评论 5 347
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,310评论 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,904评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,023评论 1 270
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,146评论 3 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,933评论 2 355

推荐阅读更多精彩内容

  • 作为一个合格的开发者,不要只满足于编写了可以运行的代码。而要了解代码背后的工作原理;不要只满足于自己的程序...
    六个周阅读 8,448评论 1 33
  • React.js 小书学习 之 【使用 JSX 描述 UI 信息】 从 JSX 到页面 过程图解:JSX 到页面过...
    zdlucky阅读 1,279评论 0 20
  • 学习如何在Flow中使用React 将Flow类型添加到React组件后,Flow将静态地确保你按照组件被设计的方...
    vincent_z阅读 6,353评论 4 21
  • 以下内容是我在学习和研究React时,对React的特性、重点和注意事项的提取、精练和总结,可以做为React特性...
    科研者阅读 8,232评论 2 21
  • 1、ref为子组件指定一个索引名称,通过索引来操作子组件;2、this.$parent 可以直接访问该组件的父实例...
    圆梦人生阅读 2,196评论 0 1