react之state&生命周期

在元素渲染章节中，我们了解了一种更新UI界面的方法，通过调用ReactDOM.render()修改我们想要的

元素

import ReactDOM from ‘react-dom‘

class ClockCom extends React.Component{
	render(){
		return(
			<div>
				<h1>this clock component</h1>
				<h2>It is {this.props.time.toLocaleTimeString()}</h2>
			</div>
		)
	}
}
function tick(){
	ReactDOM.render(<ClockCom time={new Date()} />,document.getElementById("clock-com"))
}
setInterval(tick,1000)

在上述代码中我们封装了一个clockCom的class组件，每次组件更新时候render方法都会被调用，但只要在相同的DOM节点中渲染,就

仅有一个ClockCom组件的class实例被创建使用

但是在实际的React项目中一个单页面web应用ReactDOM.render通常只调用一次。那么在react

组件中，我们需要更新UI，这时我们就需要用到state了。

向class组件中添加局部的state

我们通过以下三步将date从props移动到state中

  1. 把render()方法中的this.props.date替换成this.state.date
  2. 在class构造函数中，为this.state赋值,通过super方式将props传递到父类的构造函数中,class组件应该始终使用props

    参数来调用父级的构造函数

  3. 移除元素的date属性

    代码如下：

class ClockCom extends React.Component{
	construcor(props){
		super(props)
		this.state = {time:new Date()}
	}
	render(){
		return(
			<div>
				<h1>this clock component</h1>
				<h2>It is {this.state.time.toLocaleTimeString()}</h2>
			</div>
		)
	}
}
ReactDOM.render(<ClockCom />,document.getElementById(‘clock-com‘))

接下来，设置ClockCom的计时器并每秒更新它

将生命周期方法添加到Class中

在具有许多组件的应用程序中，当组件被销毁时，释放所占用的资源是非常重要的。当ClockCom组件第一次

被渲染到DOM中的时候，就为其设置一个计时器，这在React中被称为"挂载(mount)"

同时，当DOM中Clock组件被删除的时候，应该清除计时器，这在React中被称为"卸载(unmount)"

我们可以为class组件声明一些特殊方法，当组件挂载或卸载的时候就去执行这些方法

componentDidMount(){
}
componentWillUnmount(){
}

这些方法叫做生命周期方法

componentDidMount()方法会在组件已经被渲染到DOM中后运行，所以，最好在这里设计计时器

在componentWillUnmount()方法中，组件即将卸载，可以在这里清除定时器

完整代码如下

class ClockCom extends React.Component{
	constructor(props){
		super(props)
		this.state = {time:new Date()};
	}
	componentDidMount(){
		this.timerID = setInterval(() => this.tick(),1000)
	}
	componentWillUnmount(){
		clearInteval(this.timerID)
	}
	tick(){
		this.setState({
			time:new Date
		})
	}
	render(){
		return(
			<div>
				<h1>this clock component</h1>
				<h2>It is {this.state.time.toLocaleTimeString()}</h2>
			</div>
		)
	}
}
ReactDOM.render(<ClockCom />,document.getElementById("clock-com"))

概括一下发生了什么和这些方法的调用顺序：

  1. 当被传给ReactDOM.render()的时候，React会调用

    ClockCom组件的构造函数。因为ClockCom需要显示当前的时间，所以它会用一个包含当前时间的对象来初始化

    this.state。我们之后会更新state。

  2. 之后React会调用组件的render()方法。这就是React确定该在页面展示什么的方式。

    然后React更新DOM来匹配ClockCom渲染输出。

  3. 当ClockCom的输出被插入到DOM中后，React就会调用ComponentDidMount()生命周期方法。

    在这个方法中，ClockCom组件向浏览器请求设置一个计时器来每秒调用一次组件的tick()方法

  4. 浏览器每秒都会调用一次tick()方法。在这方法之中，ClockCom组件会通过调用

    setState()来计划进行一次UI更新。得益于setState()的调用，React能够知道state已经改变了，然后会重新

    调用render()方法来确定页面上该显示什么。这一次，render()方法中的

    this.state.time就不一样了，如此一来就会渲染输出更新过的时间。React

    也会相应的更新DOM。

  5. 一旦ClockCom组件从DOM中被移除，React就会调用componentWillUnmount()生命周期，这样计时器就停止了

