关于函数组件和类组件的浅显理解

目录结构如上

index.js

import React/* , { Fragment } */ from 'react';
import ReactDOM from 'react-dom';
import One from './one'
import Two from './two'

ReactDOM.render(<div><One name="毛毛" /> <Two name="吉吉国王" /></div>, document.getElementById('root'));

one.js

import React from 'react';

// 函数组件
export default function One (props) {
    return (
        <div>
            "函数组件："hello{props.name}!!
            {/* 通过props传值 */}
        </div>
    )
}

two.js

import React from 'react';

// 类组件
export default class Two extends React.Component { //需要继承
    constructor(props) {//构造函数 显式
        super() //有父类先调用父类的构造函数
        this.state = {
            i: 0
        }
    }
    add = () => {
        this.setState({ //异步函数  调用setState函数时：修改state里面的变量，然后重新调用render方法
            i: this.state.i + 1
        })
    }
    render () {//render渲染函数 父类的  固定写法  生命周期函数之一
        return (
            <div>
                "类组件："hello{this.props.name}!!
                {/* this.props传值
                this 指当前实例化的对象（new出来的） */}
                <div>{this.state.i}</div>
                <button onClick={this.add}>修改</button>
            </div>
        )
    }
}

//**简单总结下函数组件和类组件的区别：**
// 函数组件：无状态(setState方法)组件 
//优点：效率较高
 // 类组件：  有状态(setState方法)组件
// 优点：有生命周期、构造函数、setState重新渲染，
//做复杂业务逻辑。so，如果想让页面更新 class 类组件可以做到