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"));