这样我们就实现了一个时钟的组件。从上述例子中我们来学习react的state和生命周期

什么是state

state可被视为React组件中的一个集合，这个集合的内容是是该组件UI中可变状态的数据。所谓可变状态的数据，就是在当前

组件中可以被修改(或被更新)的数据。

组件对state的要求

  • state必须是能代表一个组件UI呈现的完整状态集:组件UI的任何改变，

    都可以从state的变化中反映出来

  • state必须是代表一个组件UI呈现的最小状态集:state中的所有状态都是用于反映组件UI的变化，没有任何

    多余的状态，也不需要通过其他状态计算而来的中间状态。

变量能否作为state的依据

组件中用到的一个变量应不应该作为一个组件的state，可以通过下面的4条依据进行判断

  1. 这个变量是否通过props从父组件中获取?如果是，那么它不适合以state来表示。
  2. 这个变量是否在组件的整个生命周期中都保持不变?如果是，那么他不适合以state来表示
  3. 这个变量是否可以通过其他状态(state)或者属性(props)计算得到?如果是，那么它不适合以state来表示
  4. 这个变量是否在render方法中作为一个用于渲染的数据?如果不是，那么它不适合以state来表示。这种情况下，

    这个变量更适合定义为组件的普通属性，例如在组件中用到的定时器，就应该直接定义为this.timer,而不是this.state.timer

  5. 另外要考虑这个状态需不需要状态提升到父组件中

使用react经常会遇到几个组件需要共用状态数据的情况。这种情况下，我们最好将这部分共享的状态提升

至他们最近的父组件当中进行管理。react的状态提升主要就是用来处理父组件和子组件的数据传递的；他们可以

让我们的数据流动的形式是自定向下单向流动的，所有组件数据都是来自于他们的父辈组件，也都是有父辈组件来统一存储和修改，在传入子组件当中的

state与props的区别

在react组件中，我们都需要用到数据，需要改变数据以实现刷新视图。我们知道React的数据是自顶向下单向流动

的，也就是从父组件传到子组件，组件的数据存储在props和state中，这两个属性有什么区别呢?

让我们来看下面的代码

class SetStateCom extends React.Component{
	constructor(props){
		super(props)
		this.state = {
			count:0
		}
		this.handleSomething = this.handleSomething.bind(this)
	}
	render(){
		return(
			<div>
				<button onClick={this.handleSomething}>+</button>
				<span>{this.state.count}</span>
				<button>-</button>
			</div>
		)
	}
	incremnetCount(){
		this.setState({count:this.state.count+1})

	}
	handleSomething(){
		this.incremnetCount()
		this.incremnetCount()
		this.incremnetCount()
		console.log(this.state.count)

	}
}
ReactDOM.render(<SetStateCom />,document.getElementById(‘set-state‘))

上面代码中，我们给state定义了一个count,定义了一个方法incrementCount来增加state.count的值，

给按钮绑定了一个事件handleSomething，点击执行三次incrementCount方法，但是在我们点击按钮后，执行 结果并不是

我们所设想的那样，在次点击时候，没有点击的时候，this.state.count的值是0，第一次点击的时候this.state.count的

值是1，第二次点击的时候this.state.count的值是2...这是为什么呢？

思考一下调用setState()时候发生了什么？

React首先会将你传递给setState的参数对象合并到当前state对象中，然后

会启动所谓的reconciliation，即创建一个新的React Element tree

(UI层面的对象表示)，和之前的tree做比较，基于你传递给setState的对象找出发生的变化，然后更新DOM.

所以调用setState并不一定会即时更新state

