React study(二)

前端之家收集整理的这篇文章主要介绍了React study(二)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

目录

react 组件生命周期概要

组件本质上是状态机,输入确定,输出一定确定。
状态发生转换时会触发不同钩子函数,从而让开发者有机会作出响应。可以用事件的思路来理解状态。

react整个生命周期:

不同阶段的自定义函数

初始化:

注意:getDefaultProps(在第一个示例被初始化的时候被调用)
运行中:

销毁:

react 组件生命周期

生命周期的初始化阶段

getDefaultProps:只调用一次,实例之间共享引用
getInitialState:初始化每个实例特有的状态
componentWillMount:render之前最后一次修改状态的机会
render:只能访问this.pros和this.state,只有一个顶层组件,不允许需要改状态和DOM输出
componentDidMount:成功render并渲染完成真实DOM之后触发,可以修改DOM

生命周期的运行中阶段

componentWillReceiveProps:父组件修改属性触发,可以修改属性修改状态
shouldComponentUpdate:返回false会阻止render调用
componentWillUpdate:不能修改属性和状态
render:只能访问this.props和this.state,只有一个顶层组件,不允许修改状态和DOM输出
componentDidUpdate:可以修改DOM

生命周期的销毁阶段

componentWillUnmount:在删除组件之前进行清理操作,比如计时器和事件监听器

属性的含义和用法

属性的含义:
props=properties
属性:一个事物的性质与关系
属性往往是与生俱来的、无法自己改变的

属性三种用法
①键值对 等号右边可以三种写法
name= “tim”、{123} 、{“123”}、{[1,2,3]}、{variable}
②父组件与子组件
var props={ one:”123”,two:”321”}
<helloworld {...props} />调用不方便)
var instance=React.renser(<helloworld></helloworld>,document.body);
instance.setProps({name:"Tim"});
(不建议使用,违背react原则)
###状态的含义和用法
state
状态:是无所出的状况
状态时由事物自行处理、不断变化的
getInitialState:初始化每个实例特有的状态
setState:更新组件状态

###属性和状态的对比
####相似点
都是纯JS对象、都会触发render更新、都具有确定性

注意:组件在运行时需要修改的数据就是状态

项目分析

文章评论项目)
分析构成项目的组件:

demo下载:demo

猜你在找的React相关文章