01.React 函数组件

React 函数组件

1.先导入

import React, { Component } from "react";
import ReactDom from "react-dom";

2.各种类型的函数组件
2.1 基本

ReactDom.render(<div>6666</div>, document.getElementById("root"));

2.2函数形式

var app = () => {
  return (
    <div>
      你好
    </div>
  );
};
ReactDom.render(app(), document.getElementById("root"));

2.3参数形式

var app = (props)=>{
    return <div>
                <h1>{props.title}</h1>           /* 单个花括号 */
                <h2>我的名字：{props.user}</h2>
            </div>
}
var app_data = app({
    title:"标题",
    user:"kiki"
})
ReactDom.render(app_data,document.getElementById("root"))

2.4标签形式

function App(){ /* 大写 */
    return (
        <div>你好吗？</div>
    )
}
ReactDom.render(<App/>,document.getElementById("root"));

2.5标签形式（带参数）

function App(props) {
  return (
    <div>
      <MyHeader></MyHeader>
      {props.title}
      <MyFooter></MyFooter>
    </div>
  );
}
ReactDom.render(<App title="好个锤子啊！" />, document.getElementById("root"));

2.6类组件形式

class App extends Component {
  render() {
    return (
      <div>
        <MyHeader></MyHeader>
        {this.props.title}
        <MyFooter></MyFooter>
      </div>
    );
  }
}
ReactDom.render(<App title="标题" />, document.getElementById("root"));
/* 都要放进div中，组件中只有一个大的div */
/* 组件内部props用来接收父组件传送的参数  this.props */