考虑到性能问题，React可能会将多次setState调用批处理(batch)为一次state的更新

这又意味着什么呢？

首先，‘多次setState()调用‘的意思是在某个函数中调用了多次setState(),就像上述代码

incremnetCount(){
	this.setState({count:this.state.count+1})
	console.log(this.state.count)
}
handleSomething(){
	this.incremnetCount()
	this.incremnetCount()
	this.incremnetCount()
	console.log(this.state.count)

}

面对这种多次setState()调用的情况，为了避免重复做上述大量的工作，React并不会

真的完整调用三次‘set-state‘；相反，它会把这些部分更新打包装好，一次搞定。

在这里传递setState()的纯粹是个对象。现在，假设React每次遇到多次

setState()调用都会作上述批处理过程，即每次调用setState()时传递给他的所有对象合并为一个对象，

然后用这个对象去做真正的setState()

在JavaScript中，对象合并可以这样写

const singleObject = Object.assign(
	{},
	objectFormSetState1,
	objectFormSetState2,
	objectFormSetState3
)

这种写法叫做object组合(composition)

在JavaScript中，对象‘合并(merging)‘或者叫对象组合(composing)的工作机制如下L

如果传递给Object.assign()的多个对象有相同的键，那么最后一个对象的值会覆盖之前的

const me = {name:‘juce‘},
	  you = {name:‘coke‘},
	  we = Object.assign({},me,you);
	  we.name === ‘coke‘;//true
	  console.log(we);//{name:‘coke‘}

因为you是最后一个合并进we中的，因此you的name属性值会覆盖me的

name属性值，所以最后输出的we的name为you的name值

综上所述，如果你多次调用setState()函数，每次都传递给它一个对象，那么React就会将

这些对象合并。也就是说，基于你传进来的多个对象，React会组合出一个新对象。

如果这些对象有同名的属性，那么就会取最后一个对象的属性值

这意味着handleSomething函数的在点击时结果会是1而不是3。因为React并不会按照

setState()的调用顺序即时更新state，而是首先会将所有的对象合并到一起

需要搞清楚的是，给setState()传递对象本身是没有问题的，问题出在当你想要基于之前的state计算下一个

state值时还给setState()传递对象

正确的做法是

让函数式setState来拯救

将上面incremnetCount函数改为如下代码

incremneCount(){
	this.setState((state) => {
		return {
			count:state.count + 1
		}
	})
}

执行结果，第一次点击结果为3，和我们预想的一样

因此props和state区别就是：

state在当前组件中是可变的，满足组件UI变化的需求

props对于子组件来说是只读的

如何正确修改state

  • 不要直接给state赋值
this.state.time = new Date()

只有在组件的构造函数中初始化state的时候才允许这样直接赋值；其他绝大多数时候，应该使用setState(),在本文的最后，

正确的写法如下：

this.setState({
	time:new Date()
})

state的更新可能是异步的

react可以将多个setState调用合并成一个调用来提高性能。同时，Props的更新机制也是同理。这就是"异步更新"。

因为this.props和this.state可能是异步更新，你不应该依靠他们的值来计算下一个状态

弥补这个缺憾：

我们不能直接通过this.state和this.props获得state和props的最新状态，但是在this.setState的时候，

state和props的最新状态可以通过一个回调函数来获得:

this.setState((preState,props) =>({
	counter:preState.quantity + 1 + props.xxx
}))

上述回调函数的第一个参数preState可捕获到最新的上一个state；第二个参数props可捕获到最新的props

state的更新是一个浅合并的过程

当调用setState修改组件状态时，只需要传入发生改变的state，而不必组件完整的state，因为组件state的更新是一个浅合并的过程。

例如，一个组件初始化时的状态为:

this.state = {
	title:‘React‘,
	content:‘React is an wonderful Js library!‘
}

如果你只需要修改title，你应该：

this.setState({
	title:‘reactJS‘
})

React会合并新的title到原来的组件状态中，同时2保留原有的状态content，合并后的state的结果为

