React State与生命周期

最新推荐文章于 2022-10-11 16:19:15 发布

橘猫吃不胖～

最新推荐文章于 2022-10-11 16:19:15 发布

阅读量572

点赞数

分类专栏： React 文章标签： react

本文链接：https://blog.csdn.net/m0_46612221/article/details/123302414

版权

React 专栏收录该内容

16 篇文章 7 订阅

订阅专栏

React State与生命周期

1 React State介绍
2 React组件的生命周期
3 【案例】显示/隐藏计时器

1 React State介绍

React将组件看成是一个状态机(State Machines) ，通过其内部定义的状态(State) 与生命周期(Lifecycle) 实现与用户的交互，维持组件不同的状态。

在React框架中定义了一个状态(State) 概念，并通过状态(State) 来实现React组件的状态机特性。所谓React组件的“状态机”特性，就是指组件通过与用户的交互，实现不同的状态，然后通过渲染UI保证用户界面和数据一致性。

当组件与用户交互时，数据会发生变化，这时就要用到组件内的state属性；当state值发生改变时，react会重新渲染（刷新）组件，从而保证UI界面和数据的一致。

state的创建方式为：

this.state = {
    // 属性名: 值
}

更新状态（state）方式：

this.setState({
    // 属性名: 新的属性值
})
this.setState(回调函数);

2 React组件的生命周期

2.1 挂载

挂载（mount）：当组件创建成功，并插入到DOM中。其挂载阶段依次执行的方法如下**：constructor**、getInitialState、getDefaultProps、componentWillMount、render、componentDidMount

1、constructor() ——构造方法重写的前提

如果不初始化 state 或不进行方法绑定，则不需要为 React 组件实现构造函数。

在 React 组件挂载之前，会调用它的构造函数。在为 React.Component 子类实现构造函数时，应在其他语句之前调用 super(props)。否则，this.props 在构造函数中可能会出现未定义的 bug。

通常，在 React 中，构造函数仅用于以下两种情况：①通过给 this.state 赋值对象来初始化内部 state；②为事件处理函数绑定实例。

在 constructor() 函数中不要调用 setState() 方法。如果组件需要使用内部 state，请直接在构造函数中为 this.state 赋值初始化state：

2、render()

render()是类组件中必须要实现的方法，该方法被调用时会检查this.props和this.state的变化，并返回以下类型之一：

类型	说明
React 元素	通常通过 JSX 创建。例如，`<div />` 会被 React 渲染为 DOM 节点，`<MyComponent />` 会被 React 渲染为自定义组件，无论是 `<div />` 还是 `<MyComponent />` 均为 React 元素。
数组或 fragments	使得 render 方法可以返回多个元素
Portals	可以渲染子节点到不同的 DOM 子树中。
字符串或数值类型	它们在 DOM 中会被渲染为文本节点
布尔类型或 null	什么都不渲染。（主要用于支持返回 test && `<Child />` 的模式，其中 test 为布尔类型。)

render() 函数应该为纯函数，这意味着在不修改组件 state 的情况下，每次调用时都返回相同的结果，并且它不会直接与浏览器交互。

如需与浏览器进行交互，可以在 componentDidMount() 或其他生命周期方法中执行操作。保持 render() 为纯函数，可以使组件更容易使用、维护。

3、componentDidMount() ——挂载

它会在组件插入到DOM树之后立即调用。依赖于DOM节点的初始化应该放在这里。如需通过网络请求获取数据，此处是实例化请求的好地方。这个方法是比较适合添加订阅的地方。如果添加了订阅，请不要忘记在componentWillUnmount()里取消订阅。

该函数的工作：
（1）和浏览器进行交互
（2）可以改变状态值：调用setState方法

2.2 更新

更新(update)：当组件的props或state发生改变时，就会触发更新操作。在更新阶段调用的函数如下：componentWillReceiveProps、shouldComponentUpdate、componentWillUpdate、render、componentDidUpdate

1、componentWillReceiveProps（nextProps）

并不是只有在props发生改变的时候才会被调用，实际上只要是父组件的render函数被调用，render里面被渲染的子组件就会被更新，不管父组件传给子组件的props有没有被改变，都会触发子组件的componentWillReceiveProps过程，但是，this.setState方法的触发过程不会调用这个函数，因为这个函数适合根据新的props的值来计算出是不是要更新内部状态的state。

2、shouldComponentUpdate（nextProps， nextState）

这个函数的重要性，仅次于render，render函数决定了该渲染什么，而shouldComponentUpdate决定了不需要渲染什么，都需要返回函数，这一过程可以提高性能，忽略掉没有必要重新渲染的过程

3、componentWillUpdate和componentDidUpdate

