react 组件生命周期

时间：2019-10-04 22:40:20 阅读：109 评论：0 收藏：0 [点我收藏+]

标签：style str mamicode ati code dataset math oct extend

生命周期图谱

http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

技术图片

1. 挂载时

constructor 构造器
static getDerivedStateFromProp(props, state) return object 或者 null，用于改写state
render return jsx 或者 React.createElement(....) 渲染组件的UI
componentDidMount 组件挂载完成，一般在此时发起请求，获取数据

2. 更新时

static getDerivedStateFromProp(props, state)
shouldComponentUpdate(nextProps, nextState) return boolean,如果是false，则不更新，true则更新
render
getSnapshotBeforeUpdate(prevProps, prevState) 在更新dom之前获取一些dom的状态，例如scrollTop
componentDidUpdate(prevProps) 组件更新完成，一般用于需要对比前后prop的时候

3. 卸载时

componentWillUnmount 组件即将销毁，一般用于清除timer、中止网络请求等等

demo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test react component lifecycle</title>
</head>
<body>
    <div id="app" data-name="啊咩"></div>
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script type="text/babel">
        const e = React.createElement;
        class MyComponent extends React.Component {
            constructor(props) {
                super(props);
                this.state = {name: props.name}
                console.log(‘constructor‘);
            }
            
            static getDerivedStateFromProps(props, state){
                console.log(‘state from props‘);
                return state
            }

            shouldComponentUpdate(nextProps, nextState) {
                console.log(‘should component update‘);
                return nextState.name > 0.5
            }

            render() {
                console.log(‘render‘);
                return (<div>
                    <button onClick={() => {this.setState({name: Math.random()})}}>
                        {this.state.name}
                    </button>    
                </div>)
            }

            componentDidMount() {
                console.log(‘did mount‘);
            }

            getSnapshotBeforeUpdate(prevProps, prevState) {
                console.log(‘get snapshot before update‘);
                return null
            }

            componentDidUpdate(prevProps) {
                console.log(‘did update‘);
            }

            componentWillUnmount() {
                console.log(‘will unmount‘);
            }
        }
        const dom = document.getElementById(‘app‘)
        ReactDOM.render(
            e(MyComponent, {name: dom.dataset.name}),
            dom
        )
    </script>
</body>
</html>

react 组件生命周期

标签：style str mamicode ati code dataset math oct extend

原文地址：https://www.cnblogs.com/amiezhang/p/11623446.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行