{
	title:‘reactJS‘,
	content:‘React is an wonderful Js library!‘
}

React中的immutability(不变性)

React官方建议把State当做是不可变对象，State中包含所有状态都应该是不可变对象

当State中的某个状态发生变化，我们应该重新创建这个状态对象而不是直接修改原来的状态。state

根据状态类型可以分为三种。

  1. 数字，字符串，布尔值，null，undefined这五种不可变类形。
this.setState({
	num:1,
	string:‘hello‘,
	ready:true
})
  1. 数组类型

    js数组类型为可变类型。加入有一个state是数组类型，例如students，修改students的

    状态应该保证不会修改原来的状态，例如新增一个数组元素，应使用数组的concat方法或ES6的数组扩展

    语法

class ArrayDemo extends React.Component{
	constructor(props){
		super(props)
		this.state = {
			students:[‘liman‘,‘gaoxi‘,‘huangjia‘]
		}
		this.changeStudents = this.changeStudents.bind(this)
	}
	render(){
		return(
			<div>
				<div>
					{this.state.students.map((student,i) => <div key={i}>{student}</div>)}
				</div>
				<button onClick={this.changeStudents}>改变students</button>
			</div>
		)
	}
	changeStudents(){
		this.setState({
			students:this.state.students.concat(‘xiaoqin‘)
		})
		console.log(this.state)
	}
}
ReactDOM.render(<ArrayDemo />,document.getElementById(‘array‘))

上面代码中，我们向数组中添加新的一项，如果用push，原数组会发生改变，但是在react，不会更新状态，会报错，因此使用concat来实现

使用ES6数组的扩展来实现,将上面代码改成如下

changeStudents(){
	this.setState(preState => ({
     students:preState.students.concat(‘xiaoqin‘)
   }))
	console.log(this.state)
}

从数组中截取部分作为新状态时，应使用slice方法；当从数组中过滤部分元素后，作为新状态

时，使用filter方法。不应该使用push、pop、shift、unshift、splice等方法修改数组

数组类型的状态，因为这些方法都是在原数组的基础上修改的。应当使用不会修改原数组而返回一个新数组

的方法，例如concat、slice、fliter等

当从students中截取部分元素作为新状态时候，使用数组的slice方法:

方法一：将state先赋值给另外的变量，然后使用slice创建新数组

var students = this.state.students
this.setState({
	students:students.slice(1,3)
})

方法二：使用preState、slice创建新数组

this.setState((preState)=>({
	students:preState.students.slice(1,3)
}))

当数组从students中过滤部分元素后，作为新状态时，使用数组的fliter方法

方法一：将state先赋值给另外的变量，然后使用filter创建新数组

var students = this.state.students
this.setState({
	students:students.fliter(item =>{
		return item != ‘xiaoqin‘
	})
})

方法二：使用preState、filter创建新数组

this.setState((preState)=>({
	students:preState.students.fliter((item) =>  {
		return item !=‘xiaoqin‘
	})
}))
  1. 普通对象

    对象也是可变类型，修改对象类型的状态的时，应保证不会修改原来的状态。可以使用ES6的Object.assign方法或者对象扩展语法

class ObjectDemo extends React.Component{
	constructor(props){
		super()
		this.state = {
			school:{
				classNum:7,
				teacher:‘wangfayue‘,
				students:50
			}
		}
		this.changeSchool = this.changeSchool.bind(this)
	}
	render(){
		return(
			<div>
				<div>
					{Object.keys(this.state.school).map(key =>(
						<div key={key}>{key}:{this.state.school[key]}</div>
					))}
				</div>
				<button onClick={this.changeSchool}>修改对象</button>
			</div>
		)
	}
	changeSchool(){
		this.setState((preState) => ({
			school:Object.assign({},preState.school,{slogn:‘good good study day day up‘})
		}))
	}
}
ReactDOM.render(<ObjectDemo />,document.getElementById("object"))

使用ES6对象扩展语法，上面代码改为

