React 第五章 state 组件生命周期

本章我们主要讲解组件之state使用，以及组建的生命周期，在本章我们将使用class进行组件编写。

1，组件的状态state

在之前我们讲过一个页面时间的例子，之前我们使用的属性props进行定时页面更新渲染。但是作为一个时钟，根据面向对象思想，其更新时间应该由自身内部控制，而不是从外界传入。所以作为一个组件器必不可少的需要有自己内部状态数据功能。所以出现了组件内部state状态机制。有时我们也将React的组件称为状态机。

我们对之前的时钟示例进行第一步改造，改造为显示内部数据：我们在state中添加一个date字段

import React from 'react';
import ReactDOM from 'react-dom';//State & 生命周期
class Clock extends React.Component{constructor(props){super(props);this.state={date:new Date()};}render(){return (<div>Time now is {this.state.date.toLocaleTimeString()}</div>);}
}ReactDOM.render(<Clock />,document.getElementById('root'));

此时页面将会看到一个时间，但是时间是不动的，我们需要实现定时定时的去更新state中的date。

2，组件的生命周期函数 componentDidMount（挂载）、componentWillUnmount（卸载）。

componentDidMount() 方法会在组件已经被渲染到 DOM 中后运行。

componentWillUnmount()在组件被Dom移除时会进行调用。

所以我们对上面的时钟例子进行改造，在组件被渲染到页面后，在添加定时更新state ,所以在componentDidMount方法中添加定时更新代码。通过设置更新state中date属性，因为state在页面中进行了使用，所以React会及时的更新最新状态到页面上。好比一个人状态变好了，立马脸上就表现出活力。state的变化会及时更新到页面UI中（下面会讲不更新的情况）。

import React from 'react';
import ReactDOM from 'react-dom';//State & 生命周期
class Clock extends React.Component{constructor(props){super(props);this.state={date:new Date()};console.log("执行constructor构造函数。。");}componentDidMount() {console.log("组件被挂载了");this.timerId = setInterval(()=>this.timeRun(),1000);}componentWillUnmount() {console.log("组价被卸载了。。。。");}timeRun(){this.setState({date:new Date()});}render(){console.log("执行render渲染函数。。");return (<div>Time now is {this.state.date.toLocaleTimeString()}</div>);}
}ReactDOM.render(<Clock />,document.getElementById('root'));

组件内部方法执行我们可以根据打印信息看到，手续执行构造函数，然后执行渲染方法，在执行挂载函数。。。

3，关于state必须知道的

3.1 state 只能在构造函数中进行直接赋值，其他地方赋值无效，其他地方只能通过this.setState({})来更新state中的值。构造函数是唯一可以直接给state复制的地方。

3.2 state的更新可能不会及时更新页面，因为state的更新可能为异步的，比如你在设置state中的某属性值时，新值为有旧的值参与运算获取，则不能及时更新页面UI,如：

this.setState({counter: this.state.counter + this.props.increment,
});

要解决这个问题我们在this.setState()中不使用对象，使用函数代替。第一个参数为更新前的state，第二个参数可以为要使用的props参数。上面代码调整为则可以实时的更新页面UI：

// Correct
this.setState((state, props) => ({counter: state.counter + props.increment
}));

3.3 state在更新时可以只更新其中一个，或者多个。其中没有体现的属性将不会进行更新。

3.4 在React组件中 state是属于组件内部的数据，其他组件不能进行直接访问修改。由于我们知道传递参数到一个组件中使用的是组件属性props。所以在React中数据的传递只能为有上层级的组件传递到子组件中。子组件通过其构造函数props对象获取到到传入的值。故也称为React数据传递为单向数据传递。

React 第五章 state 组件生命周期相关推荐

android 组件生命周期,Android组件化开发实践（五）：组件生命周期管理
每个Android应用启动时,都会先创建一个Application.通常在Application里我们会做一些应用初始化的操作,常见的有第三方SDK初始化.在应用组件化之后,组件与壳工程是隔离开来的, ...
android组件化数据生命周期,Android组件化开发实践（五）：组件生命周期管理
每个Android应用启动时,都会先创建一个Application.通常在Application里我们会做一些应用初始化的操作,常见的有第三方SDK初始化.在应用组件化之后,组件与壳工程是隔离开来的, ...
React文档（六）state和生命周期
想一下之前的章节时钟的例子. 目前为止我们只学习了一直方式去更新UI. 我们调用ReactDOM.render()方法去改变渲染的输出: function tick() {const element ...
React心得之降龙十八掌：第三式-见龙在田（组件生命周期详解）
引言 (乾卦九二)<彖>曰:"'见龙在田',德施普也.""见龙在田,利见大人." 在傅佩荣<自我的觉醒>中这样说道,见龙在田:龙出现在地 ...
React 重温之组件生命周期
生命周期任何事物都不会凭空产生,也不会无故消亡.一个事物从产生到消亡经理的各个阶段,我们称之为生命周期. 具体到我们的前端组件上来,一个组件的生命周期可以大体分为创建.更新.销毁这个三个阶段. 本 ...
React.js 小书 Lesson18 - 挂载阶段的组件生命周期（一）
React.js 小书 Lesson18 - 挂载阶段的组件生命周期(一) 本文作者:胡子大哈本文原文:http://huziketang.com/books/react/lesson18 转载请注 ...
react组件生命周期_React组件生命周期-挂钩/方法介绍
react组件生命周期 React components have several lifecycle methods that you can override to run your code a ...
Taro+react开发（45）taro中组件生命周期
组件生命周期# 每一个组件都有几个你可以重写以让代码在处理环节的特定时期运行的"生命周期方法".方法中带有前缀 will 的在特定环节之前被调用,而带有前缀 did 的方法则会在特 ...
组件生命周期管理和通信方案
随着移动互联网的快速发展,项目的迭代速度越来越快,需求改变越来越频繁,传统开发方式的工程所面临的一些,如代码耦合严重.维护效率低.开发不够敏捷等问题就凸现了出来.于是越来越多的公司开始推行" ...

React 第五章 state 组件生命周期

React 第五章 state 组件生命周期相关推荐

最新文章

热门文章