浅谈react hook （组件）

import React from "react";

import ReactDOM from "react-dom";

import "./index.css";

// 1.React 组件的发展

//一，函数组件 功能组件也叫无状态组件，一般只负责渲染结构

function Welcome(props) {

    return <h1>你好呀, {props.name}</h1>;

}

//二，类组件 也是有状态组件，也可以叫容器组件。一般有交互逻辑和业务逻辑。

class App extends React.Component {

    state = {

        name: '张三',

        age:18,

    }

    

    componentDidMount() {

        

    }

    render() {

        return (

            <div>

                <Welcome name={this.state.name}></Welcome>

                 <h1>Hello, {this.state.name}我今年{this.state.age}</h1>

                 {/* 一，react方法的使用 */}

                <button onClick={() => this.setState({ name: '007'})}>改名</button>

            </div>

               

      )

    }

    

}

// 三，渲染组件（和无状态类似）

// 。。。。。。。。。。。。

ReactDOM.render(<App />, document.getElementById("root"));