changeSchool(){
	var slogn = ‘day day study‘
	this.setState(preState => ({
		school:{...preState.school,slogn}
	}))
}

react组件生命周期

看上面的图片，我们可能理解不了什么，让我们来看下demo

class LifeCicle extends React.Component{
	constructor(props){
		super(props)
		this.state = {
			txt:‘hello world‘,
			name:‘react‘
		}
		console.log(‘constructor: ‘,this)
		this.changeTxt = this.changeTxt.bind(this)
		this.unloade = this.unloade.bind(this)
	}
	static getDerivedStateFromProps(props,state){
		console.log(props,state)
		console.log(‘getDerivedStateFromprops: ‘,this)
		return null
	}
	getSnapshotBeforeUpdate(prevProps,prevState){
		console.log(prevProps,prevState)
		console.log(‘getSnapshotBeforeUpdate: ‘,this)
		return prevProps
	}
	changeTxt(){
		this.setState({
			txt:‘hello react‘
		})
	}
	unloade(){
		ReactDOM.unmountComponentAtNode(document.getElementById(‘life-cycle‘))
	}
	render(){
		console.log(‘render: ‘,this)
		return(
			<div>
				<div>{this.props.user}</div>
				<div>{this.state.txt}</div>
				<div>{this.state.name}</div>
				<button onClick={this.changeTxt}>修改txt</button>
				<button onClick={this.unloade}>卸载组件</button>
			</div>
		)
	}
	componentDidMount(){
		console.log(‘componentDidMount: ‘ ,this)
	}
	shouldComponentUpdate(nextProps){
 		console.log(nextProps)
		console.log(‘shouldComponentUpdate: ‘,this)
		if(nextProps){
			return nextProps
		}
	}
	componentDidUpdate(){
		console.log(‘componentDidUpdate: ‘,this)
	}
	componentWillUnmount(){
		console.log(‘componentWillUnmount‘,this)
	}
}
ReactDOM.render(<LifeCicle user=‘dehenliu‘ />,document.getElementById(‘life-cycle‘))

执行结果如下：

一开始没做任何操作的结果

点击修改txt按钮结果

点击卸载组件按钮结果

从上面执行结果，我们可以知道一开始就执行constructor，getDerivedStateFromProps，render，componentDidMount

函数，在点击changeTxt按钮后，更新state状态，会执行getDerivedStateFromprops，shouldComponentUpdate，render，

getSnapshotBeforeUpdate，componentDidUpdate函数，点击‘卸载组件‘后，执行componentWillUnmount，根据这些结果我们可以

将react的生命周期分为三个阶段

  • 挂载阶段
  • 更新阶段
  • 卸载阶段

挂载阶段

挂载阶段，也可以理解为组件的初始化阶段，就是将我们的组件插入到DOM中，只会发生一次，这个阶段的生命周期函数调用如下

  • constructor
  • getDerivedStateFromProps
  • render
  • componentDIDMount
constructor

组件构造函数，第一个被执行

如果没有显示定义它，会拥有一个默认的构造函数

如果显示定义了构造函数，我们必须在构造函数第一行执行super(props),否则我们无法在

构造函数里拿到this对象

在构造函数里，一般做两件事情

  • 初始化state对象
  • 给自定义方法绑定this

禁止在构造函数中调用setState，可以直接给state设置初始值

getDerivedStateFromProps

static getDerivedStateFromProps

一个静态方法，所以不能在这个函数里面使用this，这个函数有两个参数props和state，

分别指接收到的新参数和当前的state对象，这个函数会返回一个对象用来更新当前state

对象，如果不需要更新可以返回null

该函数会在挂载时候，接收到新的props，调用了setState和forceUpdate时被调用

render

react中最核心的方法，一个组件中必须要有这个方法

返回类型有一下几种

  • 原生的DOM，如div
  • React组件
  • Fragment(片段)
  • Portals(插槽)
  • 字符串和数字，被渲染成text节点
  • Boolean和null，不会渲染任何东西

