4 Reactjs 组件状态和生命周期

╰+哭是因爲堅強的太久メ 2023-02-27 08:08 41阅读 0赞

**把函数式组件转化为类组件**

class Clock extends React.Component \{

render() \{

return (

<div>

<h1>Hello, world!</h1>

<h2>It is \{this.props.date.toLocaleTimeString()\}.</h2>

</div>

);

\}

\}

Clock 现在被定为类组件，而不是函数式组件。

类允许我们在其中添加本地状态(state)和生命周期钩子。

**在类组件中添加本地状态(state)**

添加一个 类构造函数(class constructor) 初始化 this.state:

class Clock extends React.Component \{

constructor(props) \{

super(props);

this.state = \{ date: new Date() \};

\}

render() \{

return (

<div>

<h1>Hello, world!</h1>

<h2>It is \{this.state.date.toLocaleTimeString()\}.</h2>

</div>

);

\}

\}

**在类中添加生命周期方法**

在ES6中，一个React组件是用一个class来表示的（具体可以参考官方文档），如下：

// 定义一个TodoList的React组件，通过继承React.Component来实现

class TodoList extends React.Component \{

// 组件即将挂载时调用

componentWillMount()\{

\}

\}

这几个生命周期相关的函数有：

// 构造函数，在创建组件的时候调用一次。

constructor(props, context)

// 在组件挂载之前调用一次。

// 如果在这个函数里面调用setState，本次的render函数可以看到更新后的state，并且只渲染一次。

void componentWillMount()

// 在组件挂载之后调用一次。这个时候，子主键也都挂载好了，可以在这里使用refs。

void componentDidMount()

// 父组件发生render的时候子组件就会调用componentWillReceiveProps（不管props有没有更新，也不管父子组件之间有没有数据交换）

void componentWillReceiveProps(nextProps)

// 每次调用setState后都会调用shouldComponentUpdate判断是否需要重新渲染组件。默认返回true

bool shouldComponentUpdate(nextProps, nextState)

// shouldComponentUpdate返回true或者调用forceUpdate之后，componentWillUpdate会被调用。

void componentWillUpdate(nextProps, nextState)

// 除了首次render之后调用componentDidMount，其它render结束之后都是调用componentDidUpdate。

void componentDidUpdate()

// 必须函数，不要在render里面修改state。

ReactElement render()

// 组件被卸载的时候调用。一般在componentDidMount里面注册的事件需要在这里删除。

void componentWillUnmount()

作者：linjinhe  
链接：https://www.jianshu.com/p/4784216b8194  
來源：简书  
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

发表评论取消回复

表情：

评论列表（有 0 条评论，41人围观）

还没有评论，来说两句吧...

相关阅读

相关 reactjs组件的生命周期

React组件的生命周期指的是组件从创建到销毁的整个过程中，React提供了一系列的生命周期方法，可以在不同的阶段执行特定的操作。然而，需要注意的是，React 16.3版本以

一时失言乱红尘/ 2024年02月18日 13:13/ 0 赞/ 80 阅读

相关 reactjs组件的生命周期代码演示

![在这里插入图片描述][c5cb4ef89b014023b0114f22cc852256.png] 1. 初始化阶段: 由ReactDOM.render()触发—初

小灰灰/ 2024年02月17日 13:17/ 0 赞/ 42 阅读

相关 reactjs组件的生命周期：创建时和更新时

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5a2m5Lqu57yW56iL5omL6K

浅浅的花香味﹌/ 2023年10月01日 17:01/ 0 赞/ 38 阅读

相关 reactjs组件的生命周期函数：getDerivedStateFromProps

reactjs组件的生命周期函数：getDerivedStateFromProps ![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_s

今天药忘吃喽~/ 2023年10月01日 03:21/ 0 赞/ 48 阅读

相关 reactjs组件生命周期：componentWillReceiveProps及新旧版本生命周期钩子函数对比

reactjs组件生命周期：componentWillReceiveProps及新旧版本生命周期钩子函数对比 ![在这里插入图片描述][watermark_type_d3F

r囧r小猫/ 2023年10月01日 03:18/ 0 赞/ 40 阅读

相关 reactjs生命周期：forceUpdate流程(不更新状态)

reactjs生命周期：forceUpdate流程(不更新状态) ![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_

傷城~/ 2023年10月01日 02:58/ 0 赞/ 36 阅读

相关 React组件和生命周期

React组件和生命周期 ![format_png][] 一 React组件组件是React的核心、精髓。组件有输入、输出以及自身状态，分别对应props、rende

素颜马尾好姑娘i/ 2023年07月03日 12:19/ 0 赞/ 84 阅读

相关 4 Reactjs 组件状态和生命周期

把函数式组件转化为类组件 class Clock extends React.Component \{ render() \{ return (

╰+哭是因爲堅強的太久メ/ 2023年02月27日 08:08/ 0 赞/ 42 阅读

相关【ReactJS】通过一个例子学习React组件的生命周期

源代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"

朴灿烈づ我的快乐病毒、/ 2022年06月02日 03:51/ 0 赞/ 179 阅读

相关 React 组件生命周期

在本章节中我们将讨论 React 组件的生命周期。组件的生命周期可分成三个状态： Mounting：已插入真实 DOM Updating：正在被重新渲染

超、凢脫俗/ 2022年02月16日 10:15/ 0 赞/ 368 阅读