react 生命周期函数第一阶段

作者: 少__年 | 来源:发表于2019-03-15 22:16 被阅读0次

RN-生命周期函数（新）
React 生命周期函数
React的生命周期函数
04.React高级部分（中）
useState
四：React 进阶三（生命周期）
React快速上手5-react中的事件和生命周期函数
react生命周期函数
2020-09-11
React 生命周期

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>lifeCycle</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
</head>

<body>
    <div id="app"></div>
    <script src="../node_modules/babel-standalone/babel.js"></script>
    <script src="../node_modules/react/umd/react.development.js"></script>
    <script src="../node_modules/react-dom/umd/react-dom.development.js"></script>
    <script type="text/babel">


        class App extends React.Component{
            constructor(props) {
                super(props);
                // 构造只执行一次   重点提醒
                // this.props.title 读取父组件的传递的数据
                // this.state = {} 初始化一个状态
                this.state = {
                   a: props.title,
                   b: this.props.title
                }
                console.log( '01-构造函数1 ' )
            }

            componentWillMount() {
                console.log('02-组件即将被挂载2')
                // console.log(this.refs) 这时不能做dom操作
                // 请求后端接口 真实测试的会出现白屏（页面一直没有图片 文字 html结构 ）
                // this.setState() this.state this.props 都是异步的！
                this.setState({
                    c: '请求的数据'
                })
                //console.log(this.state.c)
                setTimeout(()=>{
                    //console.log( this.state.c )
                },2000)
            }

            componentDidMount() {
                console.log('04-组件挂载完成啦4') // 用户在网页上能够看到数据（图片 文字。。。）
                // 这是第一阶段 相当于 用户打开了网页
                // 真实的场景 会在此请求后端数据接口
                // 请求回来的数据 会挂载到state里面
                // 放在state里面的好处
                // 1. 当前组件是根据state的数据进行渲染
                // 2. state的数据是响应式数据 ，一但数据变化了，就会自动触发render函数
                // 例子 点击 当前组件的元素 执行当前的事件函数 更新当前的组件数据b ，数据变化
                // 就是自动触发render数据
                // 当前组件 维护当前组件的 数据（状态）
                console.log( this._btn.style.background = 'skyblue' )
            }

            handleClick = ()=>{
                this.setState({
                    b: '点击事件改变数据'
                })
            }
            render() {
                console.log( '03-开始渲染组件3' )
                // 可以在这一步对 state数据进行处理
                //console.log( this.state.c )
                return (
                    <div>
                        <h1 ref={'h1'}>App</h1>
                        {this.state.a}
                        <hr />
                        有10万行代码要渲染
                        {this.state.b}
                        <button
                            ref={adsadadasd=>this._btn=adsadadasd}
                            onClick={this.handleClick}
                        >点击 </button>
                    </div>
                );
            }
        }
        ReactDOM.render(
            <App title={'abc123'}></App>,
            document.querySelector('#app')
        )

    </script>
</body>

</html>

以上内容仅供本人做笔记使用