3. React 组件生命周期介绍

发布时间：2020-12-15 08:22:57 所属栏目：百科来源：网络整理

导读：React 中的每个组件都有三个阶段，这三个阶段构成了组件完整的生命周期。组件的生命周期为初始化→运行中→销毁，每个阶段都可以有开发者自定义的函数，执行不同的行为。下面介绍不同阶段的特点、不同阶段可以触发的函数以及触发条件。组件本质上是状态机

React 中的每个组件都有三个阶段，这三个阶段构成了组件完整的生命周期。组件的生命周期为初始化→运行中→销毁，每个阶段都可以有开发者自定义的函数，执行不同的行为。下面介绍不同阶段的特点、不同阶段可以触发的函数以及触发条件。

组件本质上是状态机，输入确定，输出一定确定。状态发生转换时会触发不同的钩子函数，从而让开发者有机会做出响应。可以用事件的思路来理解状态。

初始化阶段介绍

这个阶段可以触发五个函数，下面是不同函数的触发条件：

getDefaultProps：只调用一次，实例之间共享引用

getInitialState：初始化每个实例特有的状态

componentWillMount：render之前最后一次修改状态的机会

render：只能访问this.props和this.state，只有一个顶层组件，不允许修改状态和DOM输出

componentDidMount：成功render并渲染完成真实DOM之后触发，可以修改DOM

<!DOCTYPE html>
<html lang="zh-cn"    <head>
        <meta charset="UTF-8"        <title>react dom dangerouslySetInnerHTML</title>
        <script src="../build/react.js"></script>
"../build/react-dom.js""../build/browser.min.js""../build/jquery.min.js"    </head>
    <body>
type="text/babel" var count = 0;
 var HelloWorld = React.createClass({
                getDefaultProps: function () {
                    console.log("getDefaultProps,1") return {name: "Tom"}                },
                getInitialState: "getInitialState,2")myCount: ++countready: false}                componentWillMount: "componentWillMount,3") this.setState({true})                render: "render,4") return <p ref="childp">Hellothis.props.name ? this.props.name : "World"}<br/>{"" + this.state.ready} {myCount}</p>;
                componentDidMount: "componentDidMount,5")                    $(ReactDOM.findDOMNode(this)).append("surprise!")            })            ReactDOM.render(<div><HelloWorld></HelloWorld><br/><HelloWorld></HelloWorld></div>document.body)        </script>
    </body>
</html>

查看代码

运行结果

getDefaultProps,1

getInitialState,2

componentWillMount,3

render,4

getInitialState,4

2次componentDidMount,5

运行中阶段介绍

这个阶段可以触发四个函数：

componentWillReceiveProps：父组件修改属性触发，可以修改新属性、修改状态

shouldComponentUpdate：返回false会阻止render调用

componentWillUpdate：不能修改属性和状态

render：只能访问this.props和this.state，只有一个顶层组件，不允许修改状态和DOM输出

componentDidUpdate：可以修改DOM

<script         componentWillReceiveProps: function (newProps) {
            console."componentWillReceiveProps 1")log(newProps)        }        shouldComponentUpdate: "shouldComponentUpdate 2") return true        componentWillUpdate: "componentWillUpdate 3")        render: "render 4")p>Hello"World"}</        componentDidUpdate: function() {
            $(    }) var HelloUniverse =         getInitialState: function () {
''}        handleChange: function (event) {
name: event.target.value}) return <div>
                <HelloWorld name={this.state.name}></HelloWorld>
                <br/>
                <input type="text" onChange={this.handleChange} />
                </div>
        }    ReactDOM.render(<div><HelloUniverse></HelloUniverse></div>;
</script>

查看代码

运行，输入1，输出:

render 4

componentWillReceiveProps 1

Object {name: "1"}

shouldComponentUpdate 2

componentWillUpdate 3

render 4

销毁阶段介绍

这个阶段可以触发一个函数：

componentWillUnmount：在删除组件之前进行清理操作，比如计时器和事件监听器

createClass({
        render:         //在删除组件之前进行清理操作，比如计时器和事件监听器
        componentWillUnmount: "clear HelloWorld!") if (event.value == "123") {
                ReactDOM.unmountComponentAtNode(document.getElementsByTagName("body")[0]) return            }
</script>

查看代码

运行，当输入123会把内容删除，并输出： clearHelloWorld!

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!