React尝试案例三

Posted 2022-02-20 hhh江月

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了React尝试案例三相关的知识，希望对你有一定的参考价值。

React尝试案例三

<!DOCTYPE html>
<html>
    <!-- 一个成功了的案例 -->

    <head>
        <meta charset="utf-8">
        <!-- 这个是声明了编码等相关的内容 -->

        <title>
            hello, react.
        </title>
        <!-- 这个是网页的标题 -->

        <!-- 这个是react框架相关的引用的内容 -->

        <script type="text/babel">
            // 这是一个比较成功的一个成功的案例是成功的案例了啦。




            
            // 这里需要注意type的格式以及里边的内容

            // 面向对象
            // 对象组件
            class Myclock extends React.Component
                // class
                // 类的继承

                constructor(props)
                    // 构造函数
                    // init method
                    super(props)
                    // super(props)

                    this.state = date: new Date()
                    // 设置state（状态）
                    // state(initial state)
                

                componentDidMount()
                    // 设置生命周期
                    this.timeid = setInterval(
                        ()=>this.tick()
                        , 1000)
                        // 1 second

                    console.log("" + this.timeid)
                

                componentWillUnmount()
                    // 在生命周期结束的时候删除相关的数据
                    // clear.
                    clearInterval(this.timeid)
                    // clear删除已经销毁的函数内容
                

                tick()
                    // update the state.
                    this.setState(
                        // 设置状态必须使用这个方法
                        // key - value
                        date: new Date()
                    )
                

                render()
                    // 这是一个内置函数，但是我们需要在里面写入内容
                    // method inserted
                    // show the time

                    console.log(this.state.date.toLocaleTimeString())
                    // console.log -> print messages.

                    return(
                        // 返回值是一个jsx
                        <div>
                            <h1>
                               hello react
                            </h1>
                            <h2>
                                time: this.state.date.toLocaleTimeString()                                   
                            </h2>
                        </div>
                    )
                
            

            ReactDOM.render(
                // 注意render里面有两个参数
                // use the render method to render.

                <Myclock />,
                // attention this use.
                document.getElementById("root")
                // 一定不要忘记了这个参数，否则是无法render的啦


            )

        </script>

    </head>

    <body>
        <div id="root">
            <!-- render. -->
        </div>
    </body>

</html>

以上是关于React尝试案例三的主要内容，如果未能解决你的问题，请参考以下文章