React(二)——State 和生命周期

最新推荐文章于 2023-04-09 21:15:34 发布

fighting Ably!

最新推荐文章于 2023-04-09 21:15:34 发布

阅读量369

点赞数

分类专栏：前端文章标签： react.js 前端 react生命周期

原文链接：https://zhuanlan.zhihu.com/p/225813191

版权

前端专栏收录该内容

42 篇文章 2 订阅

订阅专栏

1. State

State和props类似，但是state是私有的状态，并且完全受控于当前组件。
state只存在于class组件内，当状态发生变化时，渲染UI，让数据的变化动态及时的展现在页面上。

用一个简单的示例告诉大家如何设置并修改state

1.1 设置state

在constructor中设置state初始值

    constructor(props) {
        super(props) // 通过以下方式将props传递到父类的构造函数中
        this.state = {
            count : 1, // 设置具体需要的state值
        }
    }

1.2 修改state

通过调用this.setState({})方法对state值进行需改

        this.setState({
            count: this.state.count + count
        })

1.3 完整代码

class组件调用方法传参方式 this.changeMyCount[方法名].bind(this, this.state.count[所传参数])

import { Component } from 'react'
import articleList from "../../assets/js/article_list"
import ArticleList from '../../components/ArticleList'
import './index.css'
export default class MyArticle extends Component {
    constructor(props) {
        super(props)
        this.state = {
            count : 1
        }
    }
    changeMyCount(count) {
        this.setState({
            count: this.state.count + count
        })
    }
    render() {
        return (
            <div className='article_container'>
                <button onClick={this.changeMyCount.bind(this, this.state.count)}>当前count： {this.state.count},点此加count</button>
                <ArticleList list={articleList} />
            </div>
        )
    }
}

2. 生命周期(转载地址, 侵删)

组件从出现到消亡这个过程叫做组件的生命周期。整个生命周期在不同的时机，有着不同的生命周期函数，我们可以通过该生命周期函数在对应时机内执行相应的操作(例如：发起网络请求、清除定时器等)

React生命周期可被分为3个阶段挂载(Mounting)、更新(Updating) 和卸载(Unmounting)

2.1 挂载阶段

这是React组件生命周期的第一个阶段，也可以称为组件出生阶段，这个阶段组件初始化，获得初始props并定义将会用到的state。此阶段结束时，组件及其子元素都会在UI中被渲染(DOM)，我们还可以对渲染后的组件进行进一步的加工。

挂载阶段，组件会完成它的首次渲染，先执行初始化，再被挂载到真是的DOM中，其中依次调用的方法有constructor()、 componentWillMount()、 render() 和 componentDidMount()。除了render()，其他三个方法都只会执行一次。

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

2.1.1 constructor()

在生命周期中，类的构造函数constructor()会率先执行，用于初始化组件的状态、接收外部传递进来的数据、绑定成员方法的this指向等工作(只执行一次)

2.1.2 componentWillMount()

会运行在render()之前，他是渲染之前的回调函数。不过，由于在这个方法中执行的任务都能提前到constructor()中，因此实际项目中很少会用到它。(只执行一次)

2.1.3 render()

是在定义组件时必须声明的方法，它是一个无副作用的纯函数，可根据组件的props和state得到一个React元素、null 或 false等返回值，并且在render()方法中不能调用改变组件状态的this.setState()方法。注意：将元素渲染到页面DOM中的工作都由React负责，而不是render()方法。

2.1.4 componentDidMount()

运行在render()之后，它是渲染之后的回调函数。此时组件已被挂载到页面中，可以执行DOM相关的操作，例如异步读取服务器中的数据并填充到组件中、调用Jquery代码等。(只执行一次)

2.2 更新阶段

引起组件更新(即重新渲染)的方式有三种：

第一种：由父组件向下传递props(即调用父组件的render()方法)引起的更新，依次会调用五个方法
- componentWillReceiveProps()
- shouldComponentUpdate()
- componentWillUpddate()
- render()
- componentDidUpdate()
第二种：通过改变自身state（即调用this.setState()方法）引起的更新，会忽略componentWillReceiveProps方法，只执行四个回调函数
- shouldComponentUpdate()
- componentWillUpddate()
- render()
- componentDidUpdate()
第三种: 通过组件的forceUpdate()方法强制更新，只会执行后三个回调函数
- componentWillUpddate()
- render()
- componentDidUpdate()