componentDidUpdate(prevProps, prevState, snapshot)：会在更新后会被立即调用。首次渲染不会执行此方法。当组件更新后，可以在此处对 DOM 进行操作。如果你对更新前后的 props 进行了比较，也可以选择在此处进行网络请求。

        componentDidUpdate(prevProps) {
            // 典型用法（不要忘记比较props）
            if (this.props.userID !== prevProps.userID) {
                this.fetchData(this.props.userID);
            }
        }

也可以在 componentDidUpdate() 中直接调用 setState()，但请注意它必须被包裹在一个条件语句里，正如上述的例子那样进行处理，否则会导致死循环。它还会导致额外的重新渲染，虽然用户不可见，但会影响组件性能。

在react中，触发render的有4条路径。以下假设shouldComponentUpdate都是按照默认返回true的方式。

首次渲染Initial Render
调用this.setState （并不是一次setState会触发一次render，React可能会合并操作，再一次性进行render）
父组件发生更新（一般就是props发生改变，但是就算props没有改变或者父子组件之间没有数据交换也会触发render）
调用this.forceUpdate

在这里插入图片描述
注意：如果在shouldComponentUpdate里面返回false可以提前退出更新路径。

2.3 卸载

卸载(unmount)：当组件从DOM中移除时。卸载时调用的函数是componentWillUnmount()，它会执行必要的清理工作，在组件被移除DOM但没有销毁之前调用。

在该函数中不应调用setState方法，因为此时组件已经卸载，再更新状态，组件也不会重新挂载

2.4 总结

（一）命令式编程：jquery（自己寻找要操作的DOM元素，自己写要做的事情）

（二）声明式编程：react（只需要在钩子函数中写东西即可，不需要执行钩子函数）
这些钩子函数是本身就会执行的，我们重写了一部分，是为了在这个组件的某个时期做一些事情。

（三）生命周期流程：
1、第一次初始化渲染显示：ReactDOM.render()
constructor()：创建对象初始化 state
componentWillMount()：将要插入回调
render() : 用于插入虚拟 DOM 回调
componentDidMount()：已经插入回调

2、每次更新 state：this.setState()
componentWillUpdate()：将要更新回调
render()：更新(重新渲染)
componentDidUpdate()：已经更新回调

3、移除组件：ReactDOM.unmountComponentAtNode(containerDom)
componentWillUnmount()：组件将要被移除回调

（四）重要的勾子
1、render()：初始化渲染或更新渲染调用
2、componentDidMount()：开启监听，发送 ajax 请求
3、componentWillUnmount()：做一些收尾工作，如：清理定时器

3 【案例】显示/隐藏计时器

示例：写一个计时器和一个按钮，通过点击按钮可以隐藏/显示计时器

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/babel.min.js"></script>
</head>

<body>
<div id="root"></div>
<script type="text/babel">
    // 获取div
    let root = document.getElementById("root");

    // 定义类组件
    class Clock extends React.Component {
        constructor(props) {
            super(props);
            // 定义状态机并初始化
            this.state = {
                show: true, // 判断当前计时器是否为显示状态
                text: "隐藏", // 定义按钮上的文字
                date: new Date() // 获取当前的时间
            }
            // 进行事件绑定：当某个事件被触发时，调用事件处理函数
            this.handleClickShow = this.handleClickShow.bind(this); // 将事件处理函数绑定到this
        }

        // 自定义方法：改变状态机（改变状态机中的属性值）
        tick() {
            // 将state中的date属性值根据当前时间更新
            this.setState({
                date: new Date()
            })
        }

        // 挂载完成后立即执行的函数，即页面打开时就可以看到组件
        componentDidMount() {
            // 编写定时器，每秒调用一次tick()函数
            // this.timer是一个可以被关闭的对象
            this.timer = setInterval(() => this.tick(), 1000);
        }

        // 组件卸载后关闭计时器
        componentWillUnmount() {
            // 关闭计时器
            clearInterval(this.timer);
        }

        // 编写点击方法，点击按钮后一些状态发生改变
        handleClickShow() {
            // 方法1
            // this.setState({ //点击按钮后改变
            //     show: !this.state.show, // 显示定时器点击后不显示
            //     text: !this.state.show ? "隐藏" : "显示" // 文字响应转换
            // })
            // 方法2：使用回调函数
            this.setState(state => ({ // state表示当前的状态
                show: !state.show, // 显示定时器点击后不显示
                text: !state.show ? "隐藏" : "显示" // 文字响应转换
            }))
        }

        // 定义在页面上的效果
        render() {
            // 根据不同的状态判断计时器是否显示
            // 如果show为true，显示计时器，否则什么都不显示
            let clock = this.state.show == true ? <h2>{this.state.date.toLocaleTimeString()}</h2> : null;
            return (
                <div>
                    <button onClick={this.handleClickShow}>{this.state.text}计时器</button>
                    <br/>
                    {clock}
                </div>
            )
        }
    }

    // 渲染
    ReactDOM.render(<Clock/>, root);
</script>
</body>

</html>