render函数是纯函数，里面只做一件事，就是返回需要渲染的东西，不应该

包含其他的业务逻辑，如数据请求，对于这些业务逻辑请移到componentDidiMount

和componentDidUpdate中

componentDidMount

组件装载之后调用，此时，我们可以获取到DOM节点并操作，比如对canvas，svg的操作，

服务器请求，订阅都可以卸载这个里面，但是记得在componentWillUnmount中取消订阅

在componentDidMount中调用setState会触发一次额外的渲染，多调用了一次render

函数，但是用户对此没有感知，因为他是在浏览器刷新屏幕前执行的，但是我们应该在开发中

避免它，因为它会带来一定的性能问题，我们应该在constructor中初始化我们的state

对象，而不应该componentDidMount调用state方法

更新阶段

更新阶段，当组件的props改变了，或组件内部调用了setState或者forceUpdate发生，会发生多次

这个阶段的生命周期函数调用如下

  • getDerivedStateFromProps
  • shouldComponentUpdate
  • render
  • getSnapshotBeforeUpdate
  • componentDidUpda
getDerivedStateFromProps

这个方法在挂载阶段已经讲过，在更新阶段，无论我们接收到新的属性，调用了setState还是调用了forceUpdate，

这个方法都会被调用

shouldComponentUpdate

shouldComponentUpdate(nextProprs,nextState)

有两个参数nextProps和nextState，表示新的属性和变化之后的

state，返回一个布尔值，true表示会触发重新渲染，false表示不会触发重新

渲染，默认返回true

注意当我们调用forceUpdate并不会触发此方法

因为默认返回true，也就是只要接收到新的属性和调用了setState都会触发

重新的渲染，这会带来一定的性能问题，所以我们需要将this.props与nextProps

以及this.state与nextState进行比较来决定是否返回false，来减少

重新渲染

getSnapshotBeforeUpdate

getSnapshotBeforeUpdate(prevProps,preState)

这个方法在render之后，componentDidUpdate之前调用，有两个参数

nextProps和nextState，表示之前的属性和之前的state，这个函数有一个返回值，会作为第三个

参数传给componentDidUpdate，如果你不想要返回值，请返回null，不写的

话控制台会有警告，这个方法一定要和componentDidUpdate一起使用，否则控制台也会有警告

componentDidUpdate

componentDidUpdate(prevProps, prevState, snapshot)

该方法在getSnapshotBefroeUpdate方法之后被调用，有三个参数

prevProps,prevState,snapshot，表示之前的props，之前的state和

snapshot。第三个参数是getSnapshotBefore返回的

在这个函数里我们可以操作DOM，和发起服务器请求，还可以setState，但是注意一定

要用if语句控制，否则会导致无限循环

卸载阶段

卸载阶段，当我们组件被卸载或者销毁了

这个阶段的生命周期函数只有一个

  • componentWillUnmount
componentWillUnmount

当我们的组件被卸载或者销毁了就会调用，我们可以在这个函数里去清除一些定时器，取消网络请求，

清理无效的DOM元素等垃圾清理工作

注意不要在这个函数里去调用setState，因为组件不会重新渲染了

原文地址：https://www.cnblogs.com/dehenliu/p/12616948.html

时间： 2024-10-13 06:23:05

react之state&生命周期的相关文章

react学习小结(生命周期- 实例化时期 - 存在期- 销毁时期)

react学习小结 本文是我学习react的阶段性小结,如果看官你是react资深玩家,那么还请就此打住移步他处,如果你想给一些建议和指导,那么还请轻拍~ 目前团队内对react的使用非常普遍,之前对react使用不多,正好我目前在做的项目也在使用react+redux,借着这个机会系统的学习下react+redux. react是什么 react是一个JavaScript类库,通过react,我们可以构建可组合的UI,也就是说,我们可以通过重用组件来组合出我们的UI.可以说react的核心便是

2. React组件的生命周期

