React组件生命周期中的相关函数(记录/收藏)

component是通过自定义的几个函数来控制组件在生命周期中的各个阶段动作(本处所写的state同意指当前组件内部定义的state)

  • constructor(props, context)
构造函数,在创建组件的时候调用一次,props为父组件传到子组件中的所有属性集合
  • componentWillMount()
在组件加载前执行一次,如果在该处更新state,组件渲染时是读取到的是最新的state。
  • componentDidMount()
在组件加载后执行一次,此时组件已渲染过一次,可调用this.refs获取DOM节点
  • componentWillReceiveProps(nextProps)
nextProps是父组件传递给子组件的最新props。子组件已加载,父组件发生render的时候子组件就会
调用componentWillReceiveProps(不管props有没有更新,也不管父子组件之间有没有数据交换)
  • shouldComponentUpdate(nextProps, nextState)
返回boolean值,默认返回true。nextProps是父组件传递给子组件的最新props,nextState为子组件最新的state。
通过返回true/false来控制子组件是否需要重新渲染。有一些数据的改变并不需要重新渲染,在该处就可以拦截,做优化处理。
  • componentWillUpdate(nextProps, nextState)
shouldComponentUpdate返回true或者调用forceUpdate之后,componentWillUpdate会被调用
  • componentDidUpdate(preProps, preState)
除了首次render之后调用componentDidMount,其它render结束之后都是调用componentDidUpdate。

componentWillMount、componentDidMount和componentWillUpdate、componentDidUpdate可以对应起来。区别在于,前者只有在挂载的时候会被调用;而后者在以后的每次更新渲染之后都会被调用。

  • componentWillUnmount()
组件被卸载的时候调用。一般在componentDidMount里面注册的事件需要在这里删除。
触发render方法

在react中,触发render的有4条路径。

以下假设shouldComponentUpdate都是按照默认返回true的方式。

  • 首次渲染Initial Render

  • 调用this.setState (并不是一次setState会触发一次render,React可能会合并操作,再一次性进行render)

  • 父组件发生更新(一般就是props发生改变,但是就算props没有改变或者父子组件之间没有数据交换也会触发render)

  • 调用this.forceUpdate

常用语法
  • class 属性需要写成 className ,for 属性需要写成 htmlFor ,这是因为 class 和 for 是 JavaScript 的保留字。
  • style={{}} 最外层{}告诉jsx这是js语法,而里面的{}表示样式包裹成对象
  • this.props 获取当前组件的props属性对象。
  • this.state 获取当前组件的state状态值对象
  • this.setState 更新当前组件state状态值对象(使用redux后不建议在组件内使用自身的state)
  • this.props.children 获取组件的所有子节点,使用React.Children.map来遍历,从而忽略掉this.props.children返回值的类型
  • this.refs.[refName] 获取真实DOM节点,故必须在组件render后调用
<input type="text" ref="myTextInput" />
获取该节点:this.refs.myTextInput;
  • PropTypes 用来验证组件的props入参是否符合要求
Index.propTypes = {
  value: PropTypes.string.isRequired,
  onIncreaseClick: PropTypes.func.isRequired,
  onReduceClick: PropTypes.func.isRequired
}
  • key 循环输出元素时,用来唯一标识同父同层级的兄弟元素,当React作diff时,只要子元素有key属性,便会去原v-dom树中相应位置(当前横向比较的层级)寻找是否有同key元素,比较它们是否完全相同,若是则复用该元素,免去不必要的操作。故不推荐用数组index来作为key,可用数据对象的某个唯一属性,或是对数据进行hash来生成key。
  • 求值表达式 使用{}包起来,在{}中不能直接使用if/for语句,但可以返回值表达式
  • 条件判断 使用三元表达式来期待if-else,善用比较运算符“ || ”
  • 函数表达式 使用(function(){})()来强制执行函数,返回值
  • 注释 {/* 一般注释, 用 {} 包围 */}

React框架把component看作一个状态机,通过改变状态值来控制页面view的输出,其实你可以看成React框架注重数据与DOM的分离,用数据变化来控制DOM的变化,不同于jQuery直接对DOM对象的操作。

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

推荐阅读更多精彩内容