web前端高级React - React从入门到进阶之state及组件的生命周期

系列文章目录

第一章：React从入门到进阶之初识React
第一章：React从入门到进阶之JSX简介
第三章：React从入门到进阶之元素渲染
第四章：React从入门到进阶之JSX虚拟DOM渲染为真实DOM的原理和步骤
第五章：React从入门到进阶之组件化开发及Props属性传值
第六章：React从入门到进阶之state及组件的生命周期
第七章：React从入门到进阶之React事件处理

一、State

本节中我们将介绍React组件中的一个新的概念：“State”。在前面元素渲染一章中我们用函数组件做了一个时钟的例子，由于函数式组件是一个静态组件，内容一旦渲染就不能再改了，要想改变函数组件里的内容除了我们后面要讲的使用React HOOKS以外，只能通过重新渲染组件的方式来达到更新内容的目的。先来回顾一下前面章节我们用函数组件做的时钟的小案例

function Clock(props) {
    
 return (
   <div>
     <h1>Hello, world!</h1>
     <h2>It is {
    props.date.toLocaleTimeString()}.</h2>
   </div>
 );
}

function tick() {
    
 ReactDOM.render(
   <Clock date={
    new Date()} />,
   document.getElementById('root')
 );
}

setInterval(tick, 1000);

如上代码，我们用函数封装了一个Clock时钟组件，然后利用定时器每隔1秒调用一次tick函数来重新渲染组件从而实现更新时钟的目的，那么这种方式显然不是最优的。React为我们提供了一个更好的办法来更新UI，那就是接下来要登场的“State”

• 什么是State

• State与props类似，但是State是React组件内部定义的一个私有属性，并且完全受控于当前组件
• 在定义组件时，把需要用到的一些属性定义在State对象中，然后通过this.state.[属性名]来访问该属性
• State 一般都只定义在类组件中，因为类组件都会继承自React.Component，而这个类中有个setState方法，我们可以通过调用setState方法来更新类组件中的state属性进而更新页面内容
• 在组件中定义state属性时，只能命名为“state”，这样才能通过setState方法来更新state属性，因为在setState方法中默认会寻找名为state的属性并进行处理，所以如果命名为其它名称，是无法通过setState来更新属性值及DOM内容的

接下来我们把上面时钟案例中的函数组件改造为类组件

class Clock extends ReactComponent{
    
	constructor(){
    
		this