2. React组件的生命周期 使用React开发时候用到最多的就是React的组件了,通过继承React.Component,加入constructor构造函数,实现Render方法即可.这当中React组件为我们提供了很多钩子,以便更加方便精细的控制程序. 钩子包括:componentWillMount/componentDidMount,同时在调用setState时候会触发:componentWillReceiveProps/shouldComponentUpdate/ComponentW

Vue与React的异同 -生命周期

vue的生命周期 创建前 beforeCreate 创建   create 挂载前 beforeMount 挂载 mounted 更新前 beforeUpdate 更新 updated 销毁前 beforeDestroyed 销毁  destoryed methods --方法 -----------------------------------华丽的分割线------------------------- 一个React组件的生命周期分为三个部分:挂载期(Mounting).存在更新期(Up

React 的组件生命周期

React组件的state或者props发生改变后会导致这个组件重新渲染,此时DOM也会有相应的变化.其中只有Render方法在上一篇博文中提到过,就是DOM渲染时的方法.当然,只有这个方法是不够的哦!,引文在实际的开发中,开发者们需要对组件的各个阶段进行控制,这样就可以高效的进行开发了,为此,就有了React的组件生命周期的概念. 对于一个基本的React组件,可以把每一个React组件的生命周期分为初始化.挂载.更新.卸载四个阶段,在React的这四个阶段中提供了不同的方法,以方便开发者有足

React 之 组件生命周期

React 之 组件生命周期 理解1) 组件对象从创建到死亡它会经历特定的生命周期阶段2) React组件对象包含一系列的勾子函数(生命周期回调函数), 在生命周期特定时刻回调3) 我们在定义组件时, 可以重写特定的生命周期回调函数, 做特定的工作 生命周期详述1) 组件的三个生命周期状态: * Mount:插入真实 DOM * Update:被重新渲染 * Unmount:被移出真实 DOM2) React 为每个状态都提供了勾子(hook)函数 * componentWillMount()

React组件的生命周期

整个组件,从创建组件类开始,到渲染,到消亡的过程,就是组件的生命周期. 组件的生命周期可以分为三个阶段: 挂载阶段 更新阶段 卸载阶段 挂载阶段 在这个过程中,会触发以下几个事件 getDefaultProps,设置默认属性 getInitialState,设置初始状态 componentWillMount 即将挂载 render 渲染,就是挂载 componentDidMount 挂载完成 <!DOCTYPE html> <html> <head> <meta

React Native组件生命周期

概述 所谓生命周期,就是一个对象从开始生成到最后消亡所经历的状态,理解空间的生命周期,是开发中必须掌握的一个知识点.就像 Android 开发中组件 一样,React Native的组件也有生命周期(Lifecycle). React Native组件的生命周期大致上可以划分为实例化阶段.存在阶段和销毁阶段.我们只有在理解组件生命周期的基础上,才能开发出高性能的app. React Native中组件的生命周期大致可以用以下图表示: 如图: 第一阶段:是组件第一次绘制阶段,如图中的上面虚线框内,

React Native之生命周期

React Native生命周期主要分为三大阶段:实例化阶段(图中上框部分),存在阶段(图中左框部分),销毁阶段(图中右框部分). 如图: 下面简单讲解一下三大阶段中各自的函数: 实例化阶段: 在日常开发中,最为常用的就是实例化阶段,因为该阶段是组件的构建,展示阶段. getDefaultProps: 该函数用于初始化一些默认的属性,开发中,通常将一些固定不变的值放在该函数内进行初始化,比如url.可以利用this.props.XXX 来获取该属性值.由于被初始化后,以后就不会再调用getDef

react-webpack，react中组件生命周期简单展示

首先配置下webpack.config.js module.exports={ entry:{ demo:'./app/app.js' }, output:{ path:__dirname+'/build', filename:'[name].js', library:'game', libraryTarget:'umd' }, module:{ loaders:[ { test:/\.js$/, loader:'jsx-loader' } ] } } 入口文件entry,整合js后输出outp