React-component-class-类组件&函数组件比较

定义组件有两个要求：

函数组件：

类组件：

类组件和函数组件的区别：

判断组件类型type:

时间显示实例验证：

 jsx语法-构建element

函数组件实现

类组件实现

函数组件与类组件react官方文档：组件 & Props – React

定义组件有两个要求：

• 组件名称必须以大写字母开头

• 组件的返回值只能有一个根元素

函数组件：

• 函数组件接收一个单一的 props 对象并返回了一个React元素

类组件：

• 无论是使用函数或是类来声明一个组件，它决不能修改它自己的 props。
• 所有 React 组件都必须是纯函数，并禁止修改其自身 props 。
• React是单项数据流，父组件改变了属性，那么子组件视图会更新。
• 属性 props 是外界传递过来的，状态 state 是组件本身的，状态可以在组件中任意修改
• 组件的属性和状态改变都会更新视图。

类组件和函数组件的区别：

• 类组件使用的时候要实例化，而函数组件直接执行函数取返回结果即可

    <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <div id="app"></div>
    <script type="text/babel">
       
    //    函数组件
       function Welcom(props){
           return <h1>hello {props.name}</h1>
       }

    //    类组件
    class Welcome1 extends React.Component{
        // 实例化的时候会执行constructor
        constructor(props){
            // 打印控制台参数
            // console.log("constructor-props:",props);

            // 控制台报错打印： Inline Babel script: 'this' is not allowed before super() super未调用还未实例化
            // console.log('super(props)前',this.props);

            // 必须有super,给父类传值
            super(props)//this.props = props
            // 此时this(welcom类的实例)已经挂载this.props = props

            // super()//this.props = underfind
           
            console.log('super(props)后',this.props);
            
        }

        // 默认自动调用：组件内容
        render(){
            // render里面的实例不受constructor里面super影响，即使super() props=underfind，render也不影响正常输出
            console.log(this);//当前类的组件实例
            console.log(this.props);//render直接可以props使用是因为react的React.Component方法自动挂载在this上
            // 传递数值
            const {name} = this.props
            return <h1>hello</h1>
        }
    }
    let e = <Welcome1 name = 'jack'/>
    console.log(e);

    // 判断类型type:
    // 如果是函数：自动执行函数，同时Props传入函数，获取返回值，再次渲染，同步到真实DOM中=>渲染容器中
    // 如果是类组件：会通过new方式调用 new Welcome(props)=>执行constructor(props)
    // 正常标签虚拟DOM直接渲染生成标签，生成真实DOM=>渲染容器中
       ReactDOM.render(e,document.getElementById("app"))
    </script>

判断组件类型type:

• 如果是函数：自动执行函数，同时Props传入函数，获取返回值，再次渲染，同步到真实DOM中=>渲染容器中
• 如果是类组件：会通过new方式调用 new Welcome(props)=>执行constructor(props)
• 正常标签虚拟DOM直接渲染生成标签，生成真实DOM=>渲染容器中

时间显示实例验证：

显示：时间跳动显示,每一秒跳动一次

•  jsx语法-构建element

// 01 jsx语法-构建element
    function tick(){
        var e = 
        <div>
            <h1>Clock</h1>
             <h3>
            time:{new Date().toLocaleTimeString()}
             </h3>
        </div>
    ReactDOM.render(e,document.getElementById("app"))
    }
    tick()
    setInterval(tick,1000);

• 函数组件实现

// 02 函数组件
    // 2-1每隔1s创建渲染一次组件(不传值)
    function Clock(){
        return(
        <div>
            <h1>Clock</h1>
            <h3>
            time:{new Date().toLocaleTimeString()}
            </h3>
        </div>
        )
    }
    function tick(){
        var e = <Clock />
    ReactDOM.render(e,document.getElementById("app"))
    }
    setInterval(tick,1000)

    // 2-2动态优化(传值)
    function Clock(props){
        return(
        <div>
            <h1>Clock</h1>
            <h3>
            time:{props.time}
            </h3>
        </div>
        )
    }
    function tick(){
        // f Clock(props) props:{time:时间}
        var e = <Clock time={new Date().toLocaleTimeString()} />
    ReactDOM.render(e,document.getElementById("app"))
    }
    // 每隔1s手动触发一次tick，tick中创建Clock
    setInterval(tick,1000)

• 类组件实现

// 03 类组件实现
    // 类组件实现 函数组件没有状态属性

    // 没有状态，时间还是传递的，没有行为(对比函数组件和类组件传值的区别)
    class Clock extends React.Component{
        // render作用：构建组件内容
        render(){
            return(
            <div>
                <h1>Clock</h1>
                <h3>
                time:{this.props.time}
                </h3>
            </div>
            )
        }
    }
    function tick(){
        // new Clock(props)类组件通过new的方式调用
        var e = <Clock time={new Date().toLocaleTimeString()} />
    ReactDOM.render(e,document.getElementById("app"))
    }
    // 每隔1s手动触发一次tick，tick中创建Clock
    setInterval(tick,1000)